{"componentChunkName":"component---src-templates-blog-js","path":"/blog/tailwind-css-10-templates-and-themes/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares"}},"mdx":{"id":"8fa454f2-a794-508b-a125-b6e3c46d7242","excerpt":"Tailwind website templates Tailwind CSS is a highly customizable, low-level CSS framework that makes it easy to build fully responsive websites and web apps. It…","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\": \"10 tailwind CSS templates and themes\",\n  \"lastUpdated\": \"10 May 2024\",\n  \"date\": \"2021-01-10T02:16:04+01:00\",\n  \"metaTitle\": \"10 tailwind CSS webiste templates and themes\",\n  \"metaDescription\": \"Tailwind CSS templates and themes are pre-built website designs that are based on Tailwind CSS, allowing developers and designers to quickly create beautiful and functional websites.\",\n  \"type\": \"blog\",\n  \"author\": \"Emmanuel Chinonso\",\n  \"role\": \"Technical Writer\",\n  \"authorImage\": \"/blog/author/author_emmanuel.jpg\",\n  \"image\": \"./_/images/10-tailwind-css-templates-and-themes.png\",\n  \"tags\": [\"tailwind css\", \"bootstrap\", \"bootstrap 5 alpha\"],\n  \"previousTitle\": \"10 Awesome projects built with Tailwind CSS\",\n  \"previousPath\": \"awesome-10-projects-built-with-tailwind\",\n  \"nextTitle\": \"Tailwind animation-How to create Tailwind CSS Animation\",\n  \"nextPath\": \"create-animation-with-tailwind-css\",\n  \"blogtype\": \"tailwind\",\n  \"canonicalUrl\": \"https://windframe.dev/blog/tailwind-css-10-templates-and-themes\"\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 website templates\"), mdx(\"p\", null, \"Tailwind CSS is a highly customizable, low-level CSS framework that makes it easy to build fully responsive websites and web apps.\"), mdx(\"p\", null, \"It provides an efficient way to structure, design and style web designs without having to write any CSS code.\"), mdx(\"p\", null, \"Tailwind CSS templates and themes are pre-built website designs that are based on Tailwind CSS, allowing developers and designers to quickly create beautiful and functional websites.\"), mdx(\"p\", null, \"Tailwind CSS templates and themes come with a variety of features and components to make customizing your website easy. From page layouts and navigation bars to typography and color palettes, Tailwind CSS templates and themes provide everything you need to create a stunning website.\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation\"\n  }, \"Tailwind Starter kit\")))), mdx(\"p\", null, \"The first Tailwind CSS template and theme on our list is the Tailwind Starter kit. This Tailwind CSS theme is an open-source project with multiple HTML elements.\"), mdx(\"p\", null, \"It doesn\\u2019t change the already present code in Tailwind CSS. This makes it possible to have dynamic components and sections. It is compatible with ReactJS, Vue, and Angular.\\nSome of the features include\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"16 dynamic JavaScript components\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Over 100 fully coded CSS elements\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"4 pre-built pages\")), 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/d6ddf8879bcccf0b8cffdebe22e50b69/4f1dd/Tailwind-starter-kit.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\": \"46.33204633204633%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAB2UlEQVQoz4WRW28SYRCG+XP+BeOdXvQH6I0xxnhhUWOjQU00MaGHiFbbtAVEDVrTYq2FAq0IpWwVPCRl2bJQFrawZx4/SC9KPL3JczEzmZnMOz7DNOl2e9i2jeu6IziOS99z0Xse44GngjCrCyUspY7pOOjtFslCg+1Ug0yhyo1gBh8n1O/3f0NkabbhdmibiYv3uHzqCtpmGVdUFLWBVGkgz+T5PLHM2Nnp0YF/0nCmUFW1kcpNaGoYS3mqP3v4ryd4Edsd1vWPZSrzaXya1kFRVJR6g5pAbbZQD1vIB+oQw7SGDdK3NslcHVksMCdTuJE8gQdpFqM/6Jgucq5IelacrHs2Lc/Cch0c4ZvW0QVH6MLXAV3DEHlvOPSr4jFzc53NhRTziS1WsnXWCyp3phJMv6xyN2Lhc99XcENZYuFlZqNxDMM89m7U24GXh0afzmqZ5PM99hazrIkz43NvOX3mEv6rq6zcj+PzpAO8je/ktoqkPhWwxfcG7a7n4Z1gEIuXDxeU9h1ik1+Yi2fIT60RDYS4NXaNyLng/5/yN+nizU9ea3zI9eDIYiO4Q/jRDj6pWkPalylVZXYFkizi2j8Q9UpdISnJXHhY5E0yR218iWf+d7w6/5hfcoGK/AGeQHIAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Tailwind Starter\",\n    \"title\": \"Tailwind Starter\",\n    \"src\": \"/static/d6ddf8879bcccf0b8cffdebe22e50b69/e3189/Tailwind-starter-kit.png\",\n    \"srcSet\": [\"/static/d6ddf8879bcccf0b8cffdebe22e50b69/a2ead/Tailwind-starter-kit.png 259w\", \"/static/d6ddf8879bcccf0b8cffdebe22e50b69/6b9fd/Tailwind-starter-kit.png 518w\", \"/static/d6ddf8879bcccf0b8cffdebe22e50b69/e3189/Tailwind-starter-kit.png 1035w\", \"/static/d6ddf8879bcccf0b8cffdebe22e50b69/44d59/Tailwind-starter-kit.png 1553w\", \"/static/d6ddf8879bcccf0b8cffdebe22e50b69/4f1dd/Tailwind-starter-kit.png 1567w\"],\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(\"ol\", {\n    \"start\": 2\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://blocks.wickedtemplates.com/\"\n  }, \"Wickedblocks UI\")))), mdx(\"p\", null, \"Wickedblocks UI is a collection of more than 100 layout blocks and components built with Tailwind CSS. On the website, you can choose any kind of block layout you want with cool components and Tailwind templates for your project. These Tailwind webiste template and theme is a good collection to have in your kit. You can even test some of the blocks and components there on the website and when you are okay with what you have built you simply copy it to your project and use it.\\nSome of the components, sections, templates, and blocks you can use include\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Headers\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Pricing\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Cards\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Page section\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Clients\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Modals\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Forms\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Navigation\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Footers\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Feedback\\nEtc.\")), 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/25ac5441c13bd9afa1aa8219853486dd/efeb1/wickedblocks-UI.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\": \"45.173745173745175%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABq0lEQVQoz11Ry27aQBT1F7RSsD0P2xSPi01sA7ETRd101UVWWXVRsWkWrFiyQtBI9E/6E/xB+gHs+QnSSkkqRZzcO8E0wtLRPXNm7rkPO0opSCkxPBuiPq+hAw2tWRNWV4qh9lzBly488R56r2utLVzXxVlVw5F8IelhS8JrCWgZ0TmA0hR1CEFGUgibLJQPIwrUxVeY3hAf2hE6cYx2uw1Bb2JjyJAStNKo8ktUxScUpxWhRtm/xGl5geRjiigKyVDDUycYeF/w7eoXqs/XKPIMVX2Obrf7WpBMXw2p5f6gxGDQR1kWyLIUSWKQmJhiQobRYWShPLTcdxC+B/lmFU10GhLHBp1OB2ZvwNX47hi8Hu62MZHyv9nBsOkyCAKLMAwR0pgH/gbHGhdnrfFxDC2SoUn0fd92xtFWpSLMG/CdPtI8z7OGvBqe0MmyDL1eD5PJBD+XS8znc9ze/sB0OsV4PMZisThgNpvh+83N/jy3WFLOaDSyTaVpCof/UJ7n2Gw24O/x6R92FLfbLdbrtdUeHh6x2+0s/313Z+PTM3D/56/lq9XKTsTNvQAZQSll5WOhAgAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"wickedblocks\",\n    \"title\": \"wickedblocks\",\n    \"src\": \"/static/25ac5441c13bd9afa1aa8219853486dd/e3189/wickedblocks-UI.png\",\n    \"srcSet\": [\"/static/25ac5441c13bd9afa1aa8219853486dd/a2ead/wickedblocks-UI.png 259w\", \"/static/25ac5441c13bd9afa1aa8219853486dd/6b9fd/wickedblocks-UI.png 518w\", \"/static/25ac5441c13bd9afa1aa8219853486dd/e3189/wickedblocks-UI.png 1035w\", \"/static/25ac5441c13bd9afa1aa8219853486dd/44d59/wickedblocks-UI.png 1553w\", \"/static/25ac5441c13bd9afa1aa8219853486dd/efeb1/wickedblocks-UI.png 1593w\"],\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(\"ol\", {\n    \"start\": 3\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://treact.owaiskhan.me/\"\n  }, \"Treact\")))), mdx(\"p\", null, \"If you are looking for an easily customizable React UI Template designed with Tailwind CSS search no more as Treact provides this service well.\\nThese Tailwind CSS templates and themes are fully responsive for all devices.\\nIt has an easily customizable brand of colors for both personal and commercial use.\"), mdx(\"p\", null, \"Some of the components include\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Hero Section\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Pricing section\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Features sections\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Cards\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Blog sections\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Testimonial Section\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"FAQs Section\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Forms Section\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"CTA sections\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Footer section\\nEtc.\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, 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/9df9549e134ca61d590c5a66f8b942d7/ddc6c/Treact.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\": \"46.33204633204633%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAB7klEQVQoz12S20/UQBTG+7/zanww0VejxAgJyKLAg4G9cFHUkhiIykJkWbq33rbstNPbTPfntBJifPjl9DSn35z5vlqzO83gd0yUStJCIwv1SFoamqoRWUEUp4g0Z2GoeyFzkjLH3tFsrWj6XzRWoTJQETr/i2rqHJVFZCKgkOZdEf+D+K+PqSoBCEqdYXlewtUPj2tD/8Llph9wee4yujOCZUmhVVNzpVHLJaqqKA11X1bLBrXEiC2bW1mTcUx3Z/DIt96I07aDfTTm8sLn4swlThWhSBhOPBw3YOSGzIVkXD9PZ9w4Ds7Ua6yxal8GjtlwMOV27DF84GY4wwsSwnlqBpf0Dnu03rbo7n5ka32Nl69e0+512d7rcGb/wrZtFtJcOVjEXN+NGE7dhsFkxu3EZeyHSBNKpjWFcWj3/RYfVl+ws/6Grycn9K+vCH2fp88+c/pd4rtOs7UlZMHUX+DNY3OCSTDJmcdps35NkpeURrD1boPnT1bY2Fg3QmZuAn3bYXVtn83NA467baIkxar98YTxxKSbV5p5VODMfPx70QjKh98mML0XCQ6PP9HpdGgf9Nhu7bF/sM9wNGLiBc3hljdVnPdyfp6UhIHi3mwZLKSp2aNgTaYqigqk+agWD0VsZmTjW2Zizk3K9fwfyeqaPXRHnjgAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Treact\",\n    \"title\": \"Treact\",\n    \"src\": \"/static/9df9549e134ca61d590c5a66f8b942d7/e3189/Treact.png\",\n    \"srcSet\": [\"/static/9df9549e134ca61d590c5a66f8b942d7/a2ead/Treact.png 259w\", \"/static/9df9549e134ca61d590c5a66f8b942d7/6b9fd/Treact.png 518w\", \"/static/9df9549e134ca61d590c5a66f8b942d7/e3189/Treact.png 1035w\", \"/static/9df9549e134ca61d590c5a66f8b942d7/ddc6c/Treact.png 1534w\"],\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(\"ol\", {\n    \"start\": 4\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://kitwind.io/products/kometa/components\"\n  }, \"Kitwind Kometa UI kit\")))), mdx(\"p\", null, \"This Tailwind CSS template and theme UI kit was built to make building applications easier and faster. It includes over 130 sections of Tailwind CSS components.\"), mdx(\"p\", null, \"They are fully responsive and can be used for any type of device. It is compatible with HTML, VueJS, and React and is available for both unlimited personal use and commercial Tailwind CSS projects.\"), mdx(\"p\", null, \"The components include the following\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Navigations\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Headers\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Features\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Contents\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Pricing\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"FAQs\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Blogs\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Stats\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Footers\\nEtc\")), 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/10074b0bd6a9fbc3e68d6e0b546e3b1b/d73a9/Kometa-kit.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\": \"45.94594594594595%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAByElEQVQoz1VR227TQBD1v/ITiA/gAYkPgDeeUJ9o2iBQUtLSVClRm9JKFNGiJKVJndheO77szV47h1mnrtKVjmdn9szxXJx2j2Gf8PmQYbfDsNOe4eA0wPFFiu5ghc7JBgeDGF+OGFpdD7tdH/vdBVqdB+x9C9A+tBohvh65cLB1cgOMBiF+Dee4ufTBuYSpNMUVlOZIDfkoiWmxpq+pbXMsxxF5Ca5KFKgwmyi8evERvdY1Prz+jl73J07PzzA8v8Lw7AK/7x+Q1PwCidAQ2kCSL3QJVawRJRkcVZBDwZL+NJsq9Pf+YtDvY/TjBkGYYu4xLIIILmHhh/CjGF6UEGLE1IE2FayGtVIXcJqAoQp9T+PT+z9483IH794eY+kJqkQgSi34E0KqJOEKnASeCeZbghtrkCgFXQGJlJDk27g260dUT1bV/E3uM0FJjnwMcpqJHwt4K16DpRJhpuCyFAtqP+IayyiDS/clvVuunWGTL2zLFS2pgaHlJaJAKovacmWQ0T2w4rGsh5+KHKtMU+uKZpij3MovyXGmQYgJYUpDH3sBLsd3uHU9jGkBE8Lodozr+zmmLKpjV5M7wj/KsXxGHFbnNfn/Ae1uocxxXrwUAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"KItwind Kometa\",\n    \"title\": \"KItwind Kometa\",\n    \"src\": \"/static/10074b0bd6a9fbc3e68d6e0b546e3b1b/e3189/Kometa-kit.png\",\n    \"srcSet\": [\"/static/10074b0bd6a9fbc3e68d6e0b546e3b1b/a2ead/Kometa-kit.png 259w\", \"/static/10074b0bd6a9fbc3e68d6e0b546e3b1b/6b9fd/Kometa-kit.png 518w\", \"/static/10074b0bd6a9fbc3e68d6e0b546e3b1b/e3189/Kometa-kit.png 1035w\", \"/static/10074b0bd6a9fbc3e68d6e0b546e3b1b/44d59/Kometa-kit.png 1553w\", \"/static/10074b0bd6a9fbc3e68d6e0b546e3b1b/d73a9/Kometa-kit.png 1591w\"],\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(\"ol\", {\n    \"start\": 5\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://sailui.github.io/\"\n  }, \"Sail UI\")))), mdx(\"p\", null, \"It becomes very tiring to keep repeating some basic components when building our project. This is where Sail UI comes in.\\nThis Tailwind CSS template and theme provides developers with common components to make their project building effortless.\"), mdx(\"p\", null, \"Some of the features include\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Buttons\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Forms\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Cards\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Alerts\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Badges\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Typography\")), 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/9bc9ea964b8f9346772846218706de28/7bf53/Sail-UI.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\": \"45.55984555984556%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAtklEQVQoz5WRUQ6DIAyGPb07zryNZlxgJj4JGwiFf5YEAwRJ1peWtP36twzILIRwee99jMk5rOuKbduuXKqre6bpiQGV5cVsUu5YlgVCCJjj6EKttSUwJYwxmOcZSn1uhoVCWYqVUiUwrcnrjeMD4iUinCfXgBbQnedpKuTE+7wbr5g33p0neSJqA4k89l1GIKvOVfUUdoCEr9bgZwvk/wd6aG266lon6K8sZYTWH1EDeSiDEvAH7mLFcQ3O7o8AAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Sail UI\",\n    \"title\": \"Sail UI\",\n    \"src\": \"/static/9bc9ea964b8f9346772846218706de28/e3189/Sail-UI.png\",\n    \"srcSet\": [\"/static/9bc9ea964b8f9346772846218706de28/a2ead/Sail-UI.png 259w\", \"/static/9bc9ea964b8f9346772846218706de28/6b9fd/Sail-UI.png 518w\", \"/static/9bc9ea964b8f9346772846218706de28/e3189/Sail-UI.png 1035w\", \"/static/9bc9ea964b8f9346772846218706de28/44d59/Sail-UI.png 1553w\", \"/static/9bc9ea964b8f9346772846218706de28/7bf53/Sail-UI.png 1595w\"],\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(\"ol\", {\n    \"start\": 6\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://merakiui.com/\"\n  }, \"Meraki UI\")))), mdx(\"p\", null, \"Maraki UI is one of the tailwind CSS templates and themes out there. It\\u2019s a component of tailwind that supports RTL languages and is fully responsive with an elegant dark mode.\"), mdx(\"p\", null, \"Some of the features in the UI include\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Alerts\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Authentication\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Buttons\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Cards\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Forms\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Dropdowns\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Navbars\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Heros\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Sections\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Paginations\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Footer\\nEtc.\")), 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/03c008f87cd26f8713a2cb6ed2d0125d/d777c/Meraki-UI.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\": \"45.94594594594595%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAB3klEQVQoz32Sy2sTYRTFZ6PUNslMMubZJNO8JpMnqTZNTNQifWyK4BvcSjdu3bkTIyIo1boQd7opYlUUCiIuKrU2pXUhuPCBgv+C4t6fdyaTIlX84HDvN3fumXvuGSVYPECqPok/N0as1CRSaKCla3iSZbw2jMp/4RupMlxpkai2CVl1FC2SR4taqG50ILl9V8NutGtu3R8t4I8Vtnt6NWv7rvgksaH+CWlQY250nw2FcgwGc+zRMwzoaSf63He9QuRzoQTiJQLDRbmYeMOmU/SG807eb1BlKkPkZEoNCvsmqIxPkim3uLFwl5XVLqtvNni50uXS1QWUWnOaYusoZn2GxsQshuxQl92FUzX0RBlNJh0S8vNzc9y7Pc+nr9/4/uMnr9c3Wdt4i31+0Ttr3S2UpDVOdvQIqephctWDjBSbJMWoiNUW4kpPbjDLmZOn6Vzu8O79Rz58/sL1m3foXLvFwyfL3F9cYnFpmQsXr6D4RXJQJtIl+kW6I7sv2V66vWOJ0fQocXOMeG4/iXzdmf7E2XM8ePSUx8+e8+LVukieF1P6C91pjEvUN8n+gCdkOuZ4HIOyZOV3OTR9nPbUMdozp6g2plDUfxD9ReiSajswuDfDLs1wsFs1GAik+Q1u0yf9a22+awAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Meraki UI\",\n    \"title\": \"Meraki UI\",\n    \"src\": \"/static/03c008f87cd26f8713a2cb6ed2d0125d/e3189/Meraki-UI.png\",\n    \"srcSet\": [\"/static/03c008f87cd26f8713a2cb6ed2d0125d/a2ead/Meraki-UI.png 259w\", \"/static/03c008f87cd26f8713a2cb6ed2d0125d/6b9fd/Meraki-UI.png 518w\", \"/static/03c008f87cd26f8713a2cb6ed2d0125d/e3189/Meraki-UI.png 1035w\", \"/static/03c008f87cd26f8713a2cb6ed2d0125d/44d59/Meraki-UI.png 1553w\", \"/static/03c008f87cd26f8713a2cb6ed2d0125d/d777c/Meraki-UI.png 1555w\"],\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(\"ol\", {\n    \"start\": 7\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://windstrap.netlify.app/\"\n  }, \"Windstrap\")))), mdx(\"p\", null, \"The next Tailwind CSS template and theme we are going to look at is Windstrap. It\\u2019s a template that comes with a few components for building your project faster.\"), mdx(\"p\", null, \"It was built with bootstrap and Tailwind CSS.\\nSome of the features include\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Alerts\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Buttons\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Collapse\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Dropdowns\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Modal\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Navbar\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Popover\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Tooltips\\nEtc.\\n\", mdx(\"span\", {\n    parentName: \"li\",\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/f985cdb130ff1a46fa2d1f07194e5eed/0bdcb/Windstrap.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\": \"45.173745173745175%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABWUlEQVQoz5VSXUsCQRSdvxrlU6BBlLFJH+SihmWRmT5FP6GCDFo1k9yHfkGI9RCVqZnu1+yHu6edMSvB0A4cuHPmzpm5dy5xXQ/9fh8MrutC03UYBuWa53kTCXig1EWr5YB5Edt28N754IamZeG+9oBa/REGpZgWzTcXpSKFZTJDx/k+zMyfnl/9C7pQVA3dnjIVVU2B7Wj8xYSaJnq+yNBTVJzlCzi/LHKeXkgj67/I8vJShVdIKDW5EUOr3UEyfQxx9wjiziE2E2lEkxnEUznEUtmxjO/l/NwM9rMn0HVjULJpWtxQ1XRIZRlX17coVWQUb2QUylVfq6Lgx9IwHpLvD/Ir8p3fMhuEGQ1+C3hpNBFcETEbFBAICZgLTmYgtIqZ+TAWBJH3nTAz9t0MjWYbkWgK4Y04hK0kltYSWF7/4u94RNvGYiTmt+eAV0h+5gl89v4zLuPwCWqSa1kbiY7+AAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"windstrap\",\n    \"title\": \"windstrap\",\n    \"src\": \"/static/f985cdb130ff1a46fa2d1f07194e5eed/e3189/Windstrap.png\",\n    \"srcSet\": [\"/static/f985cdb130ff1a46fa2d1f07194e5eed/a2ead/Windstrap.png 259w\", \"/static/f985cdb130ff1a46fa2d1f07194e5eed/6b9fd/Windstrap.png 518w\", \"/static/f985cdb130ff1a46fa2d1f07194e5eed/e3189/Windstrap.png 1035w\", \"/static/f985cdb130ff1a46fa2d1f07194e5eed/44d59/Windstrap.png 1553w\", \"/static/f985cdb130ff1a46fa2d1f07194e5eed/0bdcb/Windstrap.png 1579w\"],\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(\"ol\", {\n    \"start\": 8\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://mambaui.com/\"\n  }, \"Mamba UI \")))), mdx(\"p\", null, \"Mamba UI is a simple collection of Tailwind CSS Templates and themes with sections and components. You can easily set this up and use it to build a fast UI in a matter of minutes. It is so easy to use as what it requires is to install your Tailwind CSS into your project. Then you can go ahead to find the components and template you would like to use and just copy and paste them into your project. Some of the components you can choose from include the following\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Articles\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Avatar\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Blog\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Breadcrumb\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Buttons\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Call to action\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Header\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Hero\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Input\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Login\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"News\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Stats\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Snackbar\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Tab\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Team\\nEtc.\")), mdx(\"p\", null, \"It has only two categories of the template the business and portfolio templates.\"), 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/40ff1481ad22523f21312b48b4c1c8ac/9fafa/mamba-UI.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\": \"46.71814671814671%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAB1ElEQVQoz3WR0WvTUBTG8+d2ylYQFETBF1/FP8CXjomID4IyZFPqw5A5GmVmbbelSbqSNk2aZElucnNvsrZ8niR1KmjgRw7nfPee75yrdFohOq0Ae20frx9GNa/uR9i90+Sb+t/s3g3xsh1ib5vYaeLOVlNT5IpDrnOIJXHDGyiWq3+w/h2L/9QVzgswliPLBDiXzT+Xm1iCpQLpBsaoJiiXZLieOkgSVp+taxuUS2MMIUuop30cHffQ+9aHqg5xfPIDU8dFLgqkGR2iRnnBMdZiJKFEPI/gGBFdmCHjYqMhh+8+dFF9Hz9/wdv3hzjat3DaDXGuBhhemrdingv4bobDFzZM3Ycs1igZyC1NIvitTnFcv3ahWxa+98+gnQ8RxtQ55bXglzCXAvYog/p1gq32Y2zfe4KzgUFrKeFOKqfNpUq1L0YHbCuCNbyGOQgxHvmYez6iOK0vYxmvNUmawJrMcNA9QfvBU7R2HmFkzTA1aA0xGeDkUJK7gnbYe8Px6TmN9CyDtp9jubqBFCWqek25QjGz4WgOWFTUDxB4Eg41Z84MRbmsdYrheKgYL4jAwxVhLZrcn5jzBfSJTWNOMLJdWK4HfRrgQr/ChTaASROZ9Ig/Adopi6TIrYBtAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"mamba UI\",\n    \"title\": \"mamba UI\",\n    \"src\": \"/static/40ff1481ad22523f21312b48b4c1c8ac/e3189/mamba-UI.png\",\n    \"srcSet\": [\"/static/40ff1481ad22523f21312b48b4c1c8ac/a2ead/mamba-UI.png 259w\", \"/static/40ff1481ad22523f21312b48b4c1c8ac/6b9fd/mamba-UI.png 518w\", \"/static/40ff1481ad22523f21312b48b4c1c8ac/e3189/mamba-UI.png 1035w\", \"/static/40ff1481ad22523f21312b48b4c1c8ac/44d59/mamba-UI.png 1553w\", \"/static/40ff1481ad22523f21312b48b4c1c8ac/9fafa/mamba-UI.png 1565w\"],\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(\"ol\", {\n    \"start\": 9\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://kutty.netlify.app/components/\"\n  }, \"KUTTY UI\")))), mdx(\"p\", null, \"Kutty UI is a reusable component that is used to build web applications. Building web applications have become easier to do without code as components and themes are constantly been built to help those who could not code to build web applications easily. The KUTTY UI is a Plugin that helps makes this possible. With a load of components to easily start building your desired web applications. Some of these components include\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Authentication\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Applications\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Blog posts\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Sidebar\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Header\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Features\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Logos\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Pricing\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Footers\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Heros\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Testimonials\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Call to actions\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"FAQ\\nEtc.\")), 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/2550172753725ec64c3c07cbf638d336/10ab7/Kutty-UI.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\": \"46.71814671814671%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAu0lEQVQoz5VRCwqCQBTc43eMDtENukRomhmBhJ9c111ZaaengqS9LRwYHgvzhnmzojYGVaOR3h6olILUBrXWRDNSms+3nllKhaKemFcNnu2kEfgD93LYAuGcw5oDGkobRBHiJEEQxjRTnIIzLjRt32NQcbtjQs6wMxb3a4k8k2SuiS3UQDrN2h6+PeE7MQs7HHYZjnsyLajb1ix1jq+C7fBbzNfCmQqf2dIAbGdr3QbD5ZLvkvlTtuJXwjeyF8QONZV2fwAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Kutty UI\",\n    \"title\": \"Kutty UI\",\n    \"src\": \"/static/2550172753725ec64c3c07cbf638d336/e3189/Kutty-UI.png\",\n    \"srcSet\": [\"/static/2550172753725ec64c3c07cbf638d336/a2ead/Kutty-UI.png 259w\", \"/static/2550172753725ec64c3c07cbf638d336/6b9fd/Kutty-UI.png 518w\", \"/static/2550172753725ec64c3c07cbf638d336/e3189/Kutty-UI.png 1035w\", \"/static/2550172753725ec64c3c07cbf638d336/10ab7/Kutty-UI.png 1552w\"],\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(\"ol\", {\n    \"start\": 10\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://www.gustui.com/\"\n  }, \"Gust UI\")))), mdx(\"p\", null, \"Gust UI is only a web application component, elements, and pages that you can use to set up a web application. It was built using Tailwind CSS. You can use this UI to set up responsive HTML and react components for your subsequent applications.\"), mdx(\"p\", null, \"Some of the components, elements, and pages you can use include\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Alerts\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Avatars\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Badges\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Buttons\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Cards\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Dropdowns\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Forms\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Modals\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Steps\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Tabs\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Toasts\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Toggles\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Navs\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Pagination\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Accounts\\nEtc.\")), 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/b883ebc1d88b50279cbdea265816cd53/35890/Gust-UI.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\": \"45.55984555984556%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABt0lEQVQoz4VSbW7TQBDNwTgI10DiCJwGqUVBQTRtaZNUUQFFfCiqKAEljms3cWu7612vd71r72O80EiBH4w0mrc//D7G08t4gSRJ0LYtmqbx8xE3zW/snPtvK6VQFAV64R3DJi9xXyg8lAYZV2BlDaEblF0rC17V4FJDagOpqCsNXRtY28KSaEOiXUkp0dvmEt9XMd5NLjGefsTn+TVOzy8Iv8f0wwwTmmG8hbYOjJeoiaQyLZiQUFr7JI/V4V7GNa4WK7w86KM/OMLo4hKH/QFevR7gzdExrq4X5KqGIkcFFyiyBHeLL5DJGnl2D0dEXeQdYS40gmiLwdtjnJyNMZpMMTw9w6evc/CyIhfGxzLG+I9mJwd48fQJotGhf7s/O94RslJjmzJ8+7HEzyDEch0hjG6xvokQ3W4Q0szyfBdrEy4xOx8ijwLvrm3dPqGghedMYB1GuCGiiDomIlZw8C4i5zt31jYQVYWaHFe0gjRNyf1fO7R1i7lI8Tye4Fk8xpAF6KQd/q30gfufYUmgOxNjrD+rPUJjSNXUWFUcgRLICJvGwbb7d9YVKwREKT1JTQ59ZLcf+RdBS6kyUetbfgAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Gust UI\",\n    \"title\": \"Gust UI\",\n    \"src\": \"/static/b883ebc1d88b50279cbdea265816cd53/e3189/Gust-UI.png\",\n    \"srcSet\": [\"/static/b883ebc1d88b50279cbdea265816cd53/a2ead/Gust-UI.png 259w\", \"/static/b883ebc1d88b50279cbdea265816cd53/6b9fd/Gust-UI.png 518w\", \"/static/b883ebc1d88b50279cbdea265816cd53/e3189/Gust-UI.png 1035w\", \"/static/b883ebc1d88b50279cbdea265816cd53/44d59/Gust-UI.png 1553w\", \"/static/b883ebc1d88b50279cbdea265816cd53/35890/Gust-UI.png 1582w\"],\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, \"Conclusion\"), mdx(\"p\", null, \"Tailwind CSS is a must-use framework if you have gotten tired of using regular Bootstrap.\\nThese Tailwind CSS templates and themes allow for easy customization of your web pages. We explored different Tailwind themes, components, and tailwind templates in this article. We discussed 10 of these and went ahead to list the different themes, elements, and components that this UI has.\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"10 tailwind CSS templates and themes","date":"January 10, 2021","image":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACRUlEQVQoz2O4c+viw7uX16xaunjJwr+/v////XHutL4t27b2nL9iu2yd19qtHmu2QJD76s3e67be+fDx889fV9+88123jeHNnTN/3t9fOmfiykWz/nx5+f///0XzZ2/bvO7Pv1/Zuw86rtwI1++2erPf+m2XXr059ezl9bfvwZpf3P/95eXiuVNWLJn7/9fH//9/L5wzdcuWjUBTLr967QmzFog81251Wrlp/pUb3//8WXDlhtPKjQwvH9/8+fn5ioUztDTUQ4P8H147v2zRvPXrVgI1///3r+rQSfsVG+CWu4PtD9+8y3X1ZiCb4e29s3/e3Vs+u09ORtJMTnDHtLbZ0yZuXA/U/BeofeX129bL1vus2wa33xtskOdaEJvh2bMHr18+aKwuiAzxjbbRXlqbPau/Y/WKRf///wFq3nbnnt+6bbl7j1QcOl5y4HjBviNF+48CSaBbgPoZvjy//v/r08baSmdHh6IA67rcpMiIiKMHdv7/9+P/71/rrlxN3XWg9MDx8oPH8/ceydlzGIjy9x0p3n80acd+hpP7Ni6ZO83GwtzK3Dw6wMPRwV7fyGzFiuXv3r66dul8+94Ddqs2e60FxZM72M8gxurNEC8w+Pp4KslJKivKaKsrq6spaaop62qo6OobTp+7YMmyJcFLVruu3YYc5siIQUdNWUleSklOWkFGSllOWlVRVklOysnePjY2PbGp2XPjTg+YPVg0J4R6iYkIyUtLyEmJA5GyvIy4qHBuXNjCVcsc5i7zQApnTAQACTyAuIVkRYkAAAAASUVORK5CYII=","aspectRatio":1.7730496453900708,"src":"/static/3f486e18252b8cbd525390d7ad21231c/104b3/10-tailwind-css-templates-and-themes.png","srcSet":"/static/3f486e18252b8cbd525390d7ad21231c/84249/10-tailwind-css-templates-and-themes.png 250w,\n/static/3f486e18252b8cbd525390d7ad21231c/9d7e9/10-tailwind-css-templates-and-themes.png 500w,\n/static/3f486e18252b8cbd525390d7ad21231c/104b3/10-tailwind-css-templates-and-themes.png 960w","sizes":"(max-width: 960px) 100vw, 960px"}}},"imageExternal":null,"lastUpdated":"10 May 2024","author":"Emmanuel Chinonso","role":"Technical Writer","authorImage":"/blog/author/author_emmanuel.jpg","metaTitle":"10 tailwind CSS webiste templates and themes","metaDescription":"Tailwind CSS templates and themes are pre-built website designs that are based on Tailwind CSS, allowing developers and designers to quickly create beautiful and functional websites.","previousTitle":"10 Awesome projects built with Tailwind CSS","previousPath":"awesome-10-projects-built-with-tailwind","nextTitle":"Tailwind animation-How to create Tailwind CSS Animation","nextPath":"create-animation-with-tailwind-css","blogtype":"tailwind"},"fields":{"slug":"/tailwind-css-10-templates-and-themes/"}},"previous":null,"next":null},"pageContext":{"id":"8fa454f2-a794-508b-a125-b6e3c46d7242"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3706406642","3706406642","4045616534","4045616534","956403285","956403285"]}