{"componentChunkName":"component---src-templates-blog-js","path":"/blog/how-to-create-tailwind-css-tables/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares"}},"mdx":{"id":"6cf286b9-e723-5010-b17b-63ba3982bb95","excerpt":"Tailwind CSS Table Tables are an essential part of web design, especially when displaying structured data. With Tailwind CSS, you can create responsive, modern…","body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"How to Create Tailwind CSS Table-Comprehensive Guide with Templates & Examples\",\n  \"lastUpdated\": \"13 May 2024\",\n  \"date\": \"2021-01-10T02:16:04+01:00\",\n  \"metaTitle\": \"Tailwind CSS Table\",\n  \"metaDescription\": \"Learn how to create stunning, responsive tables using Tailwind CSS. This comprehensive guide covers templates, borders, design tips, and more.\",\n  \"type\": \"blog\",\n  \"author\": \"Emmanuel Chinonso\",\n  \"role\": \"Technical Writer\",\n  \"authorImage\": \"/blog/author/author_emmanuel.jpg\",\n  \"image\": \"./_/images/how-to-create-tailwind-css-tables.png\",\n  \"tags\": [\"tailwind css\", \"tailwind\", \"tailwind css tables\"],\n  \"previousTitle\": \"How to create Tailwind CSS Modal:A Step-by-Step Guide\",\n  \"previousPath\": \"how-to-create-tailwind-css-modal\",\n  \"nextTitle\": \"How to install Tailwind CSS with Laravel.\",\n  \"nextPath\": \"how-to-install-tailwind-css-in-laravel\",\n  \"blogtype\": \"tailwindcss\",\n  \"canonicalUrl\": \"https://windframe.dev/blog/how-to-create-tailwind-css-tables\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Tailwind CSS Table\"), mdx(\"p\", null, \"Tables are an essential part of web design, especially when displaying structured data. With Tailwind CSS, you can create responsive, modern, and visually appealing tables with ease. In this guide, we will walk you through the process of creating Tailwind CSS tables, covering everything from basic setup to advanced customization. We will also explore different Tailwind CSS table templates, border styles, and how to design Tailwind tables that fit your specific needs.\"), mdx(\"h2\", null, \"Table of Content\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Why Use Tailwind CSS for Tables?\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Setting Up The Project\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Building the Tailwind CSS table example\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Conclusion\")), mdx(\"h2\", null, \"Why Use Tailwind CSS for Tables?\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"em\", {\n    parentName: \"strong\"\n  }, \"Ease of Use:\")), \" Tailwind CSS offers utility classes that make styling tables intuitive and straightforward.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"em\", {\n    parentName: \"strong\"\n  }, \"Responsiveness:\")), \" Tailwind\\u2019s responsive design capabilities ensure your tables look great on any device.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"em\", {\n    parentName: \"strong\"\n  }, \"Consistency:\")), \" Utility classes help maintain consistent design patterns across your web application.\")), mdx(\"p\", null, \"Let's start with creating a basic table using Tailwind CSS. Here\\u2019s how you can set up a simple table:\"), mdx(\"h2\", null, \"Setting Up The Project\"), mdx(\"p\", null, \"Before diving into Creating Tailwind table, we have to set up tailwind css on our project and we can do this either by including tailwind css CDN or by installing it using npm/yarn.\"), mdx(\"h3\", null, \"Installing Tailwind via CDN\"), mdx(\"p\", null, \"Using a CDN to install Tailwind CSS is the quickest way to get started with this powerful framework. It's ideal for small projects or when you want to prototype without setting up a more complex development environment. It is ideal for only development and not for production. Simply include the CDN link on the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<head>\"), \" tag on your file, and you're ready to go.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<head>\\n  <meta charset=\\\"UTF-8\\\">\\n  <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n  <script src=\\\"https://cdn.tailwindcss.com\\\"></script>\\n</head>\\n\\n\")), mdx(\"p\", null, \"To understand how to install Tailwind via Npm/yarn, check out our article \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/e6ea99306a20956ec5948443ba2f63aa/setting-up-your-first-project-using-tailwind-css.md\"\n  }, \"here\"), \".\"), mdx(\"h2\", null, \"Building the Tailwind CSS table example\"), mdx(\"p\", null, \"After the installation of tailwind CSS, we can nowh build the Tailwind table.\"), mdx(\"h2\", null, \"Basic Tailwind Table\"), mdx(\"p\", null, \"This table uses alternating row colors for readability.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"overflow-x-auto m-10 rounded-md\\\">\\n    <table class=\\\"min-w-full bg-white border border-gray-300\\\">\\n        <thead class=\\\"bg-gray-200\\\">\\n            <tr>\\n                <th class=\\\"px-4 py-2 text-left\\\">Name</th>\\n                <th class=\\\"px-4 py-2 text-left\\\">Email</th>\\n                <th class=\\\"px-4 py-2 text-left\\\">Role</th>\\n            </tr>\\n        </thead>\\n        <tbody>\\n            <tr class=\\\"bg-gray-100\\\">\\n                <td class=\\\"border px-4 py-2\\\">John Doe</td>\\n                <td class=\\\"border px-4 py-2\\\">john@example.com</td>\\n                <td class=\\\"border px-4 py-2\\\">Admin</td>\\n            </tr>\\n            <tr>\\n                <td class=\\\"border px-4 py-2\\\">Jane Smith</td>\\n                <td class=\\\"border px-4 py-2\\\">jane@example.com</td>\\n                <td class=\\\"border px-4 py-2\\\">Editor</td>\\n            </tr>\\n            <tr class=\\\"bg-gray-100\\\">\\n                <td class=\\\"border px-4 py-2\\\">Sam Brown</td>\\n                <td class=\\\"border px-4 py-2\\\">sam@example.com</td>\\n                <td class=\\\"border px-4 py-2\\\">User</td>\\n            </tr>\\n            <tr>\\n                <td class=\\\"border px-4 py-2\\\">Paul Atrides</td>\\n                <td class=\\\"border px-4 py-2\\\">Atrides@example.com</td>\\n                <td class=\\\"border px-4 py-2\\\">User</td>\\n            </tr>\\n        </tbody>\\n    </table>\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"overflow-x-auto m-10 rounded-md border-2 font-sans font-normal\"\n  }, mdx(\"table\", {\n    noTheme: true,\n    className: \"min-w-full bg-white border border-gray-100 \"\n  }, mdx(\"thead\", {\n    className: \"bg-gray-50\"\n  }, mdx(\"tr\", null, mdx(\"th\", {\n    className: \"px-4 py-2 text-left\"\n  }, \"Name\"), mdx(\"th\", {\n    className: \"px-4 py-2 text-left\"\n  }, \"Email\"), mdx(\"th\", {\n    className: \"px-4 py-2 text-left\"\n  }, \"Role\"))), mdx(\"tbody\", null, mdx(\"tr\", {\n    className: \"bg-gray-100 font-sans\"\n  }, mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"John Doe\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"john@example.com\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"Admin\")), mdx(\"tr\", null, mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"Jane Smith\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"jane@example.com\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"Editor\")), mdx(\"tr\", {\n    className: \"bg-gray-100\"\n  }, mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"Sam Brown\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"sam@example.com\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"User\")), mdx(\"tr\", null, mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"Paul Atrides\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"Atrides@example.com\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"User\"))))), mdx(\"h2\", null, \"Hoverable Table\"), mdx(\"p\", null, \"This table highlights rows when hovered, ideal for interactive UI.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"overflow-x-auto m-10 rounded-md\\\">\\n    <table class=\\\"min-w-full bg-white border border-gray-300\\\">\\n        <thead class=\\\"bg-indigo-500 text-white\\\">\\n            <tr>\\n                <th class=\\\"border px-4 py-2\\\">Product</th>\\n                <th class=\\\"border px-4 py-2\\\">Price</th>\\n                <th class=\\\"border px-4 py-2\\\">Stock</th>\\n            </tr>\\n        </thead>\\n        <tbody>\\n            <tr class=\\\"hover:bg-indigo-50\\\">\\n                <td class=\\\"border px-4 py-2\\\">Laptop</td>\\n                <td class=\\\"border px-4 py-2\\\">$1200</td>\\n                <td class=\\\"border px-4 py-2\\\">In Stock</td>\\n            </tr>\\n            <tr class=\\\"hover:bg-indigo-50\\\">\\n                <td class=\\\"border px-4 py-2\\\">Smartphone</td>\\n                <td class=\\\"border px-4 py-2\\\">$800</td>\\n                <td class=\\\"border px-4 py-2\\\">Out of Stock</td>\\n            </tr>\\n            <tr class=\\\"hover:bg-indigo-50\\\">\\n                <td class=\\\"border px-4 py-2\\\">Headphones</td>\\n                <td class=\\\"border px-4 py-2\\\">$200</td>\\n                <td class=\\\"border px-4 py-2\\\">In Stock</td>\\n            </tr>\\n        </tbody>\\n    </table>\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"overflow-x-auto m-10 rounded-md\"\n  }, mdx(\"table\", {\n    noTheme: true,\n    className: \"min-w-full bg-white border border-gray-300\"\n  }, mdx(\"thead\", {\n    className: \"bg-indigo-500 text-white\"\n  }, mdx(\"tr\", null, mdx(\"th\", {\n    className: \"border px-4 py-2\"\n  }, \"Product\"), mdx(\"th\", {\n    className: \"border px-4 py-2\"\n  }, \"Price\"), mdx(\"th\", {\n    className: \"border px-4 py-2\"\n  }, \"Stock\"))), mdx(\"tbody\", null, mdx(\"tr\", {\n    className: \"hover:bg-indigo-50\"\n  }, mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"Laptop\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"$1200\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"In Stock\")), mdx(\"tr\", {\n    className: \"hover:bg-indigo-50\"\n  }, mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"Smartphone\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"$800\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"Out of Stock\")), mdx(\"tr\", {\n    className: \"hover:bg-indigo-50\"\n  }, mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"Headphones\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"$200\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"In Stock\"))))), mdx(\"h2\", null, \"Table with Pagination\"), mdx(\"p\", null, \"This table includes pagination controls at the bottom.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"overflow-x-auto m-10 rounded-md\\\">\\n    <table class=\\\"min-w-full bg-white border border-gray-300\\\">\\n        <thead class=\\\"bg-gray-200\\\">\\n            <tr>\\n                <th class=\\\"px-4 py-2 text-left\\\">Product</th>\\n                <th class=\\\"px-4 py-2 text-left\\\">Price</th>\\n                <th class=\\\"px-4 py-2 text-left\\\">Stock</th>\\n            </tr>\\n        </thead>\\n        <tbody>\\n            <tr class=\\\"bg-white\\\">\\n                <td class=\\\"border px-4 py-2\\\">Laptop</td>\\n                <td class=\\\"border px-4 py-2\\\">$1200</td>\\n                <td class=\\\"border px-4 py-2\\\">In Stock</td>\\n            </tr>\\n            <tr>\\n                <td class=\\\"border px-4 py-2\\\">Smartphone</td>\\n                <td class=\\\"border px-4 py-2\\\">$800</td>\\n                <td class=\\\"border px-4 py-2\\\">Out of Stock</td>\\n            </tr>\\n            <tr class=\\\"bg-white\\\">\\n                <td class=\\\"border px-4 py-2\\\">Headphones</td>\\n                <td class=\\\"border px-4 py-2\\\">$200</td>\\n                <td class=\\\"border px-4 py-2\\\">In Stock</td>\\n            </tr>\\n              <tr class=\\\"bg-white\\\">\\n                <td class=\\\"border px-4 py-2\\\">Wristwatches</td>\\n                <td class=\\\"border px-4 py-2\\\">$500</td>\\n                <td class=\\\"border px-4 py-2\\\">In Stock</td>\\n            </tr>\\n            <tr class=\\\"bg-white\\\">\\n                <td class=\\\"border px-4 py-2\\\">Louder Speakers</td>\\n                <td class=\\\"border px-4 py-2\\\">$1200</td>\\n                <td class=\\\"border px-4 py-2\\\">Out Stock</td>\\n            </tr>\\n        </tbody>\\n    </table>\\n\\n    <div class=\\\"flex justify-between items-center py-2\\\">\\n        <span class=\\\"text-sm text-gray-700\\\">Showing 1 to 5 of 30 entries</span>\\n        <div class=\\\"inline-flex mt-2\\\">\\n            <button class=\\\"px-3 py-1 bg-gray-200 border border-gray-300 rounded-l-md hover:bg-gray-300\\\">Previous</button>\\n            <button class=\\\"px-3 py-1 bg-gray-200 border border-gray-300 hover:bg-gray-300\\\">1</button>\\n            <button class=\\\"px-3 py-1 bg-gray-200 border border-gray-300 hover:bg-gray-300\\\">2</button>\\n            <button class=\\\"px-3 py-1 bg-gray-200 border border-gray-300 rounded-r-md hover:bg-gray-300\\\">Next</button>\\n        </div>\\n    </div>\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"overflow-x-auto m-10 rounded-md\"\n  }, mdx(\"table\", {\n    noTheme: true,\n    className: \"min-w-full bg-white border border-gray-300\"\n  }, mdx(\"thead\", {\n    className: \"bg-gray-200\"\n  }, mdx(\"tr\", null, mdx(\"th\", {\n    className: \"px-4 py-2 text-left\"\n  }, \"Product\"), mdx(\"th\", {\n    className: \"px-4 py-2 text-left\"\n  }, \"Price\"), mdx(\"th\", {\n    className: \"px-4 py-2 text-left\"\n  }, \"Stock\"))), mdx(\"tbody\", null, mdx(\"tr\", {\n    className: \"bg-white\"\n  }, mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"Laptop\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"$1200\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"In Stock\")), mdx(\"tr\", null, mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"Smartphone\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"$800\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"Out of Stock\")), mdx(\"tr\", {\n    className: \"bg-white\"\n  }, mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"Headphones\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"$200\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"In Stock\")), mdx(\"tr\", {\n    className: \"bg-white\"\n  }, mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"Wristwatches\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"$500\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"In Stock\")), mdx(\"tr\", {\n    className: \"bg-white\"\n  }, mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"Louder Speakers\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"$1200\"), mdx(\"td\", {\n    className: \"border px-4 py-2\"\n  }, \"Out Stock\")))), mdx(\"div\", {\n    className: \"flex justify-between items-center py-2\"\n  }, mdx(\"span\", {\n    className: \"text-sm text-gray-700\"\n  }, \"Showing 1 to 5 of 30 entries\"), mdx(\"div\", {\n    className: \"inline-flex mt-2\"\n  }, mdx(\"button\", {\n    className: \"px-3 py-1 bg-gray-200 border border-gray-300 rounded-l-md hover:bg-gray-300\"\n  }, \"Previous\"), mdx(\"button\", {\n    className: \"px-3 py-1 bg-gray-200 border border-gray-300 hover:bg-gray-300\"\n  }, \"1\"), mdx(\"button\", {\n    className: \"px-3 py-1 bg-gray-200 border border-gray-300 hover:bg-gray-300\"\n  }, \"2\"), mdx(\"button\", {\n    className: \"px-3 py-1 bg-gray-200 border border-gray-300 rounded-r-md hover:bg-gray-300\"\n  }, \"Next\")))), mdx(\"h2\", null, \"Table with Delete and Edit button.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"container flex justify-center mx-auto\\\">\\n  <div class=\\\"flex flex-col\\\">\\n    <div class=\\\"w-full\\\">\\n      <div class=\\\"border-b border-gray-200 shadow\\\">\\n        <table class=\\\"divide-y divide-green-400\\\">\\n          <thead class=\\\"bg-gray-50\\\">\\n            <tr>\\n              <th class=\\\"px-6 py-2 text-xs text-gray-500\\\">ID</th>\\n              <th class=\\\"px-6 py-2 text-xs text-gray-500\\\">Name</th>\\n              <th class=\\\"px-6 py-2 text-xs text-gray-500\\\">Email</th>\\n              <th class=\\\"px-6 py-2 text-xs text-gray-500\\\">Created_at</th>\\n              <th class=\\\"px-6 py-2 text-xs text-gray-500\\\">Edit</th>\\n              <th class=\\\"px-6 py-2 text-xs text-gray-500\\\">Delete</th>\\n            </tr>\\n          </thead>\\n          <tbody class=\\\"bg-white divide-y divide-gray-300\\\">\\n            <tr class=\\\"whitespace-nowrap\\\">\\n              <td class=\\\"px-6 py-4 text-sm text-gray-500\\\">1</td>\\n              <td class=\\\"px-6 py-4\\\">\\n                <div class=\\\"text-sm text-gray-900\\\">Adam joe</div>\\n              </td>\\n              <td class=\\\"px-6 py-4\\\">\\n                <div class=\\\"text-sm text-gray-500\\\">adamjoe@example.com</div>\\n              </td>\\n              <td class=\\\"px-6 py-4 text-sm text-gray-500\\\">2021-12-12</td>\\n              <td class=\\\"px-6 py-4\\\">\\n                <a href=\\\"#\\\">\\n                  <svg\\n                    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n                    class=\\\"w-6 h-6 text-blue-400\\\"\\n                    fill=\\\"none\\\"\\n                    viewBox=\\\"0 0 24 24\\\"\\n                    stroke=\\\"currentColor\\\"\\n                  >\\n                    <path\\n                      stroke-linecap=\\\"round\\\"\\n                      stroke-linejoin=\\\"round\\\"\\n                      stroke-width=\\\"2\\\"\\n                      d=\\\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 \\n                      2 0 112.828 \\n                      2.828L11.828 15H9v-2.828l8.586-8.586z\\\"\\n                    />\\n                  </svg>\\n                </a>\\n              </td>\\n              <td class=\\\"px-6 py-4\\\">\\n                <a href=\\\"#\\\">\\n                  <svg\\n                    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n                    class=\\\"w-6 h-6 text-red-400\\\"\\n                    fill=\\\"none\\\"\\n                    viewBox=\\\"0 0 24 24\\\"\\n                    stroke=\\\"currentColor\\\"\\n                  >\\n                    <path\\n                      stroke-linecap=\\\"round\\\"\\n                      stroke-linejoin=\\\"round\\\"\\n                      stroke-width=\\\"2\\\"\\n                      d=\\\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 \\n                      4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\\\"\\n                    />\\n                  </svg>\\n                </a>\\n              </td>\\n            </tr>\\n            <tr class=\\\"whitespace-nowrap\\\">\\n              <td class=\\\"px-6 py-4 text-sm text-gray-500\\\">2</td>\\n              <td class=\\\"px-6 py-4\\\">\\n                <div class=\\\"text-sm text-gray-900\\\">Jon doe</div>\\n              </td>\\n              <td class=\\\"px-6 py-4\\\">\\n                <div class=\\\"text-sm text-gray-500\\\">jhondoe@example.com</div>\\n              </td>\\n              <td class=\\\"px-6 py-4 text-sm text-gray-500\\\">2021-1-12</td>\\n              <td class=\\\"px-6 py-4\\\">\\n                <a href=\\\"#\\\">\\n                  <svg\\n                    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n                    class=\\\"w-6 h-6 text-blue-400\\\"\\n                    fill=\\\"none\\\"\\n                    viewBox=\\\"0 0 24 24\\\"\\n                    stroke=\\\"currentColor\\\"\\n                  >\\n                    <path\\n                      stroke-linecap=\\\"round\\\"\\n                      stroke-linejoin=\\\"round\\\"\\n                      stroke-width=\\\"2\\\"\\n                      d=\\\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 \\n                      2.828L11.828 15H9v-2.828l8.586-8.586z\\\"\\n                    />\\n                  </svg>\\n                </a>\\n              </td>\\n              <td class=\\\"px-6 py-4\\\">\\n                <a href=\\\"#\\\">\\n                  <svg\\n                    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n                    class=\\\"w-6 h-6 text-red-400\\\"\\n                    fill=\\\"none\\\"\\n                    viewBox=\\\"0 0 24 24\\\"\\n                    stroke=\\\"currentColor\\\"\\n                  >\\n                    <path\\n                      stroke-linecap=\\\"round\\\"\\n                      stroke-linejoin=\\\"round\\\"\\n                      stroke-width=\\\"2\\\"\\n                      d=\\\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 \\n                      4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\\\"\\n                    />\\n                  </svg>\\n                </a>\\n              </td>\\n            </tr>\\n            <tr class=\\\"whitespace-nowrap\\\">\\n              <td class=\\\"px-6 py-4 text-sm text-gray-500\\\">3</td>\\n              <td class=\\\"px-6 py-4\\\">\\n                <div class=\\\"text-sm text-gray-900\\\">Emily chan</div>\\n              </td>\\n              <td class=\\\"px-6 py-4\\\">\\n                <div class=\\\"text-sm text-gray-500\\\">emilychan@example.com</div>\\n              </td>\\n              <td class=\\\"px-6 py-4 text-sm text-gray-500\\\">2021-1-12</td>\\n              <td class=\\\"px-6 py-4\\\">\\n                <a href=\\\"#\\\">\\n                  <svg\\n                    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n                    class=\\\"w-6 h-6 text-blue-400\\\"\\n                    fill=\\\"none\\\"\\n                    viewBox=\\\"0 0 24 24\\\"\\n                    stroke=\\\"currentColor\\\"\\n                  >\\n                    <path\\n                      stroke-linecap=\\\"round\\\"\\n                      stroke-linejoin=\\\"round\\\"\\n                      stroke-width=\\\"2\\\"\\n                      d=\\\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 \\n                      112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\\\"\\n                    />\\n                  </svg>\\n                </a>\\n              </td>\\n              <td class=\\\"px-6 py-4\\\">\\n                <a href=\\\"#\\\">\\n                  <svg\\n                    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n                    class=\\\"w-6 h-6 text-red-400\\\"\\n                    fill=\\\"none\\\"\\n                    viewBox=\\\"0 0 24 24\\\"\\n                    stroke=\\\"currentColor\\\"\\n                  >\\n                    <path\\n                      stroke-linecap=\\\"round\\\"\\n                      stroke-linejoin=\\\"round\\\"\\n                      stroke-width=\\\"2\\\"\\n                      d=\\\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 \\n                      4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\\\"\\n                    />\\n                  </svg>\\n                </a>\\n              </td>\\n            </tr>\\n            <tr class=\\\"whitespace-nowrap\\\">\\n              <td class=\\\"px-6 py-4 text-sm text-gray-500\\\">4</td>\\n              <td class=\\\"px-6 py-4\\\">\\n                <div class=\\\"text-sm text-gray-900\\\">Susan coby</div>\\n              </td>\\n              <td class=\\\"px-6 py-4\\\">\\n                <div class=\\\"text-sm text-gray-500\\\">susancoby@example.com</div>\\n              </td>\\n              <td class=\\\"px-6 py-4 text-sm text-gray-500\\\">2021-1-12</td>\\n              <td class=\\\"px-6 py-4\\\">\\n                <a href=\\\"#\\\">\\n                  <svg\\n                    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n                    class=\\\"w-6 h-6 text-blue-400\\\"\\n                    fill=\\\"none\\\"\\n                    viewBox=\\\"0 0 24 24\\\"\\n                    stroke=\\\"currentColor\\\"\\n                  >\\n                    <path\\n                      stroke-linecap=\\\"round\\\"\\n                      stroke-linejoin=\\\"round\\\"\\n                      stroke-width=\\\"2\\\"\\n                      d=\\\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 \\n                      2.828L11.828 15H9v-2.828l8.586-8.586z\\\"\\n                    />\\n                  </svg>\\n                </a>\\n              </td>\\n              <td class=\\\"px-6 py-4\\\">\\n                <a href=\\\"#\\\">\\n                  <svg\\n                    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n                    class=\\\"w-6 h-6 text-red-400\\\"\\n                    fill=\\\"none\\\"\\n                    viewBox=\\\"0 0 24 24\\\"\\n                    stroke=\\\"currentColor\\\"\\n                  >\\n                    <path\\n                      stroke-linecap=\\\"round\\\"\\n                      stroke-linejoin=\\\"round\\\"\\n                      stroke-width=\\\"2\\\"\\n                      d=\\\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 \\n                      4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\\\"\\n                    />\\n                  </svg>\\n                </a>\\n              </td>\\n            </tr>\\n          </tbody>\\n        </table>\\n      </div>\\n    </div>\\n  </div>\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"827px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/942009191199c469fbd4698bd43542df/4e6ec/tailwind-css-table.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"42.857142857142854%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABNUlEQVQoz61R7U4DMQzb+78jEmgwbQJtd+t3m9Q4uR2aBD85KRc3bRy7PTQVHOOKS8t4W6/4yMHxpWccw4L3dPf1uSW8ct/iXInvN5x49uX2iTAa7Jtz4qBT0UVQR8d1XZFqRZOBJUaPNUWvdQ4OpTiuPP9V2dcaRggQEpFtI7SfDMFgxJiYh69zZnPKnlvrUFGUUh0P4pWESizsUSPEg1B1opPEIlBR7xuOJAspea5UIlSVSWi4c+BSFGIK2bMR4kkhJ1rDnZuVlkSVzVSYs0etDcqa5d677y91Qol1J9wt22K4ZSoM0YmMPNGqqbMoNoS1Z8sLLYuRp1+W1ada2B0aoVk2wl2hEVmt7JZ5LUuhiGqPEl3xH5bVCzbAsGW73y2ea9v1TL66Eclj/4cQ//TNx8N8A557wahKEhKEAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Tailwind css table with edit\",\n    \"title\": \"Tailwind css table with edit\",\n    \"src\": \"/static/942009191199c469fbd4698bd43542df/4e6ec/tailwind-css-table.png\",\n    \"srcSet\": [\"/static/942009191199c469fbd4698bd43542df/a2ead/tailwind-css-table.png 259w\", \"/static/942009191199c469fbd4698bd43542df/6b9fd/tailwind-css-table.png 518w\", \"/static/942009191199c469fbd4698bd43542df/4e6ec/tailwind-css-table.png 827w\"],\n    \"sizes\": \"(max-width: 827px) 100vw, 827px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"h2\", null, \"Tailwind CSS table with a search bar\"), mdx(\"p\", null, \"This is one of our tailwind table designs with a search bar for your application.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"container justify-center mx-auto flex flex-col\\\">\\n  <div class=\\\"overflow-x-auto shadow-md sm:rounded-lg\\\">\\n    <div class=\\\"inline-block min-w-full align-middle\\\">\\n      <div class=\\\"p-4\\\">\\n        <label for=\\\"table-search\\\" class=\\\"sr-only\\\">Search</label>\\n        <div class=\\\"relative mt-1\\\">\\n          <div class=\\\"flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none\\\">\\n            <svg\\n              class=\\\"w-5 h-5 text-gray-500\\\"\\n              fill=\\\"currentColor\\\"\\n              viewBox=\\\"0 0 20 20\\\"\\n              xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n            ><path\\n                fill-rule=\\\"evenodd\\\"\\n                d=\\\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\\\"\\n                clip-rule=\\\"evenodd\\\"\\n              ></path></svg>\\n          </div>\\n          <input\\n            type=\\\"text\\\"\\n            id=\\\"table-search\\\"\\n            class=\\\"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 pl-10 p-2.5\\\"\\n            placeholder=\\\"Search for items\\\"\\n          />\\n        </div>\\n      </div>\\n      <div class=\\\"overflow-hidden\\\">\\n        <table noTheme class=\\\"min-w-full table-fixed divide-y divide-green-400 \\\">\\n          <thead class=\\\"bg-gray-100\\\">\\n            <tr>\\n              <th scope=\\\"col\\\" class=\\\"p-4\\\">\\n                <div class=\\\"flex items-center\\\">\\n                  <input\\n                    id=\\\"checkbox-search-all\\\"\\n                    type=\\\"checkbox\\\"\\n                    class=\\\"w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 focus:ring-2\\\"\\n                  />\\n                  <label for=\\\"checkbox-search-all\\\" class=\\\"sr-only\\\">checkbox</label>\\n                </div>\\n              </th>\\n              <th\\n                scope=\\\"col\\\"\\n                class=\\\"py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase\\\"\\n              >\\n                Product Name\\n              </th>\\n              <th\\n                scope=\\\"col\\\"\\n                class=\\\"py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase\\\"\\n              >\\n                Category\\n              </th>\\n              <th\\n                scope=\\\"col\\\"\\n                class=\\\"py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase\\\"\\n              >\\n                Price\\n              </th>\\n              <th scope=\\\"col\\\" class=\\\"p-4\\\">\\n                <span class=\\\"sr-only\\\">Edit</span>\\n              </th>\\n            </tr>\\n          </thead>\\n          <tbody class=\\\"bg-white divide-y divide-gray-200\\\">\\n            <tr class=\\\"hover:bg-gray-100\\\">\\n              <td class=\\\"p-4 w-4\\\">\\n                <div class=\\\"flex items-center\\\">\\n                  <input\\n                    id=\\\"checkbox-search-1\\\"\\n                    type=\\\"checkbox\\\"\\n                    class=\\\"w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 focus:ring-2 \\\"\\n                  />\\n                  <label for=\\\"checkbox-search-1\\\" class=\\\"sr-only\\\">checkbox</label>\\n                </div>\\n              </td>\\n              <td\\n                class=\\\"py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap\\\"\\n              >\\n                HP Omen 45L\\\"\\n              </td>\\n              <td\\n                class=\\\"py-4 px-6 text-sm font-medium text-gray-500 whitespace-nowrap\\\"\\n              >\\n                Desktop PC\\n              </td>\\n              <td\\n                class=\\\"py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap\\\"\\n              >\\n                $1899\\n              </td>\\n              <td class=\\\"py-4 px-6 text-sm font-medium text-right whitespace-nowrap\\\">\\n                <a href=\\\"#\\\" class=\\\"text-blue-600 hover:underline\\\">Edit</a>\\n              </td>\\n            </tr>\\n            <tr class=\\\"hover:bg-gray-100\\\">\\n              <td class=\\\"p-4 w-4\\\">\\n                <div class=\\\"flex items-center\\\">\\n                  <input\\n                    id=\\\"checkbox-search-2\\\"\\n                    type=\\\"checkbox\\\"\\n                    class=\\\"w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 focus:ring-2\\\"\\n                  />\\n                  <label for=\\\"checkbox-search-2\\\" class=\\\"sr-only\\\">checkbox</label>\\n                </div>\\n              </td>\\n              <td\\n                class=\\\"py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap\\\"\\n              >\\n                Apple MacBook Pro 13\\n              </td>\\n              <td\\n                class=\\\"py-4 px-6 text-sm font-medium text-gray-500 whitespace-nowrap\\\"\\n              >\\n                Laptop\\n              </td>\\n              <td\\n                class=\\\"py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap\\\"\\n              >\\n                $2999\\n              </td>\\n              <td class=\\\"py-4 px-6 text-sm font-medium text-right whitespace-nowrap\\\">\\n                <a href=\\\"#\\\" class=\\\"text-blue-600 hover:underline\\\">Edit</a>\\n              </td>\\n            </tr>\\n            <tr class=\\\"hover:bg-gray-100\\\">\\n              <td class=\\\"p-4 w-4\\\">\\n                <div class=\\\"flex items-center\\\">\\n                  <input\\n                    id=\\\"checkbox-search-3\\\"\\n                    type=\\\"checkbox\\\"\\n                    class=\\\"w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500\\\"\\n                  />\\n                  <label for=\\\"checkbox-search-3\\\" class=\\\"sr-only\\\">checkbox</label>\\n                </div>\\n              </td>\\n              <td\\n                class=\\\"py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white\\\"\\n              >\\n                Samsung Galaxy S7\\n              </td>\\n              <td\\n                class=\\\"py-4 px-6 text-sm font-medium text-gray-500 whitespace-nowrap dark:text-white\\\"\\n              >\\n                Phone\\n              </td>\\n              <td\\n                class=\\\"py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap\\\"\\n              >\\n                $599\\n              </td>\\n              <td class=\\\"py-4 px-6 text-sm font-medium text-right whitespace-nowrap\\\">\\n                <a href=\\\"#\\\" class=\\\"text-blue-600 hover:underline\\\">Edit</a>\\n              </td>\\n            </tr>\\n            <tr class=\\\"hover:bg-gray-100\\\">\\n              <td class=\\\"p-4 w-4\\\">\\n                <div class=\\\"flex items-center\\\">\\n                  <input\\n                    id=\\\"checkbox-search-4\\\"\\n                    type=\\\"checkbox\\\"\\n                    class=\\\"w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 focus:ring-2\\\"\\n                  />\\n                  <label for=\\\"checkbox-search-4\\\" class=\\\"sr-only\\\">checkbox</label>\\n                </div>\\n              </td>\\n              <td\\n                class=\\\"py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap\\\"\\n              >\\n                Sony WF-1000XM4\\n              </td>\\n              <td\\n                class=\\\"py-4 px-6 text-sm font-medium text-gray-500 whitespace-nowrap\\\"\\n              >\\n                Headphones\\n              </td>\\n              <td\\n                class=\\\"py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap\\\"\\n              >\\n                $273\\n              </td>\\n              <td class=\\\"py-4 px-6 text-sm font-medium text-right whitespace-nowrap\\\">\\n                <a href=\\\"#\\\" class=\\\"text-blue-600 dark:text-blue-500 hover:underline\\\">Edit</a>\\n              </td>\\n            </tr>\\n            <tr class=\\\"hover:bg-gray-100\\\">\\n              <td class=\\\"p-4 w-4\\\">\\n                <div class=\\\"flex items-center\\\">\\n                  <input\\n                    id=\\\"checkbox-search-5\\\"\\n                    type=\\\"checkbox\\\"\\n                    class=\\\"w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 focus:ring-2\\\"\\n                  />\\n                  <label for=\\\"checkbox-search-5\\\" class=\\\"sr-only\\\">checkbox</label>\\n                </div>\\n              </td>\\n              <td\\n                class=\\\"py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white\\\"\\n              >\\n                Apple Watch Series 7\\n              </td>\\n              <td\\n                class=\\\"py-4 px-6 text-sm font-medium text-gray-500 whitespace-nowrap dark:text-white\\\"\\n              >\\n                Accessories\\n              </td>\\n              <td\\n                class=\\\"py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white\\\"\\n              >\\n                $599\\n              </td>\\n              <td class=\\\"py-4 px-6 text-sm font-medium text-right whitespace-nowrap\\\">\\n                <a href=\\\"#\\\" class=\\\"text-blue-600 hover:underline\\\">Edit</a>\\n              </td>\\n            </tr>\\n          </tbody>\\n        </table>\\n      </div>\\n    </div>\\n  </div>\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/73ff6ee80d997f6e576248422d5f3126/d1882/Tailwind-table-search.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"27.413127413127413%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAr0lEQVQY02WQWQ7DIAxEuf89+1GpCYGwmMVMMUlJ2iI9CWa8onyIMNYhRAJRRsoFpdRJyhmU8p+Wf+KEWivUEhweesUSPLYUoelC3i/v8LRmekNze9f3S+usMcAQQZVSoDcD7wMagNbaRI74Ak5PjkwoTK1TuYEyQ8noxlqEvjqLUbmbB9wRn1Ia90Nrc2W+xZWelz4FV73BeT+68RkwaEey/POX1huIzrd4KSgTvgE8mYf8ZdvP1QAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Tailwind css table search\",\n    \"title\": \"Tailwind css table search\",\n    \"src\": \"/static/73ff6ee80d997f6e576248422d5f3126/e3189/Tailwind-table-search.png\",\n    \"srcSet\": [\"/static/73ff6ee80d997f6e576248422d5f3126/a2ead/Tailwind-table-search.png 259w\", \"/static/73ff6ee80d997f6e576248422d5f3126/6b9fd/Tailwind-table-search.png 518w\", \"/static/73ff6ee80d997f6e576248422d5f3126/e3189/Tailwind-table-search.png 1035w\", \"/static/73ff6ee80d997f6e576248422d5f3126/44d59/Tailwind-table-search.png 1553w\", \"/static/73ff6ee80d997f6e576248422d5f3126/d1882/Tailwind-table-search.png 1562w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"h2\", null, \"Table with Users Profiles\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \" <div class=\\\"overflow-x-auto m-2 rounded-md border p-5\\\">\\n <h1 class=\\\"font-sans text-lg font-bold\\\">Users</h1>\\n     <div class=\\\"flex justify-between\\\">\\n    <p>A list of all the memebers of the company.</p>\\n    <button class=\\\"bg-indigo-500 rounded px-1 py-1 text-white font-sans font-bold border border-indigo-500\\\">Add User</button>\\n  </div>\\n    <table noTheme class=\\\"min-w-full bg-white border-gray-500\\\">\\n        <thead class=\\\"border-b bg-white\\\">\\n            <tr>\\n                <th class=\\\"px-4 py-2 text-left\\\">Name</th>\\n                <th class=\\\"px-4 py-2 text-left\\\">Title</th>\\n                <th class=\\\"px-4 py-2 text-left\\\">Status</th>\\n            </tr>\\n        </thead>\\n        <tbody>\\n            <tr class=\\\"bg-white\\\">\\n                <td class=\\\" px-4 py-2\\\">\\n                  <div class=\\\"flex\\\">\\n                  <img src=\\\"https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80\\\" class=\\\"h-12 w-12 rounded-full\\\"/>\\n                  <div>\\n                    <p class=\\\"ml-3 text-gray-600 font-medium\\\">Toney Banks</p>\\n                     <p class=\\\"ml-3 text-gray-500\\\">tonybanks@example.com</p>\\n                  </div> \\n                  </div>\\n                  </td>\\n                <td class=\\\"px-4 py-2\\\"><h2 class=\\\"text-gray-600 font-sans font-medium\\\">DevOps\\n                  </h2>\\n                  <p class=\\\"text-gray-500\\\">Development</p></td>\\n                <td class=\\\"px-4 py-2\\\">\\n                  <button class=\\\"bg-green-100 rounded-md px-2 py-1 text-green-500 font-semibold text-sm\\\">Active</button></td>\\n                <td class=\\\"hover:text-indigo-700 text-indigo-400 hover:cursor-pointer\\\">Edit</td>\\n            </tr>\\n            <tr class=\\\"border-t bg-white\\\">\\n                <td class=\\\" px-4 py-2\\\">\\n                    <div class=\\\"flex\\\">\\n                  <img src=\\\"https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80\\\" class=\\\"h-12 w-12 rounded-full\\\"/>\\n                  <div>\\n                    <p class=\\\"ml-3 text-gray-600 font-medium\\\">Mary Spencer</p>\\n                     <p class=\\\"ml-3 text-gray-500\\\">Maryspenser@example.com</p>\\n                  </div> \\n                  </div>\\n                </td>\\n                <td class=\\\"px-4 py-2\\\"><h2 class=\\\"text-gray-600 font-sans font-medium\\\">Software Engineer\\n                  </h2>\\n                  <p class=\\\"text-gray-500\\\">Development</p></td>\\n                <td class=\\\"px-4 py-2\\\">\\n                  <button class=\\\"bg-green-100 rounded-md px-2 py-1 text-green-500 font-semibold text-sm\\\">Active</button></td>\\n                <td class=\\\"hover:text-indigo-700 text-indigo-400 hover:cursor-pointer\\\">Edit</td>\\n            </tr>\\n            <tr class=\\\"bg-white border-t\\\">\\n                <td class=\\\"px-4 py-2\\\">\\n                    <div class=\\\"flex\\\">\\n                  <img src=\\\"https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=256&h=256&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\\\" class=\\\"h-12 w-12 rounded-full\\\"/>\\n                  <div>\\n                    <p class=\\\"ml-3 text-gray-600 font-medium\\\">Mia Diaz</p>\\n                     <p class=\\\"ml-3 text-gray-500\\\">DiazMia@example.com</p>\\n                  </div> \\n                  </div>\\n                </td>\\n                <td class=\\\"px-4 py-2\\\"><h2 class=\\\"text-gray-600 font-sans font-medium\\\">Copywriter\\n                  </h2>\\n                  <p class=\\\"text-gray-500\\\">Program</p></td>\\n                <td class=\\\"px-4 py-2\\\">\\n                  <button class=\\\"bg-green-100 rounded-md px-2 py-1 text-green-500 font-bold text-sm\\\">Active</button></td>\\n                <td class=\\\"hover:text-indigo-700 text-indigo-400 hover:cursor-pointer\\\">Edit</td>\\n            </tr>\\n              <tr class=\\\"bg-white border-t\\\">\\n                <td class=\\\"px-4 py-2\\\">\\n                    <div class=\\\"flex\\\">\\n                  <img src=\\\"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=256&h=256&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\\\" class=\\\"h-12 w-12 rounded-full\\\"/>\\n                  <div>\\n                    <p class=\\\"ml-3 text-gray-600 font-medium\\\">Henry Donny</p>\\n                     <p class=\\\"ml-3 text-gray-500\\\">henryDonny@example.com</p>\\n                  </div> \\n                  </div>\\n                </td>\\n                <td class=\\\"px-4 py-2\\\"><h2 class=\\\"text-gray-600 font-sans font-medium\\\">Marketing\\n                  </h2>\\n                  <p class=\\\"text-gray-500\\\">Content Manager</p></td>\\n                <td class=\\\"px-4 py-2\\\">\\n                  <button class=\\\"bg-green-100 rounded-md px-2 py-1 text-green-500 font-bold text-sm\\\">Active</button></td>\\n                <td class=\\\"hover:text-indigo-700 text-indigo-400 hover:cursor-pointer\\\">Edit</td>\\n            </tr>\\n            <tr class=\\\"bg-white border-t\\\">\\n                <td class=\\\"px-4 py-2\\\">\\n                    <div class=\\\"flex\\\">\\n                  <img src=\\\"https://images.unsplash.com/photo-1531256456869-ce942a665e80?q=80&w=256&h=256&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\\\" class=\\\"h-12 w-12 rounded-full\\\"/>\\n                  <div>\\n                    <p class=\\\"ml-3 text-gray-600 font-medium\\\">Sophia Cobly</p>\\n                     <p class=\\\"ml-3 text-gray-500\\\">coblysophia@example.com</p>\\n                  </div> \\n                  </div>\\n                </td>\\n                <td class=\\\" px-4 py-2\\\"><h2 class=\\\"text-gray-600 font-sans font-medium\\\">Designer\\n                  </h2>\\n                  <p class=\\\"text-gray-500\\\">UX/UI</p></td>\\n                <td class=\\\"px-4 py-2\\\">\\n                  <button class=\\\"bg-green-100 rounded-md px-2 py-1 text-green-500 font-bold text-sm\\\">Active</button></td>\\n                <td class=\\\"hover:text-indigo-700 text-indigo-400 hover:cursor-pointer\\\">Edit</td>\\n            </tr>\\n        </tbody>\\n    </table>\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    \"className\": \"overflow-x-auto m-2 rounded-md border p-5\"\n  }, \"\\n \", mdx(\"h1\", {\n    parentName: \"div\",\n    \"className\": \"font-sans text-lg font-bold\"\n  }, \"Users\"), \"\\n     \", mdx(\"div\", {\n    parentName: \"div\",\n    \"className\": \"flex justify-between\"\n  }, \"\\n    \", mdx(\"p\", {\n    parentName: \"div\"\n  }, \"A list of all the memebers of the company.\"), \"\\n    \", mdx(\"button\", {\n    parentName: \"div\",\n    \"className\": \"bg-indigo-500 rounded px-1 py-1 h-[40px] text-white font-sans font-bold border border-indigo-500\"\n  }, \"Add User\"), \"\\n  \"), \"\\n    \", mdx(\"table\", {\n    parentName: \"div\",\n    \"notheme\": \"\",\n    \"className\": \"min-w-full border-gray-500\"\n  }, \"\\n        \", mdx(\"thead\", {\n    parentName: \"table\",\n    \"className\": \"border-b\"\n  }, \"\\n            \", mdx(\"tr\", {\n    parentName: \"thead\"\n  }, \"\\n                \", mdx(\"th\", {\n    parentName: \"tr\",\n    \"className\": \"px-4 py-2 text-left bg-white\"\n  }, \"Name\"), \"\\n                \", mdx(\"th\", {\n    parentName: \"tr\",\n    \"className\": \"px-4 py-2 text-left bg-white\"\n  }, \"Title\"), \"\\n                \", mdx(\"th\", {\n    parentName: \"tr\",\n    \"className\": \"px-4 py-2 text-left bg-white\"\n  }, \"Status\"), \"\\n            \"), \"\\n        \"), \"\\n        \", mdx(\"tbody\", {\n    parentName: \"table\"\n  }, \"\\n            \", mdx(\"tr\", {\n    parentName: \"tbody\",\n    \"className\": \"bg-white\"\n  }, \"\\n                \", mdx(\"td\", {\n    parentName: \"tr\",\n    \"className\": \"px-4 py-2 font-sans\"\n  }, \"\\n                  \", mdx(\"div\", {\n    parentName: \"td\",\n    \"className\": \"flex\"\n  }, \"\\n                  \", mdx(\"img\", {\n    parentName: \"div\",\n    \"src\": \"https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80\",\n    \"className\": \"h-12 w-12 rounded-full\"\n  }), \"\\n                  \", mdx(\"div\", {\n    parentName: \"div\"\n  }, \"\\n                    \", mdx(\"p\", {\n    parentName: \"div\",\n    \"className\": \"ml-3 text-gray-600 font-medium\"\n  }, \"Toney Banks\"), \"\\n                     \", mdx(\"p\", {\n    parentName: \"div\",\n    \"className\": \"ml-3 text-gray-500\"\n  }, \"tonybanks@example.com\"), \"\\n                  \"), \" \\n                  \"), \"\\n                  \"), \"\\n                \", mdx(\"td\", {\n    parentName: \"tr\",\n    \"className\": \"px-4 py-2\"\n  }, mdx(\"h2\", {\n    parentName: \"td\",\n    \"className\": \"text-gray-600 font-sans font-medium\"\n  }, \"DevOps\\n                  \"), \"\\n                  \", mdx(\"p\", {\n    parentName: \"td\",\n    \"className\": \"text-gray-500\"\n  }, \"Development\")), \"\\n                \", mdx(\"td\", {\n    parentName: \"tr\",\n    \"className\": \"px-4 py-2\"\n  }, \"\\n                  \", mdx(\"button\", {\n    parentName: \"td\",\n    \"className\": \"bg-green-100 rounded-md px-2 py-1 text-green-500 font-semibold text-sm\"\n  }, \"Active\")), \"\\n                \", mdx(\"td\", {\n    parentName: \"tr\",\n    \"className\": \"hover:text-indigo-700 text-indigo-400 hover:cursor-pointer\"\n  }, \"Edit\"), \"\\n            \"), \"\\n            \", mdx(\"tr\", {\n    parentName: \"tbody\",\n    \"className\": \"border-t bg-white\"\n  }, \"\\n                \", mdx(\"td\", {\n    parentName: \"tr\",\n    \"className\": \"px-4 py-2\"\n  }, \"\\n                    \", mdx(\"div\", {\n    parentName: \"td\",\n    \"className\": \"flex\"\n  }, \"\\n                  \", mdx(\"img\", {\n    parentName: \"div\",\n    \"src\": \"https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80\",\n    \"className\": \"h-12 w-12 rounded-full\"\n  }), \"\\n                  \", mdx(\"div\", {\n    parentName: \"div\"\n  }, \"\\n                    \", mdx(\"p\", {\n    parentName: \"div\",\n    \"className\": \"ml-3 text-gray-600 font-medium\"\n  }, \"Mary Spencer\"), \"\\n                     \", mdx(\"p\", {\n    parentName: \"div\",\n    \"className\": \"ml-3 text-gray-500\"\n  }, \"Maryspenser@example.com\"), \"\\n                  \"), \" \\n                  \"), \"\\n                \"), \"\\n                \", mdx(\"td\", {\n    parentName: \"tr\",\n    \"className\": \"px-4 py-2\"\n  }, mdx(\"h2\", {\n    parentName: \"td\",\n    \"className\": \"text-gray-600 font-sans font-medium\"\n  }, \"Software Engineer\\n                  \"), \"\\n                  \", mdx(\"p\", {\n    parentName: \"td\",\n    \"className\": \"text-gray-500\"\n  }, \"Development\")), \"\\n                \", mdx(\"td\", {\n    parentName: \"tr\",\n    \"className\": \"px-4 py-2\"\n  }, \"\\n                  \", mdx(\"button\", {\n    parentName: \"td\",\n    \"className\": \"bg-green-100 rounded-md px-2 py-1 text-green-500 font-semibold text-sm\"\n  }, \"Active\")), \"\\n                \", mdx(\"td\", {\n    parentName: \"tr\",\n    \"className\": \"hover:text-indigo-700 text-indigo-400 hover:cursor-pointer\"\n  }, \"Edit\"), \"\\n            \"), \"\\n            \", mdx(\"tr\", {\n    parentName: \"tbody\",\n    \"className\": \"bg-white border-t\"\n  }, \"\\n                \", mdx(\"td\", {\n    parentName: \"tr\",\n    \"className\": \"px-4 py-2\"\n  }, \"\\n                    \", mdx(\"div\", {\n    parentName: \"td\",\n    \"className\": \"flex\"\n  }, \"\\n                  \", mdx(\"img\", {\n    parentName: \"div\",\n    \"src\": \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=256&h=256&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n    \"className\": \"h-12 w-12 rounded-full\"\n  }), \"\\n                  \", mdx(\"div\", {\n    parentName: \"div\"\n  }, \"\\n                    \", mdx(\"p\", {\n    parentName: \"div\",\n    \"className\": \"ml-3 text-gray-600 font-medium\"\n  }, \"Mia Diaz\"), \"\\n                     \", mdx(\"p\", {\n    parentName: \"div\",\n    \"className\": \"ml-3 text-gray-500\"\n  }, \"DiazMia@example.com\"), \"\\n                  \"), \" \\n                  \"), \"\\n                \"), \"\\n                \", mdx(\"td\", {\n    parentName: \"tr\",\n    \"className\": \"px-4 py-2\"\n  }, mdx(\"h2\", {\n    parentName: \"td\",\n    \"className\": \"text-gray-600 font-sans font-medium\"\n  }, \"Copywriter\\n                  \"), \"\\n                  \", mdx(\"p\", {\n    parentName: \"td\",\n    \"className\": \"text-gray-500\"\n  }, \"Program\")), \"\\n                \", mdx(\"td\", {\n    parentName: \"tr\",\n    \"className\": \"px-4 py-2\"\n  }, \"\\n                  \", mdx(\"button\", {\n    parentName: \"td\",\n    \"className\": \"bg-green-100 rounded-md px-2 py-1 text-green-500 font-bold text-sm\"\n  }, \"Active\")), \"\\n                \", mdx(\"td\", {\n    parentName: \"tr\",\n    \"className\": \"hover:text-indigo-700 text-indigo-400 hover:cursor-pointer\"\n  }, \"Edit\"), \"\\n            \"), \"\\n              \", mdx(\"tr\", {\n    parentName: \"tbody\",\n    \"className\": \"bg-white border-t\"\n  }, \"\\n                \", mdx(\"td\", {\n    parentName: \"tr\",\n    \"className\": \"px-4 py-2\"\n  }, \"\\n                    \", mdx(\"div\", {\n    parentName: \"td\",\n    \"className\": \"flex\"\n  }, \"\\n                  \", mdx(\"img\", {\n    parentName: \"div\",\n    \"src\": \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=256&h=256&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n    \"className\": \"h-12 w-12 rounded-full\"\n  }), \"\\n                  \", mdx(\"div\", {\n    parentName: \"div\"\n  }, \"\\n                    \", mdx(\"p\", {\n    parentName: \"div\",\n    \"className\": \"ml-3 text-gray-600 font-medium\"\n  }, \"Henry Donny\"), \"\\n                     \", mdx(\"p\", {\n    parentName: \"div\",\n    \"className\": \"ml-3 text-gray-500\"\n  }, \"henryDonny@example.com\"), \"\\n                  \"), \" \\n                  \"), \"\\n                \"), \"\\n                \", mdx(\"td\", {\n    parentName: \"tr\",\n    \"className\": \"px-4 py-2\"\n  }, mdx(\"h2\", {\n    parentName: \"td\",\n    \"className\": \"text-gray-600 font-sans font-medium\"\n  }, \"Marketing\\n                  \"), \"\\n                  \", mdx(\"p\", {\n    parentName: \"td\",\n    \"className\": \"text-gray-500\"\n  }, \"Content Manager\")), \"\\n                \", mdx(\"td\", {\n    parentName: \"tr\",\n    \"className\": \"px-4 py-2\"\n  }, \"\\n                  \", mdx(\"button\", {\n    parentName: \"td\",\n    \"className\": \"bg-green-100 rounded-md px-2 py-1 text-green-500 font-bold text-sm\"\n  }, \"Active\")), \"\\n                \", mdx(\"td\", {\n    parentName: \"tr\",\n    \"className\": \"hover:text-indigo-700 text-indigo-400 hover:cursor-pointer\"\n  }, \"Edit\"), \"\\n            \"), \"\\n            \", mdx(\"tr\", {\n    parentName: \"tbody\",\n    \"className\": \"bg-white border-t\"\n  }, \"\\n                \", mdx(\"td\", {\n    parentName: \"tr\",\n    \"className\": \"px-4 py-2\"\n  }, \"\\n                    \", mdx(\"div\", {\n    parentName: \"td\",\n    \"className\": \"flex\"\n  }, \"\\n                  \", mdx(\"img\", {\n    parentName: \"div\",\n    \"src\": \"https://images.unsplash.com/photo-1531256456869-ce942a665e80?q=80&w=256&h=256&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n    \"className\": \"h-12 w-12 rounded-full\"\n  }), \"\\n                  \", mdx(\"div\", {\n    parentName: \"div\"\n  }, \"\\n                    \", mdx(\"p\", {\n    parentName: \"div\",\n    \"className\": \"ml-3 text-gray-600 font-medium\"\n  }, \"Sophia Cobly\"), \"\\n                     \", mdx(\"p\", {\n    parentName: \"div\",\n    \"className\": \"ml-3 text-gray-500\"\n  }, \"coblysophia@example.com\"), \"\\n                  \"), \" \\n                  \"), \"\\n                \"), \"\\n                \", mdx(\"td\", {\n    parentName: \"tr\",\n    \"className\": \"px-4 py-2\"\n  }, mdx(\"h2\", {\n    parentName: \"td\",\n    \"className\": \"text-gray-600 font-sans font-medium\"\n  }, \"Designer\\n                  \"), \"\\n                  \", mdx(\"p\", {\n    parentName: \"td\",\n    \"className\": \"text-gray-500\"\n  }, \"UX/UI\")), \"\\n                \", mdx(\"td\", {\n    parentName: \"tr\",\n    \"className\": \"px-4 py-2\"\n  }, \"\\n                  \", mdx(\"button\", {\n    parentName: \"td\",\n    \"className\": \"bg-green-100 rounded-md px-2 py-1 text-green-500 font-bold text-sm\"\n  }, \"Active\")), \"\\n                \", mdx(\"td\", {\n    parentName: \"tr\",\n    \"className\": \"hover:text-indigo-700 text-indigo-400 hover:cursor-pointer\"\n  }, \"Edit\"), \"\\n            \"), \"\\n        \"), \"\\n    \")), mdx(\"h2\", null, \"Conclusion\"), mdx(\"p\", null, \"Creating a Tailwind CSS table is a simple yet powerful way to style tables in your web projects. By leveraging the utility classes provided by Tailwind CSS, you can achieve a visually appealing and responsive table without writing extensive CSS code. Remember to follow best practices for accessibility and responsiveness to provide an optimal user experience.\"), mdx(\"h2\", null, \"Resources\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://github.com/Bit-Han/Tailwind-pro\"\n  }, \"Link to the Github Code\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://v2.tailwindcss.com/docs/grid-template-columns\"\n  }, \"Link to the Tailwind CSS grid Docs\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://windframe.dev/\"\n  }, \"windframe\"))));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"How to Create Tailwind CSS Table-Comprehensive Guide with Templates & Examples","date":"January 10, 2021","image":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACTUlEQVQoz2O4c+vCg3uX16xasmTJgr+/v///83HetL4t27b2nL9is2yd19qtHmu2QJD76s3e67be+fDx089fV9+88123jeH13TN/3t9fNmfiykUz/3x++f///4XzZ2/fvP7Pv1/Zuw86rtwI1++2erPf+m0XX7059ezl9bfvQZrfvrj/++uLxXMnr1gy5/+vj////144Z+rmLRuBplx+9doTZi0Qea7d4rxy0/wr13/8+bPgyg2nlRsZXj6+8fPT8xULp2tqqIUG+T+8dn7Z4nnr164Eav7/71/VoZP2KzZ4wiwHuhyIwjfvArrCfc0Whrf3zv55d2/57F45GUlzOYFd09pnT5uwcT1Q81+g9hXXb9suXw90IVAn0P0+67Z5gt0PMYvh2bP7r1/eb6jOjwzxibHRXF6bPau/fdWKRf///wFq3n7nXuTm3bVHThXtP5q373DN4ZP1R0/VHDkZsGEHyOYvz6/9//qksbbK2dG+2N+yLic5MiLy6IFd//99///717orVzN3H6w4dKL0wPGsPYeK9x/L3nOo8tAJoBGJ2/cxnNy3cfHc6dYWllYWZjEBHo4O9nqGFsuXr3j79uXVSxfa9h60W7kJEmxAq1zBXgWh1WBn+/p4KslJKivKaqsraagqaakr62oo6+obTp+7cMmypcFLVrut3QoPc08wgoc/g46aspKcFBApyEgCSVVFWUU5SSc7h5jYzMSmZs+NOz1gwYOJGBJC3cVEBOWkxeWkxOSlJZTlZcTEhPLiwxeuXO4wd5kHOJxxIQCjQ4E/N5d/ogAAAABJRU5ErkJggg==","aspectRatio":1.7730496453900708,"src":"/static/04dd6f5e1a3344f364eeda7e743b3e4e/104b3/how-to-create-tailwind-css-tables.png","srcSet":"/static/04dd6f5e1a3344f364eeda7e743b3e4e/84249/how-to-create-tailwind-css-tables.png 250w,\n/static/04dd6f5e1a3344f364eeda7e743b3e4e/9d7e9/how-to-create-tailwind-css-tables.png 500w,\n/static/04dd6f5e1a3344f364eeda7e743b3e4e/104b3/how-to-create-tailwind-css-tables.png 960w","sizes":"(max-width: 960px) 100vw, 960px"}}},"imageExternal":null,"lastUpdated":"13 May 2024","author":"Emmanuel Chinonso","role":"Technical Writer","authorImage":"/blog/author/author_emmanuel.jpg","metaTitle":"Tailwind CSS Table","metaDescription":"Learn how to create stunning, responsive tables using Tailwind CSS. This comprehensive guide covers templates, borders, design tips, and more.","previousTitle":"How to create Tailwind CSS Modal:A Step-by-Step Guide","previousPath":"how-to-create-tailwind-css-modal","nextTitle":"How to install Tailwind CSS with Laravel.","nextPath":"how-to-install-tailwind-css-in-laravel","blogtype":"tailwindcss"},"fields":{"slug":"/how-to-create-tailwind-css-tables/"}},"previous":null,"next":null},"pageContext":{"id":"6cf286b9-e723-5010-b17b-63ba3982bb95"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3706406642","3706406642","4045616534","4045616534","956403285","956403285"]}