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.
- Elemento UI Kit (3000+ UI Components)
- Aveit - Professional Business Landing Page
- SAAS Landing Page with 98+ Demos
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.
Top comments (0)