The latest articles on DEV Community by Mary Amato (@mariann93502220). https://dev.to/mariann93502220 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F473404%2F594e1eb8-1d0d-4b51-bdbf-50e1f2018193.jpg https://dev.to/mariann93502220 en Mary Amato Wed, 02 Feb 2022 11:33:23 +0000 https://dev.to/mariann93502220/30-free-tailwind-css-templates-to-kick-start-your-next-project-3igo https://dev.to/mariann93502220/30-free-tailwind-css-templates-to-kick-start-your-next-project-3igo <p>Over the past year, Tailwind CSS has slowly but steadily become more and more popular within the world of frontend development. The reason is that it is an incredibly easy-to-use, fully customizable library with "incredible" performance when it comes to using it alongside other frameworks. But free Tailwind CSS templates are rare to find when searching for templates and themes on the internet. A quick search doesn't exactly bring you a whole lot of results either. With that in mind, I spent some time digging around to find 30 free templates and themes based on Tailwind CSS, which includes an extensive list of extra resources such as UI Kits and component libraries based on modern javascript frameworks like React and Vue.</p> <p>So, In this article, I'm going to show you a selection of fully open-source Tailwind CSS templates, which are not just free, but also fully customizable and adaptive for products like admin dashboards, landing pages, websites, blogs, and many more.</p> <p>It's time to get started. Let's look at the list!</p> <h3> 1. <strong>Simple Light</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fol68wepl9ninrqk1t5d8.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fol68wepl9ninrqk1t5d8.jpg" alt="Image description"></a></p> <p>In a hurry to kick-start your next project? Use Simple Light – A product landing page template built with Tailwind CSS and React.js. This astonishing template includes all the essential features you will ever need to create your next landing page for SaaS products, digital agencies, and productised services.</p> <p><strong><a href="https://simple.cruip.com/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/cruip/tailwind-landing-page-template" rel="noopener noreferrer">Download</a></strong></p> <h3> 2. <strong>Mosaic Lite</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiubcvw82ava6pwzzmd46.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiubcvw82ava6pwzzmd46.jpg" alt="Image description"></a></p> <p>Mosaic Lite is a Tailwind &amp; React admin dashboard template that offers various pre-designed charts and widgets created to be customised from the core. Mosaic is fast to load and packed with incredible functionalities like the responsive grid, infinite scroll, off-canvas navigation, dynamic layout, and more.</p> <p><strong><a href="https://mosaic.cruip.com/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/cruip/tailwind-dashboard-template" rel="noopener noreferrer">Download</a></strong></p> <h3> 3. <strong>Amiso</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn36poff76jqso5x9nhz2.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn36poff76jqso5x9nhz2.jpg" alt="Image description"></a></p> <p>Amiso is a clean and elegant landing page template, designed to help you advertise your online and consulting services with ease. Amiso’s pre-built components will get you started in no time so you can focus on making your service better instead of struggling with technical details.</p> <p><strong><a href="https://preview.launchoice.com/amiso/" rel="noopener noreferrer">Live Demo</a> / <a href="https://launchoice.com/products/amiso" rel="noopener noreferrer">Download</a></strong></p> <h3> 4. <strong>Pippe</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff5lnfugulpw3lgrisdwq.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff5lnfugulpw3lgrisdwq.jpg" alt="Image description"></a></p> <p>Your awesome new app deserves an epic landing page. Pippe is a beautiful Tailwind CSS mobile landing page template loaded with wonderful 3D illustrations and animated effects. This product comes with heavy energies, bold typography, and magnificent parallax elements that will make your look irresistible for any user.</p> <p><strong><a href="https://preview.launchoice.com/pippe/" rel="noopener noreferrer">Live Demo</a> / <a href="https://launchoice.com/products/pippe" rel="noopener noreferrer">Download</a></strong></p> <h3> 5. <strong>Mosaic Lite Vue</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fix6th0h6uz52vu674o5l.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fix6th0h6uz52vu674o5l.jpg" alt="Image description"></a></p> <p>If you are looking to build a dashboard for your small business, you may want to choose Mosaic Lite Vue - A free dashboard template built with Tailwind CSS and Vue.js. It was developed to be minimal and easy to configure, and thanks to the Chart.js library, you can create different graph combinations to enhance your web application in minutes.</p> <p><strong><a href="https://mosaic-vue.cruip.com/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/cruip/vuejs-admin-dashboard-template" rel="noopener noreferrer">Download</a></strong></p> <h3> 6. <strong>Cento</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foskkzvk2tqctn4ovp98p.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foskkzvk2tqctn4ovp98p.jpg" alt="Image description"></a></p> <p>Cento is a beautiful free landing page template for startups. It has a neat and minimal design based on the Tailwind CSS framework. This allows you to quickly customize everything from the ground up to logo colors, typography, and more. Cento also comes with a handful of functional pre-built messengers to help you get started.</p> <p><strong><a href="https://preview.launchoice.com/cento/" rel="noopener noreferrer">Live Demo</a> / <a href="https://launchoice.com/products/cento" rel="noopener noreferrer">Download</a></strong></p> <h3> 7. <strong>Windmill</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3lys7nc6r5nevty5a1am.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3lys7nc6r5nevty5a1am.jpg" alt="Image description"></a></p> <p>Windmill is a Tailwind CSS admin template and multi-theme, completely accessible, with components and pages examples, ready for production dashboard. It includes everything you need to create your product service or admin panel. Start from scratch or import the demo data. Each option comes with a story demonstrating how to use it. This template is also comes in <a href="https://windmillui.com/dashboard-react" rel="noopener noreferrer">React</a></p> <p><strong><a href="https://windmill-dashboard.vercel.app/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/estevanmaito/windmill-dashboard" rel="noopener noreferrer">Download</a></strong></p> <h3> 8. <strong>Nine4</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3awrfqgvas974sxbdrsz.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3awrfqgvas974sxbdrsz.jpg" alt="Image description"></a></p> <p>Nine4 is a dark-based website template fully bootstrapped using Tailwind CSS and Next.js. The dark layout makes everyone around thinks about what's the difference between the moon and the sun when it comes to a nice interface, and the page accessible from every browser or device captures the essence of the modern web design.</p> <p><strong><a href="https://nine4-3.vercel.app/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/r1/nine4-3" rel="noopener noreferrer">Download</a></strong></p> <h3> 9. <strong>VPN Landingpage</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3b4xe0ff9461sbc7azng.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3b4xe0ff9461sbc7azng.jpg" alt="Image description"></a></p> <p>Have you ever used an operational VPN, then noticed the lack of high-quality innovation when it comes to this type of product? Well, with Tailwind VPN Landingpage, developed by Faldi (a talent designer from Didi), you don't have to worry, and you can start building your next product using technologies such as Next.js covered by the MIT license.</p> <p><strong><a href="https://next-landing-vpn.vercel.app/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/naufaldi/next-landing-vpn" rel="noopener noreferrer">Download</a></strong></p> <h3> 10. <strong>Starter Dashboard</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdg1yo4vxubcu7gtom4cy.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdg1yo4vxubcu7gtom4cy.jpg" alt="Image description"></a></p> <p>Starter Dashboard is a functional admin dashboard template that gives you a sturdy structure for building any type of web-based app or service. Built on Tailwind and freely hosted on Github, the product comes with a single interface loaded with many working gadgets that can generate plenty of results in real-time.</p> <p><strong><a href="https://kamona-wd.github.io/starter-dashboard-layout/#" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/Kamona-WD/starter-dashboard-layout" rel="noopener noreferrer">Download</a></strong></p> <h3> 11. <strong>Play</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fivbsu4m42hdgelf15x5c.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fivbsu4m42hdgelf15x5c.jpg" alt="Image description"></a></p> <p>Play, a Tailwind CSS template, helps you build a website quickly for SaaS products or digital services. It has all the critical components a modern site needs to stand out from the crowd and start onboarding new users straight away. Play is free to use for an unlimited number of projects.</p> <p><strong><a href="https://play-tailwind.tailgrids.com/" rel="noopener noreferrer">Live Demo</a> / <a href="https://tailwindtemplates.co/templates/play/" rel="noopener noreferrer">Download</a></strong></p> <h3> 12. <strong>Admin One</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkvdwrejoozqv6updwq92.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkvdwrejoozqv6updwq92.jpg" alt="Image description"></a></p> <p>Admin One is a simple and exquisite admin dashboard template for CRM software. It comes packed with a hidden aside menu, collapsable cards &amp; tables, a small laptop setup with a show/hide option, and a classic format with aside features on the left. Admin One was built using Tailwind CSS for rapid theme customization and Vue.js for state management.</p> <p><strong><a href="https://justboil.github.io/admin-one-vue-tailwind/#/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/justboil/admin-one-vue-tailwind" rel="noopener noreferrer">Download</a></strong></p> <h3> 13. <strong>Treact</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsthp4xef8xmcoit0004p.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsthp4xef8xmcoit0004p.jpg" alt="Image description"></a></p> <p>As a developer, you want to spend your time building your app, not worrying about how it looks. Treact provides over 100 customizable React UI templates and components built using the TailwindCSS framework. These lightweight elements allow you to create a beautiful interface design down to the last pixel.</p> <p><strong><a href="https://treact.owaiskhan.me/" rel="noopener noreferrer">Live Demo &amp; Download</a></strong></p> <h3> 14. <strong>Open Pro Tailwind</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9mr5t4zbgschrdbn9k4f.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9mr5t4zbgschrdbn9k4f.jpg" alt="Image description"></a></p> <p>Open Pro Tailwind is an implementation of the “Open” landing page template using Tailwind CSS Boilerplate. This site is powered by Github pages, and the source code is hosted in a public repository to demonstrate how to build a static site with a focus on performance, scalability, and reusability with static site generators. </p> <p><strong><a href="https://open.michelegera.dev/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/michelegera/tailwindcss-open-template" rel="noopener noreferrer">Download</a></strong></p> <h3> 15. <strong>Landing</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftnuevmlc95x58oa40n4r.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftnuevmlc95x58oa40n4r.jpg" alt="Image description"></a></p> <p>Landing is a website template that has been developed with Tailwind CSS and the new Gradient feature. This segment is a new web technology for creating responsive websites that look great while keeping all the advantages of a dynamic headless site. If you need a simple site that automatically changes the content, then Landing is what you're looking for.</p> <p><strong><a href="https://landing-gradients.netlify.app/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/gary149/tailwindcss-landing-gradients" rel="noopener noreferrer">Download</a></strong></p> <h3> 16. <strong>TailwindBlog</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fai22g1oja0lmbk0xtz6f.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fai22g1oja0lmbk0xtz6f.jpg" alt="Image description"></a></p> <p>TailwindBlog is a blogging starter template that can be used to convert your existing Jekyll and Hugo websites into Tailwind CSS-powered blogs. It includes the latest formattings needed to make technical writing a breeze. It's highly customizable and configurable, and it has pre-built styling for common patterns like tables, quotes, and lists.</p> <p><strong><a href="https://tailwind-nextjs-starter-blog.vercel.app/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/timlrx/tailwind-nextjs-starter-blog" rel="noopener noreferrer">Download</a></strong></p> <h3> 17. <strong>Jakarta LTE</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7gk5yxzoaks7kmvz2z4h.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7gk5yxzoaks7kmvz2z4h.jpg" alt="Image description"></a></p> <p>Jakarta is an open-source admin template with a rich UI kit based on Tailwind CSS. With a subtle personality and clean expressions, Jakarta can provide you or your client with a new perspective on modern UI development, and an excellent user experience for any FinTech-related product or service. </p> <p><strong><a href="https://undercode99.github.io/jakarta-lte/pages/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/undercode99/jakarta-lte" rel="noopener noreferrer">Download</a></strong></p> <h3> 18. <strong>Skilline</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F24wxmg97ti3sjcgot66r.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F24wxmg97ti3sjcgot66r.jpg" alt="Image description"></a></p> <p>Skilline is a free landing page template built with Tailwind CSS featuring smiling people from multiple stock libraries. Due to the popularity of this template, it's best to build it into your design and add the extra CSS only if necessary. The combination of ease of use and accessibility makes Skilline a great tool for both non-technical and technical people.</p> <p><strong><a href="https://mhaecal.github.io/frontend/skilline" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/mhaecal/skilline-landing-page" rel="noopener noreferrer">Download</a></strong></p> <h3> 19. <strong>Ghostwind</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpf2kk7yjnvk1718z73d5.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpf2kk7yjnvk1718z73d5.jpg" alt="Image description"></a></p> <p>Ghostwind is a Tailwind CSS blog template inspired by Ghost that has recently landed on Github. With the magic of Tailwind, you'll be up and running in seconds without having to wait for a custom CSS framework to be built. This makes it perfect for sites where design changes regularly or where you're using a designer that isn't familiar with your specific setup or requirements.</p> <p><strong><a href="https://tailwindtoolbox.github.io/Ghostwind/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/tailwindtoolbox/Ghostwind" rel="noopener noreferrer">Download</a></strong></p> <h3> 20. <strong>Cleopatra</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fodfbvb94dckxo8gi48pe.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fodfbvb94dckxo8gi48pe.jpg" alt="Image description"></a></p> <p>Looking for a template that was made with your app in mind? Look no further than Cleopatra. A powerful admin dashboard template built on tailwind CSS that features a large, animated header image with smooth transitions and a beautiful typographic layout. The home page uses a component-based workflow to display recent posts or services that are customisable with the click of a button.</p> <p><strong><a href="https://moesaid.github.io/cleopatra/index.html" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/moesaid/cleopatra" rel="noopener noreferrer">Download</a></strong></p> <h3> 21. <strong>Petra</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhu1ap71p6fl9iiblc5p6.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhu1ap71p6fl9iiblc5p6.jpg" alt="Image description"></a></p> <p>Petra is the perfect starting point for creating a business website. It easily scales to your needs and has several built-in features that will remove much of the work from getting started. The product is powered by Tailwind CSS and Nuxt.js, giving you an extremely powerful combo to build your web application with.</p> <p><strong><a href="https://smuice.com/demos/petra/#" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/Smuice-com/petra" rel="noopener noreferrer">Download</a></strong></p> <h3> 22. <strong>Plain</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs64bixvo0uqtt3kfpf3y.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs64bixvo0uqtt3kfpf3y.jpg" alt="Image description"></a></p> <p>Plain is a multipurpose Tailwind CSS template for online portfolios and web agencies. It features a single page with intro sections to help make your site uniquely yours, and it's fully responsive and retina-ready so it will look perfect on any device. From large desktops down to mobile phones, Plain will help you stand out on every occasion.</p> <p><strong><a href="https://preview.tailwindtemplates.co/plain/" rel="noopener noreferrer">Live Demo</a> / <a href="https://tailwindtemplates.co/templates/plain/" rel="noopener noreferrer">Download</a></strong></p> <h3> 23. <strong>Material Tailwind Kit</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fej8h3jj2i7rl86kwytca.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fej8h3jj2i7rl86kwytca.jpg" alt="Image description"></a></p> <p>Material Tailwind Kit is a free and open-source UI Kit based on two popular front-end technologies - Tailwind CSS &amp; React. You no longer need to choose between the simplicity of Bootstrap &amp; the flexibility of frameworks like Foundation. This UI kit gives you a lot more freedom and structure, but still keeps things light-weight and convenient for you.</p> <p><strong><a href="https://demos.creative-tim.com/material-tailwind-kit-react/#/" rel="noopener noreferrer">Live Demo</a> / <a href="https://www.creative-tim.com/product/material-tailwind-kit-react" rel="noopener noreferrer">Download</a></strong></p> <h3> 24. <strong>Tailmin</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Furqzsewydf7gb6x6cj4p.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Furqzsewydf7gb6x6cj4p.jpg" alt="Image description"></a></p> <p>Tailmin is an admin dashboard template built with Vue.js and Tailwind CSS. The product is a solution to the problems various groups face when building apps. Built using a component-based approach, it can easily be extended with unlimited components. Tailmin was born out of the need for tools that allow for higher productivity when producing reusable web apps.</p> <p><strong><a href="https://tailmin.vercel.app/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/otezz/tailmin" rel="noopener noreferrer">Download</a></strong></p> <h3> 25. <strong>K-WD Dashboard</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fur107t8jyxtzqkkxk1t0.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fur107t8jyxtzqkkxk1t0.jpg" alt="Image description"></a></p> <p>K-WD Dashboard is a responsive Tailwind CSS administrator dashboard template built for everyone who wants to create web apps on top of the most trending frameworks, Tailwind &amp; Alpine.js. The product includes over 10+ individual pages featuring various components, giving you the freedom of choosing and combining. </p> <p><strong><a href="https://kamona-wd.github.io/kwd-dashboard/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/Kamona-WD/kwd-dashboard" rel="noopener noreferrer">Download</a></strong></p> <h3> 26. <strong>Landmark</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fynmm10ce581p7fur0rli.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fynmm10ce581p7fur0rli.jpg" alt="Image description"></a></p> <p>Landmark is a template specifically designed for technological businesses. Landmark has universal design, so it can be easily adjusted to your requirements and preferences. Whether you want to build web applications with enabled registration and user account functionalities or just use the template as a landing page - this template will suit your needs.</p> <p><strong><a href="https://tailwind69.netlify.app/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/inductor69/TailWind-Template" rel="noopener noreferrer">Download</a></strong></p> <h3> 27. <strong>Shine</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq9yptwrehl8a0dbjla55.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq9yptwrehl8a0dbjla55.jpg" alt="Image description"></a></p> <p>Shine is a beautiful, fast, and fully responsive free Tailwind CSS theme. Whether you are building a subscription service, showcasing your portfolio, publishing a blog, or running an e-commerce store—Shine’s creative components and demo pages can help you create the best possible products faster than ever.</p> <p><strong><a href="http://preview.graygrids.com/item/shine-tailwind-css-template/" rel="noopener noreferrer">Live Demo</a> / <a href="https://graygrids.com/templates/free-tailwind-template-shine/" rel="noopener noreferrer">Download</a></strong></p> <h3> 28. <strong>Dashboard Template</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftjqlnqyerp6yqnm2858y.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftjqlnqyerp6yqnm2858y.jpg" alt="Image description"></a></p> <p>Dashboard template is a powerful yet free product developed built with Tailwind CSS, Alpine.js, and Laravel Blade. This product uses utility classes, which offer an array of utilities to make your life easier while coding. You can use this dashboard with the same development flow that you've grown used to when using Tailwind CSS to build web applications.</p> <p><strong><a href="https://tailwindcomponents.com/component/dashboard-template/landing" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/tailwindcomponents/dashboard" rel="noopener noreferrer">Download</a></strong></p> <h3> 29. <strong>Slavia-Kit</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgnq1y4qmkyoyulyu3txg.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgnq1y4qmkyoyulyu3txg.jpg" alt="Image description"></a></p> <p>Slavia-Kit includes 9 gorgeous dashboard templates built with Tailwind CSS for React, Next.js, Vue, and Nuxt.js. All the templates available in this powerful Kit take advantage of expandable supplements and accessories, which allow you to add new content quickly without losing style consistency or visual identity.</p> <p><strong><a href="https://www.salvia-kit.com/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/salvia-kit/salvia-kit" rel="noopener noreferrer">Download</a></strong></p> <h3> 30. <strong>Tailwind Admin</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flt39s3tszsxgfdhbwxyw.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flt39s3tszsxgfdhbwxyw.jpg" alt="Image description"></a></p> <p>Tailwind Admin is a modern admin dashboard template that makes handling your data so easy and fun you'll forget about the headaches of working with admin dashboards. The team behind this product pulled out all the boilerplate utilities and added extra default options to create a better experience for you and your customers.</p> <p><strong><a href="https://tailwindadmin.netlify.app/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/tailwindadmin/admin" rel="noopener noreferrer">Download</a></strong></p> <h3> <strong>Conclusion</strong> </h3> <p>I hope you enjoyed these templates. Please feel free to share your own favorite ones in the comments section below!</p> html css webdev tailwindcss Mary Amato Tue, 23 Mar 2021 14:37:01 +0000 https://dev.to/mariann93502220/20-best-tailwind-landing-page-templates-free-premium-3pjn https://dev.to/mariann93502220/20-best-tailwind-landing-page-templates-free-premium-3pjn <p>I see countless developers investing weeks into building landing pages from scratch that end up looking unprofessional, when they could've instead used a template, done it in 1/10th the time, and had a better result in the end.</p> <p>Ready-made landing page templates can be a good tradeoff to make because you get two massive benefits in return:</p> <ol> <li>You can have an amazing professional-quality design that inspires trust in your visitors.</li> <li>It's way faster to do, so you have more free time to work on other important parts of your business.</li> </ol> <p>So, If you’re tired of presenting your products with a monotonous and bad-designed landing page, I have compiled this list of <strong>the best 20 Tailwind CSS landing page templates</strong>—resources with a wide variety of uses and covering several common needs. These templates are high-quality, well-coded, and easy-to-use. I hope you find one or two (or twenty) you can put to good use, today.</p> <h4> 20 Best Tailwind Landing Page Templates: </h4> <h3> 1. Simple </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqcsfkx5m2o3mslk5p7e8.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqcsfkx5m2o3mslk5p7e8.jpg" alt="Alt Text" width="800" height="600"></a><br> Simple Light is a free landing page template built on top of TailwindCSS and fully coded in React.js. This template is designed to provide all the basic components a developer/founder need to create a landing page for SaaS products, online services, digital agencies, and more. </p> <ul> <li>Free template</li> <li>One-page website template</li> <li>Fresh and modern design</li> </ul> <p><strong><a href="https://simple.cruip.com/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/cruip/tailwind-landing-page-template" rel="noopener noreferrer">Download</a></strong></p> <h3> 2. UptimeMate </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgxzjvg6f0tmbxk60yatr.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgxzjvg6f0tmbxk60yatr.jpg" alt="Alt Text" width="800" height="600"></a><br> A beautifully-designed SaaS landing page template that comes in both dark and light versions. The landing page is made with Tailwind CSS and fully optimized for mobile, tablet and desktop usage. The icons included in these designs are from the awesome heroicons library.</p> <ul> <li>Dark and light layouts</li> <li>Build with Tailwind CSS version 2.x</li> <li>Use in personal and commercial projects</li> </ul> <p><strong><a href="https://www.themes.dev/preview/saas-landing-page/" rel="noopener noreferrer">Live Demo</a> / <a href="https://www.themes.dev/library/tailwindcss-saas-landing-page/" rel="noopener noreferrer">Download</a></strong></p> <h3> 3. Tailwind UI (Landing Pages) </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffmjyr20nyeen1uau0m7a.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffmjyr20nyeen1uau0m7a.jpg" alt="Alt Text" width="800" height="600"></a><br> Three super slick one-page landing pages templates designed and coded by creators of Tailwind CSS. Tailwind UI doesn’t only include landing pages, but it’s an ongoing collection of professionally designed, pre-built, fully responsive HTML snippets you can drop into your Tailwind projects.</p> <ul> <li>Built by creators of Tailwind CSS</li> <li>Ongoing updates and updates</li> <li>Background image hero with alternating features</li> </ul> <p><strong><a href="https://tailwindui.com/components/marketing/page-examples/landing-pages" rel="noopener noreferrer">Live Demo &amp; Download</a></strong></p> <h3> 4. Appy </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flw0cy7qqj2hm1phnwoa9.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flw0cy7qqj2hm1phnwoa9.jpg" alt="Alt Text" width="800" height="600"></a><br> Appy is the ultimate mobile-based landing page template built on top of the latest Tailwind CSS 2.0 framework. Along with the toggle to switch between dark and white layouts it introduces eight pre-made pages that will help you to kickstart your project’s development with ease.</p> <ul> <li>Easily switch between layouts</li> <li>Custom-made illustrations</li> <li>Scroll reveal animations</li> </ul> <p><strong><a href="https://cruip.com/demos/appy/" rel="noopener noreferrer">Live Demo</a> / <a href="https://cruip.com/" rel="noopener noreferrer">Download</a></strong></p> <h3> 5. Open PRO </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvjg7imfqoq0gvf65aorc.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvjg7imfqoq0gvf65aorc.jpg" alt="Alt Text" width="800" height="600"></a><br> Open PRO is a superb landing page template with a fully dark design and a streamlined user interface. Thanks to the presence of multiple pages and components, this product is the perfect answer for anyone looking to build SaaS apps, corporate websites, and more.</p> <ul> <li>Available in HTML, React, and Vue</li> <li>10+ pages and tons of pre-built sections</li> <li>Ongoing and lifetime updates</li> </ul> <p><strong><a href="https://cruip.com/demos/open-pro/" rel="noopener noreferrer">Live Demo</a> / <a href="https://cruip.com/" rel="noopener noreferrer">Download</a></strong></p> <h3> 6. Prodify </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8r57tvg92hmnc577t2gr.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8r57tvg92hmnc577t2gr.jpg" alt="Alt Text" width="800" height="600"></a><br> Prodify is a modern and sleek product that focuses on growing trends of beautiful gradients, clean spacing, and large typography. This template can be used by anyone to market a product and/or service, and it features a four very rich pages, such us the homepage, about us, pricing, and knowledge base.</p> <ul> <li>Cross-browser tested</li> <li>Meets WCAG accessibility guidelines</li> <li>Future updates available via the changelog</li> </ul> <p><strong><a href="https://tailwinduikit.com/templates/prodify-modern-product-website" rel="noopener noreferrer">Live Demo &amp; Download</a></strong></p> <h3> 7. Easybank </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjq31gpncsycwakswt58r.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjq31gpncsycwakswt58r.jpg" alt="Alt Text" width="800" height="600"></a><br> Made as part of a Frontend Mentor challenge Easybank is a totally scalable product designed with FinTech applications in mind. Created as a product that stands out, this template can easily adapt to different viewports and can be flexible for multiple uses thanks to the high-quality code.</p> <ul> <li>Absolute positioning</li> <li>Custom illustrations and mobile mockups</li> <li>Eye-catching gradients and a bright palette</li> </ul> <p><strong><a href="https://easybank-web.vercel.app/#" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/kelvinsanchez15/easybank-landing-page" rel="noopener noreferrer">Download</a></strong></p> <h3> 8. Modern SAAS </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FDEl98QL.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FDEl98QL.jpg" alt="8-Modern SAAS" width="800" height="600"></a><br> Modern SaaS is a template created using Tailwind CSS V2 and Alpine.js. This product Includes 5 responsive pages (such as blog, contact, about, etc.), pricing tabs, newsletter forms, feature tabs, dark mode support, sleek product illustrations, and much more.</p> <ul> <li>Ideal for SaaS, services, and agencies</li> <li>Official Tailwind CSS palette</li> <li>Fully documented template</li> </ul> <p><strong><a href="https://www.wickedtemplates.com/viewports/wt002" rel="noopener noreferrer">Live Demo</a> / <a href="https://gumroad.com/l/tljyq" rel="noopener noreferrer">Download</a></strong></p> <h3> 9. SaasFolio </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpb4vmgpr33kweyvbqhng.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpb4vmgpr33kweyvbqhng.jpg" alt="Alt Text" width="800" height="600"></a><br> SaasFolio is a product-focused landing page template for SaaS services and startups. It differences itself from other similar alternatives by focusing on professional sales copy, bright colors, and page hierarchy. All these features make this template ideal for user conversions.</p> <ul> <li>95+ Google PageSpeed</li> <li>Handmade cartoon-style illustrations</li> <li>Fully documented template</li> </ul> <p><strong><a href="https://www.landingkit.com/templates/saasfolio/tailwind/" rel="noopener noreferrer">Live Demo</a> / <a href="https://www.landingfolio.com/templates/products/saasfolio" rel="noopener noreferrer">Download</a></strong></p> <h3> 10. Treact </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmeaecgrivp37s74i9s6o.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmeaecgrivp37s74i9s6o.jpg" alt="Alt Text" width="800" height="600"></a><br> Treact is a collection of lightweight and simple-to-setup UI landing pages and components built using TailwindCSS. All components in this product are modular and fully responsive for a great mobile experience as well as big desktop screens, tablets, and all types of modern devices.</p> <ul> <li>7 Landing Page Demos</li> <li>Multiple inner pages and component blocks</li> <li>Free plan for personal usage</li> </ul> <p><strong><a href="https://treact.owaiskhan.me/" rel="noopener noreferrer">Live Demo &amp; Download</a></strong></p> <h3> 11. Landing Pages For Mobile Apps </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6v4ga4pgxqfg0ftw2luu.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6v4ga4pgxqfg0ftw2luu.jpg" alt="Alt Text" width="800" height="600"></a><br> LPFMA is a vibrant, clean, and powerful collection of mobile landing page templates built on top of Tailwind CSS. With its multiple ready-to-use layouts, it is the perfect alternative for anyone looking to promote your mobile-based apps, digital services or business projects.</p> <ul> <li>5 unique one-page layouts</li> <li>Cross Browser Optimization</li> <li>Free google fonts</li> </ul> <p><strong><a href="https://landingpagesformobileapps.com/" rel="noopener noreferrer">Live Demo &amp; Download</a></strong></p> <h3> 12. Monochrome </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5ppq4h0oxe1xmt7yrcqt.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5ppq4h0oxe1xmt7yrcqt.jpg" alt="Alt Text" width="800" height="600"></a><br> Go monochrome is a black &amp; white landing page for mobile-based apps or extensions. This product includes native App &amp; Play Store buttons, features sections, FAQ lists, and artistic MIT license illustrations that you can include in your own project presentation.</p> <ul> <li>Darkmode supported</li> <li>Clean and tidy code</li> <li>Fully responsive on every screen</li> </ul> <p><strong><a href="https://www.wickedtemplates.com/viewports/app001" rel="noopener noreferrer">Live Demo</a> / <a href="https://gumroad.com/l/olYfd" rel="noopener noreferrer">Download</a></strong></p> <h3> 13. Shine </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fto6cskup7xw4xaa7g2au.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fto6cskup7xw4xaa7g2au.jpg" alt="Alt Text" width="800" height="600"></a><br> Shine is a free startup and app landing page template specially designed for attractive Businesses, websites, and digital services. It’s a free one-page product that comes with all essential sections and elements to launch several types of one-page sites with the mighty power of Tailwind.</p> <ul> <li>Free and premium versions</li> <li>Crafted for multiple uses and businesses</li> <li>500+ free icons included </li> </ul> <p><strong><a href="http://preview.graygrids.com/item/shine-tailwind-css-template/" rel="noopener noreferrer">Live Demo</a> / <a href="https://graygrids.com/templates/free-tailwind-template-shine/" rel="noopener noreferrer">Download</a></strong></p> <h3> 14. Screenshot </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk19v5nzqwngcjkefttnt.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk19v5nzqwngcjkefttnt.jpg" alt="Alt Text" width="800" height="600"></a><br> Screenshot is an open-sourced and bright landing page template with space for section browser screenshots and custom mockup illustrations. This template is pretty straightforward to set up thanks to Tailwind CSS and provides a fresh starting point page in a matter of minutes.</p> <ul> <li>Released under the MIT license</li> <li>Documented via Tailwind Toolbox </li> <li>Real size mockup screenshots</li> </ul> <p><strong><a href="https://www.tailwindtoolbox.com/templates/screenshot-landing-page-demo.php" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/tailwindtoolbox/Screenshot-Landing-Page" rel="noopener noreferrer">Download</a></strong></p> <h3> 15. Landing </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffsethq8x1atf8ybntg7v.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffsethq8x1atf8ybntg7v.jpg" alt="Alt Text" width="800" height="600"></a><br> Landing is a developer-friendly landing page template based on the latest coding practices a fully designed with a product-centric approach. With its cutting-edge frontend tool, you can customize the designs from the foundation and get a fresh template to start different new businesses.</p> <ul> <li>Quality checked design</li> <li>Set up guide included</li> <li>Expandable stater product</li> </ul> <p><strong><a href="https://tailwindtoolbox.github.io/Landing-Page/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/tailwindtoolbox/Landing-Page" rel="noopener noreferrer">Download</a></strong></p> <h3> 16. App Landing Page </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjw5bx7j117mb4kmescjj.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjw5bx7j117mb4kmescjj.jpg" alt="Alt Text" width="800" height="600"></a><br> Are you looking for a kick-ass Tailwind starter template for your new awesome web app? Look no further. This product comes with a pure light layout, mockup illustrations (for desktop, tablet, and mobile), App Store and Google Play buttons, and a set of eye-catching bubble shapes that you can easily change in colour and size.</p> <ul> <li>Main hero message</li> <li>Available with the latest release</li> <li>Twitter and Facebook social icons</li> </ul> <p><strong><a href="https://tailwindtoolbox.github.io/App-Landing-Page/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/tailwindtoolbox/App-Landing-Page" rel="noopener noreferrer">Download</a></strong></p> <h3> 17. Rainblur </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9epc8m93yewqoix2318e.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9epc8m93yewqoix2318e.jpg" alt="Alt Text" width="800" height="600"></a><br> Easily create a gorgeous landing page that collects inbox subscribers in no time with this dark, and colourful template. Thanks to the hero gradients and the creation of dynamic gradient-based texts you will no longer have the problem of people refusing to subscribe to your next release.</p> <ul> <li>Built-in dynamic palette</li> <li>Stunning transitions and transformations</li> <li>Hero for mockup presentations</li> </ul> <p><strong><a href="https://www.tailwindtoolbox.com/templates/rainblur-landing-page" rel="noopener noreferrer">Live Demo &amp; Download</a></strong></p> <h3> 18. Basic </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1pqm6n4bt9yxankryk6c.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1pqm6n4bt9yxankryk6c.jpg" alt="Alt Text" width="800" height="600"></a><br> Basic is the template of your choice if you want to draw user’s attention thanks to the amazing hand-drawn cartoon illustrations. All sections and features are coded in Basic following the latest practice of Tailwind CSS, so that it is easy to set up and customise also for non-coders.</p> <ul> <li>Directly support from the author</li> <li>One-time payment, no renewals</li> <li>Full package with the same license</li> </ul> <p><strong><a href="http://preview.graygrids.com/item/basic-tailwind-css-template/" rel="noopener noreferrer">Live Demo</a> / <a href="https://graygrids.com/templates/basic-tailwind-css-template/" rel="noopener noreferrer">Download</a></strong></p> <h3> 19. TailwindCSS Page Creator </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa566e9o5qha3hyh1s9gt.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa566e9o5qha3hyh1s9gt.jpg" alt="Alt Text" width="800" height="600"></a><br> Tails is the latest drag'n drop landing page creator built exclusively for TailwindCSS. This powerful tool contains over 150+ pre-coded blocks that you can mix and match to craft the perfect landing page for your next business project, web/mobile application, online service, and much more.</p> <ul> <li>Easily launch the app from the browser</li> <li>Fully optimised for mobile</li> <li>Created by designers and developers</li> </ul> <p><strong><a href="https://devdojo.com/tails" rel="noopener noreferrer">Live Demo &amp; Download</a></strong></p> <h3> 20. Tailblocks </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F834cv309946nhpc0j61l.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F834cv309946nhpc0j61l.jpg" alt="Alt Text" width="800" height="600"></a><br> Very similar to Tails, Tailblocks is a powerful landing page builder built on top of ready-to-use Tailwind CSS templates and blocks. This project provides a range of well-organised sections and features that you can easily integrate to create a brand new website in a matter of minutes.</p> <ul> <li>Palette variations and dark mode support</li> <li>Copy/paste sections into your project</li> <li>Released under an open-source license</li> </ul> <p><strong><a href="https://tailblocks.cc/" rel="noopener noreferrer">Live Demo &amp; Download</a></strong></p> <h3> Conclusion </h3> <p>Those were the top 20 templates for creating stunning landing pages using Tailwind CSS.<br> Now, let me turn this back to you: which ones did I miss? Is there any Tailwind-based template you used that I have not showcased here? Please let me know by commenting below.</p> html css webdev design Mary Amato Fri, 25 Sep 2020 12:24:14 +0000 https://dev.to/mariann93502220/15-awesome-tailwind-css-templates-and-themes-55jh https://dev.to/mariann93502220/15-awesome-tailwind-css-templates-and-themes-55jh <p>Tailwind CSS is a highly customizable CSS framework that gives you all of the building blocks you require to build custom user interfaces without any annoying dogmatic styles you have to struggle to override.</p> <p>Most CSS frameworks (e.g. Bootstrap), come with dozens of pre-built components that might help you move quickly at first but cause more pain than they cure when it comes time to make your site stand out with a custom design.</p> <p>Tailwind is different because it provides low-level utility classes that let you build completely custom designs without ever leaving your HTML.</p> <p>If you’re sick of fighting the framework, and overriding undesired styles, this list contains a vast collection of free and premium <strong>Tailwind CSS templates and themes</strong> that you can use to kickstart your next design/dev project with ease.</p> <p>All resources included in this are fully responsive and available for landing pages, websites, and application dashboards.</p> <h2> Best Tailwind CSS templates And Themes </h2> <h3> 1. <strong>Open PRO</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fw9mtk4k4ovbrcj7xdw1i.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fw9mtk4k4ovbrcj7xdw1i.png" alt="Open PRO TailwindCSS"></a><br> <strong><a href="https://cruip.com/demos/open-pro/" rel="noopener noreferrer">Live Demo</a> / <a href="https://cruip.com/" rel="noopener noreferrer">Download</a></strong></p> <p>Open PRO is a gorgeous landing page template that comes with a dark layout and a clean user interface. Thanks to the presence of multiple pages and components, this resource is an ideal solution for different kinds of SaaS and app websites.</p> <ul> <li>Premium template</li> <li>Multiple pages, sections, and components</li> <li>Available in HTML, React, and Vue</li> </ul> <h3> 2. <strong>Midone</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F4guuki2q45rqbg0463vd.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F4guuki2q45rqbg0463vd.png" alt="Midone"></a><br> <strong><a href="http://preview.themeforest.net/item/midone-vuejs-admin-dashboard-template/full_screen_preview/28123408?_ga=2.2289776.135722408.1600781484-671528386.1600779907" rel="noopener noreferrer">Live Demo</a> / <a href="https://themeforest.net/item/midone-vuejs-admin-dashboard-template/28123408" rel="noopener noreferrer">Download</a></strong></p> <p>This admin dashboard template is highly practical and fully responsive from its core. Designed precisely to fit various kinds of small and large devices, it comes with several unique pages and components that can help you build an admin Application quickly.</p> <ul> <li>Modular JS &amp; CSS Code</li> <li>File manager applications</li> <li>FREE lifetime updates</li> </ul> <h3> 3. <strong>D-Board</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F6hanjymvpm0a35aq5qmz.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F6hanjymvpm0a35aq5qmz.png" alt="D-Board"></a><br> <strong><a href="https://preview.themeforest.net/item/dboard-nextjs-admin-template/full_screen_preview/27870045?_ga=2.104284613.472086540.1600781564-671528386.1600779907" rel="noopener noreferrer">Live Demo</a> / <a href="https://themeforest.net/item/dboard-nextjs-admin-template/27870045" rel="noopener noreferrer">Download</a></strong></p> <p>D-board is an exceptional and elegant dashboard template built on top of Next.js, Redux, and Tailwind CSS. It includes over 100 elements (for each layout) and several reusable widgets to help you build your next Tailwind project or web application.</p> <ul> <li>Light and dark versions</li> <li>Automatic code splitting</li> <li>2 layouts and 100+ elements</li> </ul> <h3> 4. <strong>SaasFolio</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Ffjgdv235rf5lrvuezufb.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Ffjgdv235rf5lrvuezufb.png" alt="SaasFolio"></a><br> <strong><a href="https://www.landingkit.com/templates/saasfolio/tailwind/" rel="noopener noreferrer">Live Demo</a> / <a href="https://www.landingfolio.com/templates/products/saasfolio" rel="noopener noreferrer">Download</a></strong></p> <p>SaasFolio is a conversion-driven landing page template for SaaS products and startups. It differences itself from other similar resources, by focussing on strong sales copy and content hierarchy. Especially, the well-written copy can help you craft a strong message to convert your visitors into customers.</p> <ul> <li>95+ Google PageSpeed</li> <li>Complete W3C Valid HTML5 Files</li> <li>Detailed documentation</li> </ul> <h3> 5. <strong>Vue Tailwind Admin</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fye2mkqbkgrk081rrwr2l.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fye2mkqbkgrk081rrwr2l.png" alt="Vue Tailwind Admin"></a><br> <strong><a href="https://github.com/Murked/vue-tailwind-admin" rel="noopener noreferrer">Live Demo &amp; Download</a></strong></p> <p>Vue Tailwind Admin is a free admin theme with a fresh and spicy layout inspired by the latest design trends. The user interface follows sheets of paper following various layers that bring depth and order regardless of the complexity for different kinds of visitors.</p> <ul> <li>Customisable configuration</li> <li>Control of the sidebar through components</li> <li>100% open-source</li> </ul> <h3> 6. <strong>Treo</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fogz6nazt8e46wdur4pl5.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fogz6nazt8e46wdur4pl5.png" alt="Treo"></a><br> <strong><a href="https://preview.themeforest.net/item/treo-angular-9-admin-template/full_screen_preview/26276456?_ga=2.223392155.1215015076.1600781634-671528386.1600779907" rel="noopener noreferrer">Live Demo</a> / <a href="https://themeforest.net/item/treo-angular-9-admin-template/26276456" rel="noopener noreferrer">Download</a></strong></p> <p>The multi-layout setup of Treo allows using multiple templates without making any major changes to the general structure of the template. Being able to set different routes makes Treo very flexible as it allows having any kind of page design within the same codebase.</p> <ul> <li>Multiple theme layouts.</li> <li>Ability to set a different layout per route.</li> <li>Starter project included for faster development.</li> </ul> <h3> 7. <strong>Tailwind Starter Kit</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fgie2evuyi44pluyyd8to.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fgie2evuyi44pluyyd8to.png" alt="Tailwind Starter Kit"></a><br> <strong><a href="https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation" rel="noopener noreferrer">Live Demo &amp; Download</a></strong></p> <p>Tailwind Starter Kit is fully open-source, and It doesn’t change or add any CSS to the already present code in Tailwind CSS. This product features multiple HTML elements and, it comes with dynamic components/sections for ReactJS, Vue, and Angular.</p> <ul> <li>16 dynamic Javascript components</li> <li>120 fully Coded CSS elements</li> <li>4 pre-built pages</li> </ul> <h3> 8. <strong>Topson</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fqh2uejxsc4xkia6lin9r.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fqh2uejxsc4xkia6lin9r.png" alt="Topson"></a><br> <strong><a href="https://preview.themeforest.net/item/topson-chat-messenger-app-html-template/full_screen_preview/26988802?_ga=2.216361878.1862937.1600781777-671528386.1600779907" rel="noopener noreferrer">Live Demo</a> / <a href="https://themeforest.net/item/topson-chat-messenger-app-html-template/26988802" rel="noopener noreferrer">Download</a></strong></p> <p>Tompson is a fully customisable web UI-based theme and app dashboard application. This template is composed carefully to fit various kinds of device screens, and it includes unique pages and elements which can help you build a fresh chat application based on Tailwind CSS.</p> <ul> <li>Fully Responsive Layout</li> <li>Includes login &amp; register page</li> <li>SASS Powered</li> </ul> <h3> 9. <strong>Screenshot Landing Page</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fn4zd5bmogams7mkktj0s.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fn4zd5bmogams7mkktj0s.png" alt="Screenshot Landing Page"></a><br> <strong><a href="https://www.tailwindtoolbox.com/templates/screenshot-landing-page-demo.php" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/tailwindtoolbox/Screenshot-Landing-Page" rel="noopener noreferrer">Download</a></strong></p> <p>Screenshot Landing Page is an open-source and versatile landing page template with space for section browser screenshots and custom illustrations. With this result, you can affect your users by showing a truly clean and elegant look for every occasion.</p> <ul> <li>Browser screenshots and illustrations</li> <li>CDN hosted with Tailwind CSS file</li> <li>Wisely coded and fully maintained</li> </ul> <h3> 10. <strong>Cleopatra</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fjgyhe0t72f9dak98b2y6.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fjgyhe0t72f9dak98b2y6.png" alt="Cleopatra"></a><br> <strong><a href="https://moesaid.github.io/cleopatra/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/moesaid/cleopatra" rel="noopener noreferrer">Download</a></strong></p> <p>If you’re looking for an admin dashboard template that was developed having your customers in mind, look no further. Cleopatra is a powerful admin dashboard built on top of Tailwind CSS, and available with rich features and easy to use packs and configurations.</p> <ul> <li>MIT license</li> <li>Browser compatibility</li> <li>Big custom shortcode collection</li> </ul> <h3> 11. <strong>Tailwind Toolbox (Landing Page)</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fn24e4yh1cvnondm7fw9j.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fn24e4yh1cvnondm7fw9j.png" alt="Tailwind Toolbox (Landing Page)"></a><br> <strong><a href="https://tailwindtoolbox.github.io/Landing-Page/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/tailwindtoolbox/Landing-Page" rel="noopener noreferrer">Download</a></strong></p> <p>This landing page template is suitable for any digital or physical product marketing purpose, and besides that, It can be used also as a sales funnel to increase conversion rate. Last but not least, it is fully responsive, customisable, and documented including dynamic contact forms.</p> <ul> <li>Free Google Fonts</li> <li>Unique and modern layout</li> <li>Quality checked by tons of users</li> </ul> <h3> 12. <strong>Tailwind Admin</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F6r8stnc4jgz3n4csc1zu.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F6r8stnc4jgz3n4csc1zu.png" alt="Tailwind Admin"></a><br> <strong><a href="https://tailwindadmin.netlify.app/index.html" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/tailwindadmin/admin" rel="noopener noreferrer">Download</a></strong></p> <p>Tailwind Admin is a conservative and yet modern premium Tailwind CSS Dashboard/Admin Template. Whether you’re creating a web application, dashboard, or SaaS apps — Tailwind Admin’s feature-rich segments and demo pages to help you create the best possible web application projects.</p> <ul> <li>Premium scalable vector graphics</li> <li>Flexible charts and graphs</li> <li>Drag’n’drop file-attach uploads</li> </ul> <h3> 13. <strong>Tailwind Toolbox (Admin Dashboard)</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fe5c7015jb3nr4t7sv7mc.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fe5c7015jb3nr4t7sv7mc.png" alt="Tailwind Toolbox (Admin Dashboard)"></a><br> <strong><a href="https://tailwindtoolbox.github.io/Admin-Template/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/tailwindtoolbox/Admin-Template" rel="noopener noreferrer">Download</a></strong></p> <p>Toolbox Admin is a fully featured dashboard and admin template that comes with tones of well designed UI elements, components, sections and pages. The super clean and flexible layout enables you to easily build responsive web apps, and It can also be used to create custom admin panels, CRM, CMS, etc.</p> <ul> <li>Built on latest Tailwind (v 1.8.7)</li> <li>Easy development and tooling</li> <li>Vertical and horizontal layouts</li> </ul> <h3> 14. <strong>Concavo</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fug3pd7fdscxwvzliw2uc.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fug3pd7fdscxwvzliw2uc.png" alt="Concavo"></a><br> <strong><a href="https://preview.themeforest.net/item/concavo-react-tailwind-css-admin-template/full_screen_preview/26535790?_ga=2.132164295.878422323.1600781709-671528386.1600779907" rel="noopener noreferrer">Live Demo</a> / <a href="https://themeforest.net/item/concavo-react-tailwind-css-admin-template/26535790" rel="noopener noreferrer">Download</a></strong></p> <p>Concavo is an exceptional, sensitive admin template built with React, Redux, Next.js, Tailwind CSS, and SASS. It includes +100 ingredients in every layout, and lots of custom made widgets to support you kickstart your next project or web-based interface.</p> <ul> <li>2 example dashboards</li> <li>Automatic code splitting</li> <li>Hot code reloading and universal rendering</li> </ul> <h3> 15. <strong>Tailwind Admin Template</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fdjn9lq2obd7v7rd1pm65.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fdjn9lq2obd7v7rd1pm65.png" alt="Tailwind Admin Template"></a><br> <strong><a href="https://tailwind-admin-demo.dgrzyb.me/index.html" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/davidgrzyb/tailwind-admin-template" rel="noopener noreferrer">Download</a></strong></p> <p>Create a user interface that stands out — a design that is attractive, slick, and delivers the ultimate user experience result using Tailwind Admin Template, the latest product from David G to help you streamline your fresh UI and customer-centric application.</p> <ul> <li>Interactive graphs and charts</li> <li>Lifetime free updates</li> <li>Pseudo-Class variants</li> </ul> <h3> 16. <strong>App Landing Page Template</strong> </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Flpzcl1vs9iu0a00fdrw1.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Flpzcl1vs9iu0a00fdrw1.png" alt="App Landing Page Template"></a><br> <strong><a href="https://tailwindtoolbox.github.io/App-Landing-Page/" rel="noopener noreferrer">Live Demo</a> / <a href="https://github.com/tailwindtoolbox/App-Landing-Page" rel="noopener noreferrer">Download</a></strong></p> <p>A pixel perfect multi-purpose landing page pack crafted with terrific attention to details and quality of the code. It was designed to assist developers and makers with the promotion of mobile apps, online software, page presentations, and startup validations.</p> <ul> <li>One click demo installs</li> <li>Powerful template options</li> <li>Modern mobile navigation</li> </ul> <h2> Conclusion </h2> <p>I hope this list can help you kickstart your next Tailwind CSS project with ease. If you’ve already used Tailwind CSS in your projects, please let me know by commenting below.</p> html css webdev design