Intro
TailBlocks is a project that provides multiple templates built using Tailwind CSS.
It provides the HTML code that can easily be copied.
Sample Site built using TailBlocks:
Link: demo
Let's start
Step 1) Create a new HTML file
<html/>
<head>
<title>TailWind CSS block</title>
</head>
<body>
</body>
</html>
Step 2) Add the CDN of TailWind CSS.
TailBlock uses TailWindCSS for css properties
<html/>
<head>
<title>TailWind CSS block</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
</body>
</html>
Step 3) Select Components from TailBlocks
Visit TailBlocks, there you can see list of components in the left sidebar
Find Header components from the left sidebar and select one component from it then copy its code in the HTML file we created.
You can copy its code by first clicking on ViewCode then Copy To Clipboard present in the Header of TailBlocks site.
This is the code i copied from the header component
<html/>
<head>
<title>TailWind CSS block</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<header class="text-gray-700 body-font">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
<span class="ml-3 text-xl">tailblocks</span>
</a>
<nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
<a class="mr-5 hover:text-gray-900">First Link</a>
<a class="mr-5 hover:text-gray-900">Second Link</a>
<a class="mr-5 hover:text-gray-900">Third Link</a>
<a class="mr-5 hover:text-gray-900">Fourth Link</a>
</nav>
<button class="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">Button
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
</div>
</header>
</body>
</html>
OUTPUT:
TailBlock also provides options to change the color of the components.
Step 4) Try different components and build a good looking landing page
My Thought about TailBlocks:
It's good for creating a site in less time, however maintaining and customizing the code will be full of effort.
At last, I will prefer TailBlocks to impress my friends ๐
Thanks for reading. Happy Coding ๐
Top comments (0)