DesignCools

Tailblocks: Ready to use blocks built using Tailwind CSS

—

by

designcools
in

Tailblocks is a free, open-source collection of ready-to-use UI components built with Tailwind CSS.

In the ever-evolving field of web development, creating visually stunning, user-friendly interfaces is a time-consuming task.

Developers and designers often juggle between coding custom styles and ensuring responsiveness across devices.

This is where Tailblocks, a free, open-source collection of pre-designed UI blocks built using Tailwind CSS, becomes an invaluable tool.

Tailblocks streamlines the design process, offering a library of customizable components that enable developers to focus on functionality rather than reinventing the wheel for each project.

It simplifies the web development process by providing pre-designed blocks that developers can customize and combine to create modern, responsive websites quickly.

Tailblocks is particularly helpful for developers looking to save time without compromising on quality and design consistency.

Preview

TAGS

Explore Tailblocks Design

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam cum sed sunt fugit, sequi tempore rem et voluptatem autem delectus voluptas dolor quaerat, alias eum accusantium cumque reprehenderit porro culpa.

Read More 1.2K 6
Peter Parker UI Designer
TAGS

Explore Tailblocks Design

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam cum sed sunt fugit, sequi tempore rem et voluptatem autem delectus voluptas dolor quaerat, alias eum accusantium cumque reprehenderit porro culpa.

Read More 1.2K 6
Peter Parker UI Designer

Show Code

<div class="overflow-hidden">
    <div class="max-w-7xl px-4 py-12 mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12">
            <div class="p-12 flex flex-col items-start">
                <span class="inline-block py-1 px-2 rounded-md bg-green-900 text-white text-xs font-medium tracking-widest">TAGS</span>
                <h3 class="sm:text-3xl cursor-pointer text-2xl font-medium text-black mt-4 mb-4 line-clamp-4">Explore Tailblocks Design</h3>
                <p class="leading-relaxed mb-8">
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam cum sed sunt fugit, sequi tempore rem et voluptatem autem delectus voluptas dolor quaerat, alias eum accusantium cumque reprehenderit porro culpa.
                </p>
                <div class="flex items-center gap-3 flex-wrap pb-4 mb-4 border-b border-gray-200 mt-auto w-full">
                    <a class="text-blue-700 font-light cursor-pointer flex items-center">Read More </a>
                    <span class="text-gray-600 inline-flex items-center ml-auto leading-none text-sm py-1 pr-3 border-r border-gray-300">
                        <svg xmlns="http://www.w3.org/2000/svg" width="22" class="mr-1" height="22" fill="currentColor" viewBox="0 0 256 256">
                            <path
                                d="M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"
                            ></path>
                        </svg>
                        1.2K
                    </span>
                    <span class="text-gray-600 inline-flex items-center leading-none text-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="mr-1" viewBox="0 0 256 256">
                            <path
                                d="M128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24Zm0,192a87.87,87.87,0,0,1-44.06-11.81,8,8,0,0,0-6.54-.67L40,216,52.47,178.6a8,8,0,0,0-.66-6.54A88,88,0,1,1,128,216Z"
                            ></path>
                        </svg>
                        6
                    </span>
                </div>
                <a class="inline-flex items-center">
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#bbb" viewBox="0 0 256 256">
                            <path
                                d="M172,120a44,44,0,1,1-44-44A44.05,44.05,0,0,1,172,120Zm60,8A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88.09,88.09,0,0,0-91.47-87.93C77.43,41.89,39.87,81.12,40,128.25a87.65,87.65,0,0,0,22.24,58.16A79.71,79.71,0,0,1,84,165.1a4,4,0,0,1,4.83.32,59.83,59.83,0,0,0,78.28,0,4,4,0,0,1,4.83-.32,79.71,79.71,0,0,1,21.79,21.31A87.62,87.62,0,0,0,216,128Z"
                            ></path>
                        </svg>
                    </div>
                    <span class="flex-grow flex flex-col pl-4">
                        <span class="font-medium">Peter Parker</span>
                        <span class="text-gray-600 text-xs">UI Designer</span>
                    </span>
                </a>
            </div>
             <div class="p-12 flex flex-col items-start">
                <span class="inline-block py-1 px-2 rounded-md bg-green-900 text-white text-xs font-medium tracking-widest">TAGS</span>
                <h3 class="sm:text-3xl cursor-pointer text-2xl font-medium text-black mt-4 mb-4 line-clamp-4">Explore Tailblocks Design</h3>
                <p class="leading-relaxed mb-8">
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam cum sed sunt fugit, sequi tempore rem et voluptatem autem delectus voluptas dolor quaerat, alias eum accusantium cumque reprehenderit porro culpa.
                </p>
                <div class="flex items-center gap-3 flex-wrap pb-4 mb-4 border-b border-gray-200 mt-auto w-full">
                    <a class="text-blue-700 font-light cursor-pointer flex items-center">Read More </a>
                    <span class="text-gray-600 inline-flex items-center ml-auto leading-none text-sm py-1 pr-3 border-r border-gray-300">
                        <svg xmlns="http://www.w3.org/2000/svg" width="22" class="mr-1" height="22" fill="currentColor" viewBox="0 0 256 256">
                            <path
                                d="M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"
                            ></path>
                        </svg>
                        1.2K
                    </span>
                    <span class="text-gray-600 inline-flex items-center leading-none text-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="mr-1" viewBox="0 0 256 256">
                            <path
                                d="M128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24Zm0,192a87.87,87.87,0,0,1-44.06-11.81,8,8,0,0,0-6.54-.67L40,216,52.47,178.6a8,8,0,0,0-.66-6.54A88,88,0,1,1,128,216Z"
                            ></path>
                        </svg>
                        6
                    </span>
                </div>
                <a class="inline-flex items-center">
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#bbb" viewBox="0 0 256 256">
                            <path
                                d="M172,120a44,44,0,1,1-44-44A44.05,44.05,0,0,1,172,120Zm60,8A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88.09,88.09,0,0,0-91.47-87.93C77.43,41.89,39.87,81.12,40,128.25a87.65,87.65,0,0,0,22.24,58.16A79.71,79.71,0,0,1,84,165.1a4,4,0,0,1,4.83.32,59.83,59.83,0,0,0,78.28,0,4,4,0,0,1,4.83-.32,79.71,79.71,0,0,1,21.79,21.31A87.62,87.62,0,0,0,216,128Z"
                            ></path>
                        </svg>
                    </div>
                    <span class="flex-grow flex flex-col pl-4">
                        <span class="font-medium">Peter Parker</span>
                        <span class="text-gray-600 text-xs">UI Designer</span>
                    </span>
                </a>
            </div>
        </div>
    </div>
</div>

Benefits of Using Tailblocks

  1. Time Efficiency: Reduces the need for designing and coding UI components from scratch.
  2. Modern Aesthetics: Provides sleek, professional designs that align with current UI/UX trends.
  3. Beginner-Friendly: Ideal for developers new to Tailwind CSS or those who want to focus on functionality over design.

Preview

Cars Model Design

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non ad excepturi porro quam modi quia fugit, officiis quo, atque dolorem distinctio aliquid magnam eum optio laudantium ullam at sed neque.

content

CATEGORY

SKODA KUSHAQ

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Modi non, explicabo assumenda possimus.

Show Code

<div class="max-w-7xl px-4 py-12 mx-auto">
    <div class="flex flex-wrap w-full mb-10 lg:mb-20">
        <div class="lg:w-1/2 w-full mb-6 lg:mb-0">
            <h1 class="sm:text-3xl text-2xl font-medium mb-2">Cars Model Design</h1>
            <div class="h-1 w-20 bg-red-800 rounded"></div>
        </div>
        <p class="lg:w-1/2 w-full leading-relaxed text-gray-500">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Non ad excepturi porro quam modi quia fugit, officiis quo, atque dolorem distinctio aliquid magnam eum optio laudantium ullam at sed neque.
        </p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2">
        <div class="rounded-lg overflow-hidden group relative">
            <img class="rounded w-full object-cover" src="https://designcools.com/wp-content/uploads/2024/11/Screenshot-2024-11-26-at-1.59.39 PM.png" alt="content" />
            <div class="group-hover:opacity-100 opacity-0 transition duration-500 absolute top-0 left-0 h-full w-full bg-[rgba(0,0,0,0.7)]">
                <div class="h-full w-full inline-flex flex-col justify-end p-6">
                    <h3 class="tracking-wider text-white text-xs font-medium mb-2"><span class="bg-red-800 text-white py-1 rounded px-2">CATEGORY</span></h3>
                    <h2 class="text-lg text-white font-medium mb-4 line-clamp-1">SKODA KUSHAQ</h2>
                    <p class="leading-normal text-gray-200 text-sm font-normal line-clamp-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Modi non, explicabo assumenda possimus.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Features of Tailblocks

  1. Tailwind CSS Integration:
    Tailblocks is fully built on Tailwind CSS, leveraging its utility-first classes to offer highly customizable components. Tailwind’s modular nature allows users to adjust spacing, colors, typography, and more directly within the HTML, making it easier to align designs with branding or specific project requirements.
  2. Responsive Design:
    Every block in Tailblocks is built to adapt seamlessly to devices of varying screen sizes, ensuring optimal viewing experiences on desktops, tablets, and mobile devices. This eliminates the hassle of manually adjusting styles for responsiveness.
  3. Variety of Components:
    Tailblocks provides a wide range of UI components, including navigation bars, hero sections, feature showcases, contact forms, pricing tables, testimonials, and footers.
  4. Customizable Layouts:
    The pre-designed components serve as a foundation that users can easily modify. Tailblocks’ components support effortless tweaking of layouts, colors, and other design elements to suit individual needs.
  5. User-Friendly Interface:
    Tailblocks offers an intuitive interface for selecting and previewing components before integrating them into a project.
  6. Open Source and Free:
    Tailblocks is completely free to use and open-source, making it accessible for developers of all skill levels, from beginners to professionals. Its permissive licensing allows developers to integrate the components into personal or commercial projects without concerns about copyright restrictions.

Preview

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi, omnis qui eligendi unde quam sit maiores facilis accusamus ullam placeat repellendus quidem sequi. Tenetur consectetur quis vero. Voluptates, quod corrupti.

tailblocks design

Peter Parker

UI Designer

Show Code

<div class="max-w-7xl px-4 py-12 mx-auto">
    <div class="w-full mx-auto text-center">
        <svg class="inline-block w-8 h-8 text-gray-400 mb-8" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
            <path
                d="M116,72v88a48.05,48.05,0,0,1-48,48,8,8,0,0,1,0-16,32,32,0,0,0,32-32v-8H40a16,16,0,0,1-16-16V72A16,16,0,0,1,40,56h60A16,16,0,0,1,116,72ZM216,56H156a16,16,0,0,0-16,16v64a16,16,0,0,0,16,16h60v8a32,32,0,0,1-32,32,8,8,0,0,0,0,16,48.05,48.05,0,0,0,48-48V72A16,16,0,0,0,216,56Z"
            ></path>
        </svg>
        <p class="leading-relaxed text-lg">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi, omnis qui eligendi unde quam sit maiores facilis accusamus ullam placeat repellendus quidem sequi. Tenetur consectetur quis vero. Voluptates, quod corrupti.
        </p>
        <span class="inline-block h-1 w-10 rounded bg-red-800 mt-8 mb-6"></span>
        <div class="mb-4">
            <img class="h-16 w-16 object-cover mx-auto rounded-full" src="https://designcools.com/wp-content/uploads/2024/10/img_3180.jpg" alt="tailblocks design" />
        </div>
        <h2 class="font-medium uppercase tracking-wider text-base">Peter Parker</h2>
        <p class="text-sm text-gray-600">UI Designer</p>
    </div>
</div>

Preview

Kickstarter Actually Pinterest Brunch Bitters Occupy

Taxidermy bushwick celiac master cleanse microdosing seitan. Fashion axe four dollar toast truffaut, direct trade kombucha brunch williamsburg keffiyeh gastropub tousled squid meh taiyaki drinking vinegar tacos.

Show Code

<div class="max-w-7xl px-4 py-12 mx-auto grid grid-cols-1 md:grid-cols-2 gap-y-4">
    <h2 class="sm:text-3xl text-2xl text-balance">Kickstarter Actually Pinterest Brunch Bitters Occupy</h2>
    <div>
        <p class="leading-relaxed text-base">
            Taxidermy bushwick celiac master cleanse microdosing seitan. Fashion axe four dollar toast truffaut, direct trade kombucha brunch williamsburg keffiyeh gastropub tousled squid meh taiyaki drinking vinegar tacos.
        </p>
        <div class="mt-6">
            <button class="inline-flex text-white items-center gap-2 bg-emerald-800 border-0 font-normal py-2 px-6 outline-none focus:outline-none rounded">
                <span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#fff" viewBox="0 0 256 256">
                        <path
                            d="M230.14,58.87A8,8,0,0,0,224,56H62.68L56.6,22.57A8,8,0,0,0,48.73,16H24a8,8,0,0,0,0,16h18L67.56,172.29a24,24,0,0,0,5.33,11.27,28,28,0,1,0,44.4,8.44h45.42A27.75,27.75,0,0,0,160,204a28,28,0,1,0,28-28H91.17a8,8,0,0,1-7.87-6.57L80.13,152h116a24,24,0,0,0,23.61-19.71l12.16-66.86A8,8,0,0,0,230.14,58.87ZM104,204a12,12,0,1,1-12-12A12,12,0,0,1,104,204Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,200,204Z"
                        ></path>
                    </svg>
                </span>
                Shop Now
            </button>
        </div>
    </div>
</div>

Preview

Kickstarter Actually Pinterest Brunch Bitters Occupy

Taxidermy bushwick celiac master cleanse microdosing seitan. Fashion axe four dollar toast truffaut, direct trade kombucha brunch williamsburg keffiyeh gastropub tousled squid meh taiyaki drinking vinegar tacos.

tailblocks design
CATEGORY

Converse Sneakers

Price: $18.40

tailblocks design

CATEGORY

Converse Sneakers

Price: $18.40

Show Code

<div class="max-w-7xl px-5 py-12 mx-auto">
    <div class="grid mb-12 grid-cols-1 md:grid-cols-2 gap-y-4">
        <h3 class="sm:text-3xl text-2xl text-balance text-black">Kickstarter Actually Pinterest Brunch Bitters Occupy</h3>

        <p class="leading-relaxed text-base">
            Taxidermy bushwick celiac master cleanse microdosing seitan. Fashion axe four dollar toast truffaut, direct trade kombucha brunch williamsburg keffiyeh gastropub tousled squid meh taiyaki drinking vinegar tacos.
        </p>
    </div>

    <div class="flex flex-wrap -m-4">
        <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
            <a class="block relative cursor-pointer h-48 rounded overflow-hidden">
                <img
                    alt="tailblocks design"
                    class="object-cover object-center w-full h-full block"
                    src="https://designcools.com/wp-content/uploads/2024/11/pngtree-vibrant-red-canvas-sports-shoes-with-elevated-soles-unisex-design-in-image_3846974.jpg"
                />
            </a>
            <div class="mt-4">
                <h5 class="text-gray-600 text-xs tracking-wide mb-1">
                    <span class="bg-black text-white px-2 rounded py-1 inline-flex mb-3">CATEGORY</span>
                </h5>
                <h4 class="text-lg font-medium text-black line-clamp-2">Converse Sneakers</h4>
                <p class="mt-1">Price: $18.40</p>
            </div>
        </div>
        <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
            <a class="block relative cursor-pointer h-48 rounded overflow-hidden">
                <img
                    alt="tailblocks design"
                    class="object-cover object-center w-full h-full block"
                    src="https://designcools.com/wp-content/uploads/2024/11/pngtree-vibrant-red-canvas-sports-shoes-with-elevated-soles-unisex-design-in-image_3846974.jpg"
                />
            </a>
            <div class="mt-4">
                <h4 class="text-gray-600 text-xs tracking-wide mb-1">
                    <span class="bg-black text-white px-2 rounded py-1 inline-flex mb-3">CATEGORY</span>
                </h4>
                <h5 class="text-lg font-medium text-black line-clamp-2">Converse Sneakers</h5>
                <p class="mt-1">Price: $18.40</p>
            </div>
        </div>
    </div>
</div>

Preview

Show Code