Create responsive web components quickly with TailBlocks

Souvik Paul - Jun 17 '20 -

Recently I got to know about Tailwind CSS. It's a highly customizable low-level CSS framework that can help you to create beautiful websites quickly and easily, according to them.

They have a ready to use block building tool named TailBlocks and this article is all about it.

How to use

To use TailBlocks, first you have to add the Tailwind CSS file to your Html code. Or you can add their CDN build.

Step 1

Add this code to your html.

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Or, go to this page for all links: https://tailwindcss.com/docs/installation/

Step 2

Go to https://mertjf.github.io/tailblocks/ and choose a block.

Step 3

Click on the 'View Code' button and copy the code of that block.

Then, paste the code inside body tag.

To add another block, do the same procedure again.

Here is a quick demo of a complete landing page built just using Tailblocks along with Tailwind CSS.

{ View Demo }

Video Tutorial

Best Web Components:

Here're some of the best professional web components & landing pages for your commercial web projects.

Disclaimer:

This technique can never replace the traditional web development. But, if you know html, css very well, you can use Tailblocks to deploy your/your client's sites quickly and easily.