Tailwind Components in Flow library

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Tailwind Component #101

Tailwind CSS

Flow

<section class="py-12 lg:py-24 bg-teal-900">
        <div class="container mx-auto px-4">
            <div class="flex flex-wrap -mx-4 mb-24">
                <div class="w-full md:w-1/2 px-4 mb-6 md:mb-0">
                    <div>
                        <h1 class="font-heading text-6xl text-white">About us</h1>
                    </div>
                </div>
                <div class="w-full md:w-1/2 px-4">
                    <div class="lg:max-w-lg md:ml-auto">
                        <p class="text-xl font-medium text-gray-50 mb-10">At Flow, we're committed to a sustainable future. As a pioneering force in the green energy sector, we've been at the forefront of the transition to clean, renewable power sources. Our mission is simple yet profound: to create a world where energy is not only abundant but also environmentally responsible. We believe that by harnessing the power of nature, we can power the world and protect it simultaneously.</p>
                        <a href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-teal-900 border border-lime-500 hover:border-teal-900 bg-lime-500 hover:bg-white rounded-full transition duration-300">Read more</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex overflow-x-hidden">
            <div class="w-1/3 lg:w-1/5 -ml-32 flex-shrink-0 px-2 md:px-4">
                <img class="block w-full h-112 object-cover rounded-3xl" src="flow-assets/about/about-image1.png" alt="">
            </div>
            <div class="w-1/3 lg:w-1/5 flex-shrink-0 px-2 md:px-4">
                <img class="block w-full h-112 object-cover rounded-3xl" src="flow-assets/about/about-image2.png" alt="">
            </div>
            <div class="w-1/3 lg:w-1/5 flex-shrink-0 px-2 md:px-4">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI About Component Generator

Tailwind Component #102

Tailwind CSS

Flow

<section class="py-12 lg:py-24 bg-teal-900">
        <div class="container mx-auto px-4">
            <div class="flex mb-4 items-center">
                <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="4" cy="4" r="4" fill="#BEF264"></circle>
                </svg>                    
                <span class="inline-block ml-2 text-sm font-medium text-white">Contact</span>                        
            </div>
            <div class="border-t border-white border-opacity-25 pt-16">
                <div class="max-w-lg mx-auto lg:max-w-none">
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
                            <div class="max-w-lg py-7">
                                <h1 class="font-heading text-4xl sm:text-6xl tracking-sm text-white mb-6">Contact us</h1>
                                <p class="text-lg text-white opacity-80 mb-16">We are here to help you make a first move to greener choice. </p>
                                <form action="">
                                    <label for="" class="block pl-4 mb-1 text-sm font-medium text-white">Full Name</label>
                                    <input type="text" class="w-full px-4 py-3 mb-6 outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 shadow rounded-full">
                                    <label for="" class="block pl-4 mb-1 text-sm font-medium text-white">Email</label>
                                    <input type="text" class="w-full px-4 py-3 mb-6 outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 shadow rounded-full">
                                    <label for="" class="block pl-4 mb-1 text-sm font-medium text-white">
                                        <span>Company</span> 
                                        <span class="opacity-80">(optional)</span>
                                    </label>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Contact Component Generator

Tailwind Component #103

Tailwind CSS

Flow

<section class="py-12 lg:py-24 bg-teal-900">
        <div class="container mx-auto px-4">
            <div class="text-center mb-20">
                <h2 class="font-heading text-6xl text-white mb-6">Our results</h2>
                <p class="text-lg text-white opacity-80">We are committed to a sustainable future</p>
            </div>
            <div class="max-w-md mx-auto lg:max-w-none">
                <div class="flex flex-wrap -mx-4">
                    <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
                        <div class="h-full py-10 px-5 xs:px-10 bg-white rounded-2xl shadow-md">
                            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 8C0 3.58172 3.58172 0 8 0H40C44.4183 0 48 3.58172 48 8V40C48 44.4183 44.4183 48 40 48H8C3.58172 48 0 44.4183 0 40V8Z" fill="#BEF264"></path>
                                <rect x="23" y="8" width="2" height="12" rx="1" fill="#022C22"></rect>
                                <rect x="23" y="28" width="2" height="12" rx="1" fill="#022C22"></rect>
                                <rect x="34.6066" y="11.9792" width="2" height="12" rx="1" transform="rotate(45 34.6066 11.9792)" fill="#022C22"></rect>
                                <rect x="20.4645" y="26.1213" width="2" height="12" rx="1" transform="rotate(45 20.4645 26.1213)" fill="#022C22"></rect>
                                <rect x="28" y="25" width="2" height="12" rx="1" transform="rotate(-90 28 25)" fill="#022C22"></rect>
                                <rect x="8" y="25" width="2" height="12" rx="1" transform="rotate(-90 8 25)" fill="#022C22"></rect>
                                <rect x="26.1213" y="27.5356" width="2" height="12" rx="1" transform="rotate(-45 26.1213 27.5356)" fill="#022C22"></rect>
                                <rect x="11.9792" y="13.3936" width="2" height="12" rx="1" transform="rotate(-45 11.9792 13.3936)" fill="#022C22"></rect>
                            </svg>                            
                            <h5 class="text-2xl xs:text-3xl lg:text-4xl xl:text-5xl mt-6 mb-4">5,000 Mwh</h5>
                            <span class="block mb-6 text-base lg:text-xl font-medium">Renewable Energy Generated</span>
                            <p class="text-gray-700">Our commitment to sustainability shines through as we proudly announce the generation of 5,000 megawatt-hours of renewable energy, contributing to a greener and more environmentally friendly future.</p>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Stats Component Generator

Tailwind Component #104

Tailwind CSS

Flow

<section class="py-12 lg:py-24 bg-teal-900">
        <div class="container mx-auto px-4">
            <div class="max-w-xl mx-auto lg:max-w-none">
                <div class="flex flex-wrap items-center -mx-4 mb-20">
                    <div class="w-full lg:w-3/5 px-4 mb-10 lg:mb-0">
                        <h1 class="font-heading text-5xl sm:text-6xl text-white mb-6">Pricing</h1>
                        <p class="text-lg text-white opacity-80">Our pricing plans are simple and designed to cater to households and companies of various sizes. Choose a plan that suits your needs and budget.</p>
                    </div>
                    <div class="w-full lg:w-2/5 lg:text-right px-4">
                        <a href="#" class="inline-flex items-center p-6 text-lg font-medium bg-white hover:bg-lime-50 shadow-md rounded-2xl transition duration-200">
                            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 8C0 3.58172 3.58172 0 8 0H32C36.4183 0 40 3.58172 40 8V32C40 36.4183 36.4183 40 32 40H8C3.58172 40 0 36.4183 0 32V8Z" fill="#BEF264"></path>
                                <path d="M11.3966 12.9681C9.82919 14.8835 8.88879 17.332 8.88879 20C8.88879 22.6681 9.82922 25.1166 11.3967 27.032L15.7667 22.662C15.2809 21.8912 14.9999 20.9784 14.9999 20C14.9999 19.0217 15.2809 18.1089 15.7666 17.3381L11.3966 12.9681Z" fill="#022C22"></path>
                                <path d="M12.9679 11.3968L17.3379 15.7668C18.1087 15.281 19.0215 15 19.9999 15C20.9783 15 21.8911 15.2811 22.6619 15.7668L27.0319 11.3968C25.1165 9.82934 22.668 8.88892 19.9999 8.88892C17.3318 8.88892 14.8834 9.82933 12.9679 11.3968Z" fill="#022C22"></path>
                                <path d="M28.6032 12.9682L24.2332 17.3382C24.7189 18.1089 24.9999 19.0217 24.9999 20C24.9999 20.9784 24.7189 21.8912 24.2332 22.662L28.6031 27.032C30.1706 25.1166 31.111 22.6681 31.111 20C31.111 17.332 30.1706 14.8836 28.6032 12.9682Z" fill="#022C22"></path>
                                <path d="M27.0318 28.6033L22.6618 24.2333C21.891 24.719 20.9783 25 19.9999 25C19.0216 25 18.1088 24.719 17.338 24.2333L12.968 28.6033C14.8834 30.1707 17.3319 31.1111 19.9999 31.1111C22.668 31.1111 25.1164 30.1707 27.0318 28.6033Z" fill="#022C22"></path>
                            </svg>
                            <span class="ml-6 mr-6">Book a free consultation</span>                                
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.69995 12H18.3" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M12 5.69995L18.3 12L12 18.3" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>                                
                        </a>
                    </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Pricing Component Generator

Tailwind Component #105

Tailwind CSS

Flow

<section class="bg-teal-900">
        <div class="container mx-auto px-4">
          <div class="max-w-xl mx-auto xl:max-w-none">
            <div class="relative flex flex-wrap py-12 items-center justify-between">
                <a href="#" class="inline-block">
                    <img class="h-8" src="flow-assets/logos/logo-white-flow.svg" alt="">
                </a>
                <ul class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 hidden xl:flex">
                    <li class="mr-16"><a class="inline-block text-white hover:text-lime-500 font-medium" href="#">Solutions</a></li>
                    <li class="mr-16"><a class="inline-block text-white hover:text-lime-500 font-medium" href="#">How it works</a></li>
                    <li class="mr-16"><a class="inline-block text-white hover:text-lime-500 font-medium" href="#">Pricing</a></li>
                    <li class="mr-16"><a class="inline-block text-white hover:text-lime-500 font-medium" href="#">About</a></li>
                    <li><a class="inline-block text-white hover:text-lime-500 font-medium" href="#">Blog</a></li>
                </ul>
                <div class="flex items-center justify-end">
                    <a href="#" class="inline-block mr-4 text-white opacity-80 hover:opacity-100">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_230_4832)">
                            <path d="M11.5481 19.9999V10.8776H14.6088L15.068 7.32147H11.5481V5.05138C11.5481 4.02211 11.8327 3.32067 13.3104 3.32067L15.1919 3.3199V0.139138C14.8665 0.0968538 13.7496 -9.15527e-05 12.4496 -9.15527e-05C9.735 -9.15527e-05 7.87654 1.65687 7.87654 4.69918V7.32147H4.80652V10.8776H7.87654V19.9999H11.5481Z" fill="currentColor"></path>
                            </g>
                        </svg>                            
                    </a>
                    <a href="#" class="inline-block mr-4 text-white opacity-80 hover:opacity-100">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Footers Component Generator

Tailwind Component #106

Tailwind CSS

Flow

<section class="py-12 lg:py-24 bg-teal-900 overflow-hidden">
        <div class="container mx-auto px-4">
            <div class="flex mb-4 items-center">
                <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="4" cy="4" r="4" fill="#BEF264"></circle>
                </svg>                                                
                <span class="inline-block ml-2 text-sm font-medium text-white">Testimonials</span>                        
            </div>
            <div class="border-t border-white border-opacity-25 pt-14">
                <div class="max-w-sm sm:max-w-md md:max-w-none mb-20">
                    <h1 class="font-heading text-5xl sm:text-6xl text-white">What our customers say</h1>
                </div>
                <div class="flex -mx-4 pb-16">
                    <div class="flex-shrink-0 w-full sm:w-100 xl:w-1/3 px-4">
                        <div class="flex flex-col h-full p-10 bg-lime-500 shadow-md rounded-2xl">
                            <p class="text-2xl font-medium mb-10">“Flow transformed my energy use. Efficient, green tech, outstanding service!”</p>
                            <div class="mt-auto flex items-center">
                                <img class="block w-14 h-14 rounded-full" src="flow-assets/testimonials/avatar-circle-sm-3.png" alt="">
                                <div class="ml-6">
                                    <span class="block text-xl font-medium">Jenny Wilson</span>
                                    <span class="block text-lg">Solar energy service</span>
                                </div>
                            </div>
                        </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Testimonials Component Generator

Tailwind Component #107

Tailwind CSS

Flow

<div x-data="{ modal: true }" :class="{'hidden': !modal}" class="fixed z-50 bottom-0 left-0 p-6 md:p-16">
    <div class="container mx-auto px-4">
        <div class="max-w-sm py-6 px-10 mx-auto w-full bg-lime-500 border rounded-2xl">
            <h5 class="text-lg font-medium mb-2">Privacy Settings</h5>
            <p class="mb-8">By clicking “Accept Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.</p>
            <div class="flex flex-wrap -mb-3">
                <div class="w-auto mb-3 mr-4">
                    <a x-on:click.prevent="modal = false" href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-white border border-teal-900 hover:border-black bg-teal-900 hover:bg-black rounded-full transition duration-200">Accept All</a>
                </div>
                <div class="w-auto mb-3">
                    <a href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-black hover:text-white border border-teal-900 hover:bg-teal-900 rounded-full transition duration-200">Settings</a>
                </div>
            </div>
        </div>
    </div>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Cookies Component Generator

Tailwind Component #108

Tailwind CSS

Flow

<section x-data="{ showContent: false }" class="py-12 lg:py-24 bg-teal-900">
        <div class="container mx-auto px-4">
            <div class="flex flex-wrap mb-20 -mx-4">
                <div class="w-full lg:w-1/2 px-4 mb-10 lg:mb-0">
                    <div class="flex flex-col h-full items-start max-w-md">
                        <h1 class="font-heading text-4xl xs:text-6xl text-white mb-6">Learn more from our blog</h1>
                        <p class="text-lg text-white opacity-80 mb-20">Our team boasts top green energy experts, driving innovation in sustainability.</p>
                        <a x-on:click.prevent="showContent = true" :class="{'hidden': showContent}" href="#" class="inline-flex mt-auto py-4 px-6 items-center justify-center text-lg font-medium text-white hover:text-black border border-white hover:border-lime-500 hover:bg-lime-500 rounded-full transition duration-300">See all</a>
                    </div>
                </div>
                <div class="w-full lg:w-1/2 px-4">
                    <div class="max-w-xl">
                        <a href="#" class="flex flex-wrap sm:flex-nowrap group mb-8 items-center">
                            <img class="block w-44 h-44 rounded-2xl" src="flow-assets/blog/image-sm-1.png" alt="">
                            <div class="mt-6 sm:mt-0 sm:ml-8">
                                <h3 class="text-2xl font-medium text-white group-hover:text-lime-500 transition duration-200 mb-6">Wind Power: A Breath of Fresh Air for Clean Energy Enthusiasts</h3>
                                <div class="flex items-center">
                                    <img class="w-8 h-8 rounded-full" src="flow-assets/blog/circle-avatar-1.png" alt="">
                                    <div class="flex items-center ml-4">
                                        <span class="text-sm font-medium text-white">Wade Warren</span>
                                        <span class="mx-2 sm:mx-4">
                                            <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="2" cy="2" r="2" fill="#929C9A"></circle>
                                            </svg>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Blog Component Generator

Tailwind Component #109

Tailwind CSS

Flow

<section class="relative pb-12 md:pb-16 bg-teal-900 overflow-hidden">
        <img class="absolute top-0 left-0 h-full w-full" src="flow-assets/sign-in/double-waves.png" alt="">
        <div class="container mx-auto px-4 relative">
            <a href="#" class="absolute top-0 left-0 ml-5 mt-12 inline-block">
                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 4C0 1.79086 1.79086 0 4 0H36C38.2091 0 40 1.79086 40 4V36C40 38.2091 38.2091 40 36 40H4C1.79086 40 0 38.2091 0 36V4Z" fill="#BEF264"></path>
                    <rect x="19.1664" y="6.6665" width="1.66667" height="10" rx="0.833333" fill="#022C22"></rect>
                    <rect x="19.1664" y="23.3335" width="1.66667" height="10" rx="0.833333" fill="#022C22"></rect>
                    <rect x="28.8392" y="9.98291" width="1.66667" height="10" rx="0.833333" transform="rotate(45 28.8392 9.98291)" fill="#022C22"></rect>
                    <rect x="17.0537" y="21.7678" width="1.66667" height="10" rx="0.833333" transform="rotate(45 17.0537 21.7678)" fill="#022C22"></rect>
                    <rect x="23.3335" y="20.8333" width="1.66667" height="10" rx="0.833333" transform="rotate(-90 23.3335 20.8333)" fill="#022C22"></rect>
                    <rect x="6.66638" y="20.8333" width="1.66667" height="10" rx="0.833333" transform="rotate(-90 6.66638 20.8333)" fill="#022C22"></rect>
                    <rect x="21.7677" y="22.9463" width="1.66667" height="10" rx="0.833333" transform="rotate(-45 21.7677 22.9463)" fill="#022C22"></rect>
                    <rect x="9.98267" y="11.1611" width="1.66667" height="10" rx="0.833333" transform="rotate(-45 9.98267 11.1611)" fill="#022C22"></rect>
                </svg>                    
            </a>
            <div class="max-w-sm pt-32 lg:pt-40 mx-auto">
                <form action="">
                    <h3 class="text-4xl font-medium text-center text-white mb-10">Login</h3>
                    <label for="" class="block pl-4 mb-1 text-sm font-medium text-white">Email</label>
                    <input type="text" class="w-full px-4 py-3 mb-6 outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 shadow rounded-full">
                    <label for="" class="block pl-4 mb-1 text-sm font-medium text-white">Password</label>
                    <div class="relative mb-6" x-data="{ visible: false }">
                        <input :type="visible ? 'text': 'password'" class="relative w-full px-4 py-3 outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 shadow rounded-full">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Sign in / Sign up Component Generator

Tailwind Component #110

Tailwind CSS

Flow

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden">
        <nav class="mx-4 py-6 border-b">
            <div class="container mx-auto px-4">
                <div class="relative flex items-center justify-between">
                    <div class="flex items-center">
                        <a href="#" class="inline-block">
                            <img class="h-8" src="flow-assets/logos/flow-logo.svg" alt="">
                        </a>
                        <ul class="hidden md:flex ml-10">
                            <li class="mr-8"><a class="inline-block text-teal-900 hover:text-teal-700 font-medium" href="#">About us</a></li>
                            <li class="mr-8"><a class="inline-block text-teal-900 hover:text-teal-700 font-medium" href="#">Team</a></li>
                            <li class="mr-8"><a class="inline-block text-teal-900 hover:text-teal-700 font-medium" href="#">Solutions</a></li>
                            <li><a class="inline-block text-teal-900 hover:text-teal-700 font-medium" href="#">Blog</a></li>
                        </ul>
                    </div>
                    <div class="flex items-center justify-end">
                        <div class="hidden md:block">
                            <a href="#" class="inline-flex py-2.5 px-4 mr-4 items-center justify-center text-sm font-medium text-teal-900 hover:text-white border border-teal-900 hover:bg-teal-900 rounded-full transition duration-200">Login</a>
                            <a href="#" class="inline-flex py-2.5 px-4 items-center justify-center text-sm font-medium text-white border border-teal-900 hover:border-black bg-teal-900 hover:bg-black rounded-full transition duration-200">Get in touch</a>
                        </div>
                        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="md:hidden text-teal-900 hover:text-teal-800">
                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.19995 23.2H26.7999" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M5.19995 16H26.7999" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Navigation (horizontal) Component Generator

Tailwind Component #111

Tailwind CSS

Flow

<section class="relative py-24 md:py-32 xl:py-52 bg-orange-50 overflow-hidden">
        <img class="absolute top-0 left-0" src="flow-assets/http-codes/lime-shadow.png" alt="">
        <div class="container mx-auto px-4 relative">
            <div class="text-center">
                <span class="block mx-auto text-8xl sm:text-9xl md:text-10xl text-lime-500 font-bold">404</span>
                <p class="max-w-md mx-auto mb-12 text-lg text-gray-700">The page you are looking for was moved, removed, renamed or might have never existed!</p>
                <div class="flex flex-col sm:flex-row justify-center">
                    <a href="#" class="inline-flex py-4 px-6 mb-3 sm:mb-0 sm:mr-4 items-center justify-center text-lg font-medium text-white hover:text-teal-900 border border-teal-900 hover:border-lime-500 bg-teal-900 hover:bg-lime-500 rounded-full transition duration-200">Back to home</a>
                    <a href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-black hover:text-white border border-teal-900 hover:bg-teal-900 rounded-full transition duration-200">Support</a>
                </div>
            </div>
        </div>
    </section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI HTTP codes Component Generator

Tailwind Component #112

Tailwind CSS

Flow

<section class="py-12 lg:py-24 bg-orange-50">
        <div class="container mx-auto px-4">
            <div class="flex flex-wrap items-center -mx-4">
                <div class="w-full lg:w-1/2 px-4 mb-10 lg:mb-0">
                    <div>
                        <h4 class="font-heading text-4xl md:text-5xl">Global partners that trusted us</h4>
                    </div>
                </div>
                <div class="w-full lg:w-1/2 px-4">
                    <div class="flex flex-wrap justify-between -mx-2">
                        <div class="w-1/2 px-2 mb-2">
                            <div class="flex h-14 px-12 items-center justify-center bg-orange-100 rounded-lg">
                                <img class="block h-7" src="flow-assets/logos/brands/logo-clouds-4.svg" alt="">
                            </div>
                        </div>
                        <div class="w-1/2 px-2 mb-2">
                            <div class="flex h-14 px-12 items-center justify-center bg-orange-100 rounded-lg">
                                <img class="block h-7" src="flow-assets/logos/brands/logo-clouds-3.svg" alt="">
                            </div>
                        </div>
                        <div class="w-1/2 px-2 mb-2">
                            <div class="flex h-14 px-12 items-center justify-center bg-orange-100 rounded-lg">
                                <img class="block h-7" src="flow-assets/logos/brands/logo-clouds-2.svg" alt="">
                            </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Logo clouds Component Generator

Tailwind Component #113

Tailwind CSS

Flow

<div x-data="{ modal: true }" :class="{'hidden': !modal}" class="fixed z-50 bottom-0 left-0 p-6 md:p-16">
    <div class="container mx-auto px-4">
        <div class="max-w-sm py-6 px-10 mx-auto w-full bg-lime-500 rounded-2xl">
            <p class="mb-8">By clicking “Accept Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.</p>
            <a x-on:click.prevent="modal = false" href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-white border border-teal-900 hover:border-black bg-teal-900 hover:bg-black rounded-full transition duration-200">Accept All</a>
        </div>
    </div>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Cookies Component Generator

Tailwind Component #114

Tailwind CSS

Flow

<section x-data="{toggle: false}" class="relative py-12 lg:py-24 bg-teal-900 overflow-hidden">
        <img class="absolute top-0 right-0" src="flow-assets/pricing/waves-right-top.png" alt="">
        <div class="container mx-auto px-4 relative">
            <div class="max-w-2xl mb-20">
                <h1 class="font-heading text-5xl sm:text-6xl tracking-xs text-white mb-6">Pricing</h1>
                <p class="text-lg text-white opacity-80">Our pricing plans are simple and designed to cater to households and companies of various sizes. Choose a plan that suits your needs and budget.</p>
            </div>
            <div class="flex md:flex-row flex-col mb-12 items-start md:items-center">
                <div>
                    <div class="flex justify-center items-center">
                        <div class="relative flex h-5 px-0.5 items-center justify-between transition duration-200 ease-linear rounded-full bg-gray-200 shadow">
                            <a x-on:click.prevent="toggle = !toggle" class="inline-block w-4 h-4 bg-white rounded-full" :class="{'bg-white': !toggle, 'bg-transparent': toggle }" href="#"></a>
                            <a x-on:click.prevent="toggle = !toggle" class="inline-block w-4 h-4 rounded-full" :class="{'bg-transparent': !toggle, 'bg-white': toggle }" href="#"></a>
                        </div>
                        <span :class="{'hidden': toggle}" class="ml-4 font-medium text-white">Monthly</span>
                        <span :class="{'hidden': !toggle}" class="hidden ml-4 font-medium text-white">Annually</span>
                    </div>
                </div>
                <span class="inline-block mt-5 md:mt-0 md:ml-6 px-2 text-sm leading-6 text-teal-800 font-medium bg-lime-50 rounded-full">SAVE 15% with annual billing</span>
            </div>
            <div>
                <div class="relative mb-8 p-8 bg-white shadow-md rounded-2xl overflow-hidden">
                    <div class="absolute top-0 left-0 h-1 w-full bg-lime-500"></div>
                    <div class="flex flex-wrap -mx-4">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Pricing Component Generator

Tailwind Component #115

Tailwind CSS

Flow

<section class="py-12 lg:py-24 bg-teal-900">
        <div class="container mx-auto px-4">
            <div class="max-w-lg mx-auto md:max-w-none">
                <h1 class="font-heading text-4xl sm:text-6xl tracking-sm text-white mb-6">Contact us</h1>
                <p class="text-lg text-white opacity-80 mb-20">We are here to help you make a first move to greener choice. </p>
                <div class="flex flex-wrap -mx-4">
                    <div class="w-full sm:w-1/2 md:w-1/3 px-4 mb-10 md:mb-0">
                        <div class="flex flex-col h-full">
                            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 8C0 3.58172 3.58172 0 8 0H40C44.4183 0 48 3.58172 48 8V40C48 44.4183 44.4183 48 40 48H8C3.58172 48 0 44.4183 0 40V8Z" fill="#BEF264"></path>
                                <path d="M11.5389 13.4152L24 23.6106L36.461 13.4152C36.3173 13.3623 36.162 13.3333 36 13.3333H12C11.8379 13.3333 11.6826 13.3623 11.5389 13.4152Z" fill="#022C22"></path>
                                <path d="M10.6666 16.147V33.3333C10.6666 34.0697 11.2636 34.6667 12 34.6667H36C36.7363 34.6667 37.3333 34.0697 37.3333 33.3333V16.147L24.8443 26.3653C24.3531 26.7671 23.6468 26.7671 23.1556 26.3653L10.6666 16.147Z" fill="#022C22"></path>
                            </svg>                                
                            <span class="block mt-8 mb-1 text-2xl font-medium text-white">Email</span>
                            <p class="text-white opacity-80 mb-auto">We will reply within 2 working days</p>
                            <p class="mt-8 text-lg font-medium text-white">hello@example.com</p>
                        </div>
                    </div>
                    <div class="w-full sm:w-1/2 md:w-1/3 px-4 mb-10 md:mb-0">
                        <div class="flex flex-col h-full">
                            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 8C0 3.58172 3.58172 0 8 0H40C44.4183 0 48 3.58172 48 8V40C48 44.4183 44.4183 48 40 48H8C3.58172 48 0 44.4183 0 40V8Z" fill="#BEF264"></path>
                                <path d="M13.3333 12C12.597 12 12 12.597 12 13.3333C12 25.8518 22.1482 36 34.6667 36C35.403 36 36 35.403 36 34.6667V28.2667C36 27.6779 35.6138 27.1588 35.0498 26.9896L29.7165 25.3896C29.2466 25.2486 28.7374 25.377 28.3905 25.7239L26.8288 27.2856C24.2738 25.847 22.153 23.7262 20.7144 21.1712L22.2761 19.6095C22.623 19.2626 22.7514 18.7534 22.6104 18.2835L21.0104 12.9502C20.8412 12.3862 20.3221 12 19.7333 12H13.3333Z" fill="#022C22"></path>
                            </svg>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Contact Component Generator

Tailwind Component #116

Tailwind CSS

Flow

<section x-data="{ showContent: false }" class="py-12 lg:py-24 bg-teal-900 overflow-hidden">
        <div class="container mx-auto px-4">
            <div class="flex mb-4 items-center">
                <svg width="8" height="8" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="4" cy="4" r="4" fill="#BEF264"></circle>
                </svg>
                <span class="inline-block ml-2 text-sm font-medium text-white">About us</span>                        
            </div>
            <div class="border-t border-white border-opacity-25 pt-16">
                <div class="flex flex-wrap items-center justify-between mb-20 -mx-4">
                    <div class="w-full sm:w-2/3 px-4 mb-10 sm:mb-0">
                        <div class="sm:max-w-lg xl:max-w-none">
                            <h1 class="font-heading text-4xl xs:text-6xl text-white">Blog</h1>
                        </div>
                    </div>
                    <div class="w-full sm:w-1/3 px-4 sm:text-right">
                        <a x-on:click.prevent="showContent = true" :class="{'hidden': showContent}" href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-white hover:text-black border border-white hover:border-lime-500 hover:bg-lime-500 rounded-full transition duration-300">
                            <span class="mr-2">See all</span>
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M4.75 10H15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M10 4.75L15.25 10L10 15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>                            
                        </a>
                    </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Blog Component Generator

Tailwind Component #117

Tailwind CSS

Flow

<section class="relative py-24 md:py-32 xl:py-52 bg-orange-50 overflow-hidden">
        <img class="absolute top-0 left-0 h-full w-full" src="flow-assets/http-codes/waves-lines.png" alt="">
        <img class="absolute top-0 left-0" src="flow-assets/http-codes/lime-shadow.png" alt="">
        <div class="container mx-auto px-4 relative">
            <div class="max-w-md lg:max-w-none mx-auto">
                <div class="flex flex-wrap -mx-4 mb-16 sm:mb-40 lg:mb-64 items-center">
                    <div class="w-full lg:w-1/2 px-4 mb-6 lg:mb-0">
                        <span class="block text-8xl sm:text-10xl text-teal-900 font-bold">404</span>
                    </div>
                    <div class="w-full lg:w-1/2 px-4">
                      <div class="max-w-md lg:ml-auto">
                        <p class="text-lg text-gray-700 mb-10">The page you are looking for was moved, removed, renamed or might have never existed!</p>
                        <a href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-white hover:text-teal-900 border border-teal-900 hover:border-lime-500 bg-teal-900 hover:bg-lime-500 rounded-full transition duration-200">Back to home</a>
                      </div>
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap -mx-4">
                <div class="w-full sm:w-1/2 xl:w-1/4 px-4 mb-6 xl:mb-0">
                    <a href="#" class="group inline-flex w-full py-6 pl-6 pr-8 items-center font-medium shadow-md bg-white hover:bg-lime-50 rounded-2xl transition duration-150">
                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0 8C0 3.58172 3.58172 0 8 0H32C36.4183 0 40 3.58172 40 8V32C40 36.4183 36.4183 40 32 40H8C3.58172 40 0 36.4183 0 32V8Z" fill="#BEF264"></path>
                            <rect x="19.1667" y="6.66669" width="1.66667" height="10" rx="0.833334" fill="#022C22"></rect>
                            <rect x="19.1667" y="23.3334" width="1.66667" height="10" rx="0.833334" fill="#022C22"></rect>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI HTTP codes Component Generator

Tailwind Component #118

Tailwind CSS

Flow

<section class="py-12 lg:py-24 bg-teal-900">
        <div class="container mx-auto px-4">
            <div class="flex mb-4 items-center">
                <svg width="8" height="8" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="4" cy="4" r="4" fill="#BEF264"></circle>
                </svg>
                <span class="inline-block ml-2 text-sm font-medium text-white">About us</span>                        
            </div>
            <div class="border-t border-white border-opacity-20 pt-16">
                <div class="max-w-lg mx-auto lg:max-w-none">
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
                            <div class="max-w-xl">
                                <h1 class="font-heading text-4xl sm:text-5xl md:text-6xl text-white mb-6">Committed to a sustainable future</h1>
                                <p class="text-lg text-white opacity-80 mb-10">As a pioneering force in the green energy sector, we've been at the forefront of the transition to clean, renewable power sources. Our mission is simple yet profound: to create a world where energy is not only abundant but also environmentally responsible. We believe that by harnessing the power of nature, we can power the world and protect it simultaneously.</p>
                                <ul class="text-white">
                                    <li class="flex items-center mb-4">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <rect width="20" height="20" rx="10" fill="#BEF264"></rect>
                                            <path d="M14.8 6.40002L8.19995 13L5.19995 10" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </svg> 
                                        <span class="ml-3 text-lg">Check item</span>                                           
                                    </li>
                                    <li class="flex items-center mb-4">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI About Component Generator

Tailwind Component #119

Tailwind CSS

Flow

<section class="relative py-12 lg:py-24 bg-teal-900 overflow-hidden">
        <img class="absolute bottom-0 left-0" src="flow-assets/footer/waves-lines-left-bottom.png" alt="">
        <div class="container px-4 mx-auto relative">
            <div class="max-w-xl lg:max-w-none mx-auto">
                <div class="flex flex-wrap mb-12 lg:mb-24 -mx-4">
                    <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
                        <a class="inline-block mb-18" href="#">
                            <img class="h-8" src="flow-assets/logos/logo-white-flow.svg" alt="">
                        </a>
                        <div class="max-w-md">
                            <h5 class="text-xl font-medium text-white mb-4">Your Source for Green Energy Updates</h5>
                            <p class="text-sm text-white opacity-80 leading-normal mb-10">Stay in the loop with our Green Horizon newsletter, where we deliver bite-sized insights into the latest green energy solutions.</p>
                            <div class="flex flex-col sm:flex-row lg:max-w-md xl:max-w-none">
                                <input type="email" class="h-12 w-full px-4 py-1 placeholder-gray-700 outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 shadow rounded-full" placeholder="Your e-mail...">
                                <a href="#" class="flex-shrink-0 h-12 inline-flex mt-3 sm:mt-0 sm:ml-2 py-1 px-5 items-center justify-center font-medium text-teal-900 border border-lime-500 hover:border-white bg-lime-500 hover:bg-white rounded-full transition duration-200">Get in touch</a>
                            </div>
                        </div>
                    </div>
                    <div class="w-full lg:w-1/2 px-4">
                        <div class="flex flex-wrap -mx-4">
                            <div class="w-1/2 xs:w-1/3 px-4 mb-8 xs:mb-0">
                                <h3 class="mb-6 text-white font-bold">Platform</h3>
                                <ul>
                                    <li class="mb-4"><a class="inline-block text-white opacity-80 hover:opacity-100 font-medium" href="#">Solutions</a></li>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Footers Component Generator

Tailwind Component #120

Tailwind CSS

Flow

<section class="p-4 bg-teal-900">
        <div class="max-w-2xl mx-auto lg:max-w-none py-16 bg-lime-500 rounded-2xl">
            <div class="container mx-auto px-4">
                <div class="max-w-lg lg:max-w-none mx-auto">
                    <div class="flex flex-wrap items-center -mx-4">
                        <div class="w-full lg:w-1/2 xl:w-3/5 px-4 mb-10 lg:mb-0">
                            <h1 class="font-heading text-4xl xs:text-5xl xl:text-6xl">Your Source for Green Energy Updates</h1>
                        </div>
                        <div class="w-full lg:w-1/2 xl:w-2/5 px-4">
                            <div class="flex flex-col sm:flex-row">
                                <input type="email" class="h-14 w-full px-4 py-3 placeholder-gray-700 outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 shadow rounded-full" placeholder="Your e-mail...">
                                <a href="#" class="flex-shrink-0 h-14 inline-flex mt-3 sm:mt-0 sm:ml-2 py-2 px-6 items-center justify-center text-lg font-medium text-white border border-teal-900 hover:border-black bg-teal-900 hover:bg-black rounded-full transition duration-200">Get in touch</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Newsletter Component Generator

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS Components – Flow Library

Framework

UI Library

Components

Tailwind Component #101

Get the code for 13,400+ components

Tailwind Component #102

Get the code for 13,400+ components

Tailwind Component #103

Get the code for 13,400+ components

Tailwind Component #104

Get the code for 13,400+ components

Tailwind Component #105

Get the code for 13,400+ components

Tailwind Component #106

Get the code for 13,400+ components

Tailwind Component #107

Get the code for 13,400+ components

Tailwind Component #108

Get the code for 13,400+ components

Tailwind Component #109

Get the code for 13,400+ components

Tailwind Component #110

Get the code for 13,400+ components

Tailwind Component #111

Get the code for 13,400+ components

Tailwind Component #112

Get the code for 13,400+ components

Tailwind Component #113

Get the code for 13,400+ components

Tailwind Component #114

Get the code for 13,400+ components

Tailwind Component #115

Get the code for 13,400+ components

Tailwind Component #116

Get the code for 13,400+ components

Tailwind Component #117

Get the code for 13,400+ components

Tailwind Component #118

Get the code for 13,400+ components

Tailwind Component #119

Get the code for 13,400+ components

Tailwind Component #120

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support