Ready-to-use Tailwind CSS blocks

Template feature image



This project provides multiple blocks built using Tailwind CSS that you can use in your own projects. This project is not a dependency that you add to your project but instead provides you with HTML that you can easily copy and paste into your own project.


  • 60+ Blocks
  • Responsive
  • Dark Mode Support
  • Color Variations

To use the project:

  1. Go to the Tailblocks
  2. Select a block that you would like to use.
  3. Choose a color from the color palette for the block you selected.
  4. Select whether you would like to use light or dark mode with the dark/light toggle button.
  5. Click the "View Code" button.
  6. Copy/paste into your project.
  7. 🎉

Get notified when we add new designs.

Twice a month I share the best Tailwind templates, UI kits and components in my newsletter. 30 Tailwind hackers find it useful. I'd love you to join.