Tailwind CSS UI Components, Blocks and Templates
Tailwind CSS UI Components, Blocks, Sections, and Templates specifically crafted for Web Apps, Marketing, E-Commerce, Dashboards, and more. Now with support for HTML and React!
Explore over 500+ multipurpose, free and premium Tailwind UI components, designed for easy copy-pasting, and empowering you to create high-quality, custom website interfaces. With TailGrids, you can effortlessly build data-rich dashboards, e-commerce shops, web app user interfaces, high-converting landing pages, complete website frontends, site templates, and more - all without coding or designing from scratch.
Main Features
All essential UI components and features you can expect from a comprehensive UI library to kickstart your Tailwind CSS web project.
500+ UI Components
Beautifully designed 500+ Tailwind Components for HTML and React. From basic elements such as buttons and forms to fully-featured blocks like testimonials and pricing tables.
Easy to Use
Easy to use copy-paste interface and without any complex dependencies. Copy the code snippet and paste it anywhere on your tailwind project or start a new one.
HTML, React and More
Available in HTML and React, and it also allows you to easily convert the same code for other frameworks, such as Svelte, Vue, etc., without the need to rewrite entire component.
Tailwind CSS
Utilizing the most recent version of Tailwind CSS, and featuring a highly minimalistic yet modern design, ensures an exceptional developer, designer and coding experience.
Refreshing Design
Clean, refreshing, and high-quality design that gives positive vibes to end-users. TailGrids maintains a consistent and clean design by following modern trends with clarity.
Developer Friendly
Developer experience is our #1 priority, entire library is designed, coded, and organized in a way that saves hundreds of hours development time and increases productivity.
Figma Source File
Full Figma design source file will be provided depending on the plan you are in, so you can use it to prototype, experiment, play or adjust depending on requirements.
13 Example Templates
12+ ready-to-use templates for dashboard, ecommerce, landing page, business and more. Crafted using TailGrids components, and packed with download package.
Fully Responsive
Fully responsive and compatible with all modern browsers, every single element of TailGrids is cross-tested on all major browsers and mobile screen sizes.
Available in HTML and React
Components are now available in HTML and React, with the added advantage of effortlessly converting into other frameworks such as Svelte, Vue, etc., without the need to rewrite the entire component.
<!-- ====== Hero Section Start -->
<div
class="bg-dark relative z-10 py-14 md:py-16 xl:py-20"
>
<div class="bg-primary absolute top-0 right-0 z-[-1] h-full w-1/2"></div>
<div class="container mx-auto">
<div class="-mx-4 flex flex-wrap items-center">
<div class="w-full px-4">
<div class="mx-auto max-w-[550px] text-center">
<span class="mb-2 block text-xl font-medium text-white">
We Are Creative
</span>
<h1
class="mb-2 text-[60px] font-bold leading-tight text-white md:text-[100px]"
>
Branding
</h1>
<h2 class="mb-6 text-[30px] font-semibold text-white md:text-[40px]">
Digital Agency
</h2>
<p
class="mx-auto mb-10 max-w-[460px] text-base font-medium text-[#C8CBCE]"
>
Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod
tempor incididunt labore et dolore.
</p>
<a
href="javascript:void(0)"
class="text-dark mb-2 inline-flex items-center justify-center rounded bg-white py-3 px-6 text-center text-base font-medium transition hover:bg-opacity-90"
>
Discover More
</a>
</div>
</div>
</div>
</div>
<span class="absolute bottom-0 left-1/2 -translate-x-1/2">
<svg
width="77"
height="77"
viewBox="0 0 77 77"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="1.66343"
cy="75.3366"
r="1.66343"
transform="rotate(-90 1.66343 75.3366)"
fill="white"
/>
<circle
cx="1.66343"
cy="31.7545"
r="1.66343"
transform="rotate(-90 1.66343 31.7545)"
fill="white"
/>
<circle
cx="16.3016"
cy="75.3366"
r="1.66343"
transform="rotate(-90 16.3016 75.3366)"
fill="white"
/>
<circle
cx="16.3016"
cy="31.7545"
r="1.66343"
transform="rotate(-90 16.3016 31.7545)"
fill="white"
/>
<circle
cx="30.9398"
cy="75.3366"
r="1.66343"
transform="rotate(-90 30.9398 75.3366)"
fill="white"
/>
<circle
cx="30.9398"
cy="31.7545"
r="1.66343"
transform="rotate(-90 30.9398 31.7545)"
fill="white"
/>
<circle
cx="45.578"
cy="75.3366"
r="1.66343"
transform="rotate(-90 45.578 75.3366)"
fill="white"
/>
<circle
cx="45.578"
cy="31.7545"
r="1.66343"
transform="rotate(-90 45.578 31.7545)"
fill="white"
/>
<circle
cx="60.2162"
cy="75.3361"
r="1.66343"
transform="rotate(-90 60.2162 75.3361)"
fill="white"
/>
<circle
cx="74.6634"
cy="75.3361"
r="1.66343"
transform="rotate(-90 74.6634 75.3361)"
fill="white"
/>
<circle
cx="60.2162"
cy="31.7545"
r="1.66343"
transform="rotate(-90 60.2162 31.7545)"
fill="white"
/>
<circle
cx="74.6634"
cy="31.7545"
r="1.66343"
transform="rotate(-90 74.6634 31.7545)"
fill="white"
/>
<circle
cx="1.66343"
cy="60.6984"
r="1.66343"
transform="rotate(-90 1.66343 60.6984)"
fill="white"
/>
<circle
cx="1.66343"
cy="17.1164"
r="1.66343"
transform="rotate(-90 1.66343 17.1164)"
fill="white"
/>
<circle
cx="16.3016"
cy="60.6984"
r="1.66343"
transform="rotate(-90 16.3016 60.6984)"
fill="white"
/>
<circle
cx="16.3016"
cy="17.1164"
r="1.66343"
transform="rotate(-90 16.3016 17.1164)"
fill="white"
/>
<circle
cx="30.9398"
cy="60.6984"
r="1.66343"
transform="rotate(-90 30.9398 60.6984)"
fill="white"
/>
<circle
cx="30.9398"
cy="17.1164"
r="1.66343"
transform="rotate(-90 30.9398 17.1164)"
fill="white"
/>
<circle
cx="45.578"
cy="60.6984"
r="1.66343"
transform="rotate(-90 45.578 60.6984)"
fill="white"
/>
<circle
cx="45.578"
cy="17.1164"
r="1.66343"
transform="rotate(-90 45.578 17.1164)"
fill="white"
/>
<circle
cx="60.2162"
cy="60.6984"
r="1.66343"
transform="rotate(-90 60.2162 60.6984)"
fill="white"
/>
<circle
cx="74.6634"
cy="60.6984"
r="1.66343"
transform="rotate(-90 74.6634 60.6984)"
fill="white"
/>
<circle
cx="60.2162"
cy="17.1164"
r="1.66343"
transform="rotate(-90 60.2162 17.1164)"
fill="white"
/>
<circle
cx="74.6634"
cy="17.1164"
r="1.66343"
transform="rotate(-90 74.6634 17.1164)"
fill="white"
/>
<circle
cx="1.66343"
cy="46.0602"
r="1.66343"
transform="rotate(-90 1.66343 46.0602)"
fill="white"
/>
<circle
cx="1.66343"
cy="2.47768"
r="1.66343"
transform="rotate(-90 1.66343 2.47768)"
fill="white"
/>
<circle
cx="16.3016"
cy="46.0602"
r="1.66343"
transform="rotate(-90 16.3016 46.0602)"
fill="white"
/>
<circle
cx="16.3016"
cy="2.47768"
r="1.66343"
transform="rotate(-90 16.3016 2.47768)"
fill="white"
/>
<circle
cx="30.9398"
cy="46.0602"
r="1.66343"
transform="rotate(-90 30.9398 46.0602)"
fill="white"
/>
<circle
cx="30.9398"
cy="2.47768"
r="1.66343"
transform="rotate(-90 30.9398 2.47768)"
fill="white"
/>
<circle
cx="45.578"
cy="46.0602"
r="1.66343"
transform="rotate(-90 45.578 46.0602)"
fill="white"
/>
<circle
cx="45.578"
cy="2.47768"
r="1.66343"
transform="rotate(-90 45.578 2.47768)"
fill="white"
/>
<circle
cx="60.2162"
cy="46.0602"
r="1.66343"
transform="rotate(-90 60.2162 46.0602)"
fill="white"
/>
<circle
cx="74.6634"
cy="46.0602"
r="1.66343"
transform="rotate(-90 74.6634 46.0602)"
fill="white"
/>
<circle
cx="60.2162"
cy="2.47817"
r="1.66343"
transform="rotate(-90 60.2162 2.47817)"
fill="white"
/>
<circle
cx="74.6634"
cy="2.47817"
r="1.66343"
transform="rotate(-90 74.6634 2.47817)"
fill="white"
/>
</svg>
</span>
</div>
<!-- ====== Hero Section End -->
500+ Essential UI Components and Counting
Handcrafted, ready-to-use, diverse, free and premium UI components for rapid MVP development. Just Browse, copy-paste, and you're done!
Pixel Perfect Tailwind UI Components that you can copy-paste
Building Web User-interface using Tailwind CSS has never been easier. All you need to choose a block you need and copy-paste the block on your project.
Get Access Now!
Everything That You Can Expect From a Progressive UI Library
One-time payment, rich-documentation and human support and much more ...
Free and Pro Components
Besides Premium plans, TailGrids also provides a free core version. With decent number of free UI components which is completely free and open-source.
Rich Documentation
Dedicated documentation site where well-explained everything you need to know. So you can kickstart your project in a minute.
Premier Support
Stuck with something, confused or need help? we are here ready to help. Chat us on discord or submit support ticket, we will get back to you withing 24hrs.
Regular updates
Updates are lifeline of a quality product, we will keep updating components depending on latest Tailwind CSS release also keep including more components in major updates
One-time Payment
Yes, there is no recurring payments or monthly fee or update fee. You pay one-time get access to components for lifetime and use for lifetime with your projects.
Developer Friendly
Components are coded in way that, all you need to copy-paste. Every single components are well-documented with comments.
Complete UI Toolkit for Tailwind
Massive number of components, templates, open-source version, free perks and more ...
30982
Free and Pro Downloads
500+
UI Components
13+
Pre-built Templates
600+
GitHub Stars
Wall of Love
Reviews and testimonials from users
TailGrids is such a great help when comes to building landing page and web app UI for Tailwind CSS web projects with just copy-paste method! is really liked the design and it is easy to get started which saves tons of time & money for developers and designers with Figma files & source code!
Fajar Siddiq
Serial Entrepreneur, Singapore
TailGrids comes with all the essential UI components you need to create beautiful websites based on Tailwind CSS. The design consistency & variations of UI components, clean codebase, copy-paste interface, and detailed documentation made this UI library very organized & super easy to use.
Marko Denic
Developer Advocate and Software Engineer
Since I like doing engineering parts only, designing and coding landing pages is great blocker for me while I develop MVPs or try to validate a new product idea. TailGrids seems have great collection of UI components that also comes relevant contents and Figma file that I can use to play or create prototype before diving into code.
Athar Ahmed
Founder, ScrapeOwl and Senior Software Engineer @Aide
A landing page is the first thing your customers will see before even trying the project. You want to make sure it looks great, and this is where TailGrids comes to help! It provides a collection of beautiful hand-crafted uniquely-looking components that you can use to build your startup website, web application, or dashboard.
Ostap Brehin
Fullstack Developer and Building NotionMailer
I Didn’t try their coded version yet but reviewed the Figma source file for design guidelines, consistency, and design quality of components. I must say, these components feel extensive, minimal, and highly customizable in many cases. Looking forward to seeing upcoming UI components and whats they offer next.
Abu Umayer
Manager, Product Design @Truck Lagbe
Having used almost all the Tailwind CSS UI toolkits and resources, I can confidently say that TailGrids is the easiest and most comprehensive Tailwind UI Library with almost all essential Tailwind CSS components you may need to build web UI faster. Specially, code explorer and copy-paste inteface is time-saver. Highly recommended!
Kamal Hosen
Software Developer @HappyAddons
Get Access Now
Start Building Yor Own Tailwind CSS UI Now!
Begin with ready-to-use components and construct a web UI for your projects based on your requirements. Each Tailwind CSS component is Beautifully designed and coded to streamline your work and save time.
Get Started
