Tailwind Blocks | Pinegrow Web Editor

Tailwind Blocks

Tailwind Visual Editor comes with a rich library of ready-made blocks that you can use to quickly create good-looking Tailwind CSS projects.

Tailwind Blocks can be added to any Tailwind CSS 2 project.

Updates

March 3, 2021 – Added Directory template and new blocks categories Shop and Forms.

Categories

Use 100s of blocks from categories such as headers, content and testimonials to quickly build a website. 

Preview all Blocks online

Browse the Tailwind Blocks library

Templates

In addition to blocks, Tailwind Blocks come with two ready-made templates that you can use to jump-start website projects:

Both templates are good examples of what can be done with Blocks. Of course, you can use Tailwind CSS theming to customize the design.

You can preview the templates online:

Interactive Blocks

Blocks include interactive elements like testimonial sliders and collapsable headers. Interactions are implemented with GreenSock-powered Pinegrow Interactions. Pinegrow Interactions license is not needed for using these blocks, only if you would want to customize the interactions.

SVG icons and dividers

The library also contains 1000s of SVG icons and dividers. You can use text and background color to easily customize divider colors:

Activating Blocks

Blocks tab is automatically added to the Library panel for all Tailwind CSS project. You can also manually activate (or deactivate) it in File -> Manage frameworks & plugins:

Adding Blocks to the page

To add blocks to the page, simply drag them from the Blocks Library panel:

Then, use all of Pinegrow’s visual tools to edit the content and customize the design.

Use the dropdown menu to quickly navigate between Blocks categories:

Use Blocks with other libraries

Tailwind Blocks can be used on their own or in combination with other libraries, such as Tailwind UI:

License

You can:

  • Use Tailwind Blocks in personal and commercial projects.
  • Create templates and give them away for free or sell them in marketplaces.
  • Do anything else that is not listed in the “You can’t” section.

You can’t:

  • Integrate Tailwind Blocks into a website builder.
  • Distribute Tailwind Blocks as a library, either as a whole or as a part of another library.