Skip to content

Instantly share code, notes, and snippets.

@neisdev

neisdev/customers-table-w-horizontal-scroll-tailwind-css.markdown

Created February 20, 2023 21:49
Show Gist options
  • Save neisdev/78d2ddda56560b5484ecce84fdd50b81 to your computer and use it in GitHub Desktop.
Save neisdev/78d2ddda56560b5484ecce84fdd50b81 to your computer and use it in GitHub Desktop.
Download ZIP
Customers Table w/ horizontal scroll - Tailwind CSS
Raw
customers-table-w-horizontal-scroll-tailwind-css.markdown

Customers Table w/ horizontal scroll - Tailwind CSS

A responsive table with horizontal scroll showing customers made with Tailwind CSS.

A Pen by Cruip on CodePen.

License.

Raw
index.html
<!--
Include Tailwind JIT CDN compiler
More info: https://beyondco.de/blog/tailwind-jit-compiler-via-cdn
-->
<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
<!-- Snippet -->
<section class="flex flex-col justify-center antialiased bg-gray-100 text-gray-600 min-h-screen p-4">
<div class="h-full">
<!-- Table -->
<div class="w-full max-w-2xl mx-auto bg-white shadow-lg rounded-sm border border-gray-200">
<header class="px-5 py-4 border-b border-gray-100">
<h2 class="font-semibold text-gray-800">Customers</h2>
</header>
<div class="p-3">
<div class="overflow-x-auto">
<table class="table-auto w-full">
<thead class="text-xs font-semibold uppercase text-gray-400 bg-gray-50">
<tr>
<th class="p-2 whitespace-nowrap">
<div class="font-semibold text-left">Name</div>
</th>
<th class="p-2 whitespace-nowrap">
<div class="font-semibold text-left">Email</div>
</th>
<th class="p-2 whitespace-nowrap">
<div class="font-semibold text-left">Spent</div>
</th>
<th class="p-2 whitespace-nowrap">
<div class="font-semibold text-center">Country</div>
</th>
</tr>
</thead>
<tbody class="text-sm divide-y divide-gray-100">
<tr>
<td class="p-2 whitespace-nowrap">
<div class="flex items-center">
<div class="w-10 h-10 flex-shrink-0 mr-2 sm:mr-3"><img class="rounded-full" src="https://raw.githubusercontent.com/cruip/vuejs-admin-dashboard-template/main/src/images/user-36-05.jpg" width="40" height="40" alt="Alex Shatov"></div>
<div class="font-medium text-gray-800">Alex Shatov</div>
</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-left">[email protected]</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-left font-medium text-green-500">$2,890.66</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-lg text-center">🇺🇸</div>
</td>
</tr>
<tr>
<td class="p-2 whitespace-nowrap">
<div class="flex items-center">
<div class="w-10 h-10 flex-shrink-0 mr-2 sm:mr-3"><img class="rounded-full" src="https://raw.githubusercontent.com/cruip/vuejs-admin-dashboard-template/main/src/images/user-36-06.jpg" width="40" height="40" alt="Philip Harbach"></div>
<div class="font-medium text-gray-800">Philip Harbach</div>
</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-left">[email protected]</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-left font-medium text-green-500">$2,767.04</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-lg text-center">🇩🇪</div>
</td>
</tr>
<tr>
<td class="p-2 whitespace-nowrap">
<div class="flex items-center">
<div class="w-10 h-10 flex-shrink-0 mr-2 sm:mr-3"><img class="rounded-full" src="https://raw.githubusercontent.com/cruip/vuejs-admin-dashboard-template/main/src/images/user-36-07.jpg" width="40" height="40" alt="Mirko Fisuk"></div>
<div class="font-medium text-gray-800">Mirko Fisuk</div>
</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-left">[email protected]</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-left font-medium text-green-500">$2,996.00</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-lg text-center">🇫🇷</div>
</td>
</tr>
<tr>
<td class="p-2 whitespace-nowrap">
<div class="flex items-center">
<div class="w-10 h-10 flex-shrink-0 mr-2 sm:mr-3"><img class="rounded-full" src="https://raw.githubusercontent.com/cruip/vuejs-admin-dashboard-template/main/src/images/user-36-08.jpg" width="40" height="40" alt="Olga Semklo"></div>
<div class="font-medium text-gray-800">Olga Semklo</div>
</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-left">[email protected]</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-left font-medium text-green-500">$1,220.66</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-lg text-center">🇮🇹</div>
</td>
</tr>
<tr>
<td class="p-2 whitespace-nowrap">
<div class="flex items-center">
<div class="w-10 h-10 flex-shrink-0 mr-2 sm:mr-3"><img class="rounded-full" src="https://raw.githubusercontent.com/cruip/vuejs-admin-dashboard-template/main/src/images/user-36-09.jpg" width="40" height="40" alt="Burak Long"></div>
<div class="font-medium text-gray-800">Burak Long</div>
</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-left">[email protected]</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-left font-medium text-green-500">$1,890.66</div>
</td>
<td class="p-2 whitespace-nowrap">
<div class="text-lg text-center">🇬🇧</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<!-- More components -->
<div x-show="open" class="fixed bottom-0 right-0 w-full md:bottom-8 md:right-12 md:w-auto z-60" x-data="{ open: true }">
<div class="bg-gray-800 text-gray-50 text-sm p-3 md:rounded shadow-lg flex justify-between">
<div>👉 <a class="hover:underline ml-1" href="https://cruip.com/?ref=codepen-cruip-customers-table" target="_blank">More components on Cruip.com</a></div>
<button class="text-gray-500 hover:text-gray-400 ml-5" @click="open = false">
<span class="sr-only">Close</span>
<svg class="w-4 h-4 flex-shrink-0 fill-current" viewBox="0 0 16 16">
<path d="M12.72 3.293a1 1 0 00-1.415 0L8.012 6.586 4.72 3.293a1 1 0 00-1.414 1.414L6.598 8l-3.293 3.293a1 1 0 101.414 1.414l3.293-3.293 3.293 3.293a1 1 0 001.414-1.414L9.426 8l3.293-3.293a1 1 0 000-1.414z" />
</svg>
</button>
</div>
</div>
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.5.2/cdn.js"></script>
Raw
style.css
section {
font-family: 'Inter', sans-serif;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/inter-ui/3.19.3/inter.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment