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 #241

Tailwind CSS

Flow

<section x-data="{ activeSlide: 1, slideCount: 2 }" class="py-12 lg:py-24 bg-orange-50 overflow-hidden">
        <div class="container mx-auto px-4">
            <div class="flex flex-wrap items-center mb-12 md:mb-20 -mx-4">
                <div class="w-full md:w-1/2 px-4 mb-12 md:mb-0">
                    <div>
                        <h1 class="font-heading text-5xl sm:text-6xl mb-4">Meet our experts</h1>
                        <p class="text-gray-700">Our team boasts top green energy experts, driving innovation in sustainability.</p>
                    </div>
                </div>
                <div class="w-full md:w-1/2 px-4">
                    <div class="flex items-center justify-end">
                        <button x-on:click.prevent="activeSlide = 1" class="inline-block text-gray-800 mr-1">
                            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g opacity="0.4">
                                <path d="M17.5 29.1667L8.33333 20.0001L17.5 10.8334" stroke="currentColor" stroke-width="1.5"></path>
                                <path d="M8.33329 20L31.6666 20" stroke="currentColor" stroke-width="1.5"></path>
                                </g>
                            </svg>                                
                        </button>
                        <button x-on:click.prevent="activeSlide = 2" class="inline-block text-black hover:text-lime-500">
                            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M22.5 10.8333L31.6667 19.9999L22.5 29.1666" stroke="currentColor" stroke-width="1.5"></path>
                                <path d="M31.6666 20H8.33331" stroke="currentColor" stroke-width="1.5"></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 Team Component Generator

Tailwind Component #242

Tailwind CSS

Flow

<section x-data="{ activeSlide: 1, slideCount: 3 }" class="py-12 lg:py-24 bg-orange-50 overflow-hidden">
        <div class="container mx-auto px-4">
            <div class="flex flex-wrap items-center -mx-4">
                <div class="w-full md:w-1/2 px-4 mb-12 md:mb-0">
                    <div class="max-w-lg mx-auto md:mx-0 overflow-hidden rounded-4xl">
                        <div :style="'transform: translateX(-' + (activeSlide - 1) * 100 + '%)'" class="flex -mx-4 transition-transform duration-500">
                            <img class="block flex-shrink-0 w-full px-4" src="flow-assets/testimonials/photo-lg.png" alt="">
                            <img class="block flex-shrink-0 w-full px-4" src="flow-assets/testimonials/photo-lg.png" alt="">
                            <img class="block flex-shrink-0 w-full px-4" src="flow-assets/testimonials/photo-lg.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-1/2 px-4">
                    <div class="max-w-lg mx-auto md:mr-0 overflow-hidden">
                        <div :style="'transform: translateX(-' + (activeSlide - 1) * 100 + '%)'" class="flex -mx-4 transition-transform duration-500">
                            <div class="flex-shrink-0 px-4 w-full">
                                <h4 class="text-3xl lg:text-4xl font-medium mb-10">“Flow transformed my energy use. Efficient, green tech, outstanding service!”</h4>
                                <span class="block text-xl font-medium">Jenny Wilson</span>
                                <span class="block mb-12 lg:mb-32 text-lg text-gray-700">Solar energy service</span>
                            </div>
                            <div class="flex-shrink-0 px-4 w-full">
                                <h4 class="text-3xl lg:text-4xl font-medium mb-10">“Efficient, green tech, outstanding service”</h4>
                                <span class="block text-xl font-medium">John Jones</span>
                                <span class="block mb-12 lg:mb-32 text-lg text-gray-700">CE0 Solar Company</span>

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 #243

Tailwind CSS

Flow

<section class="py-12 lg:py-24 bg-orange-50">
        <div class="container mx-auto px-4">
            <div class="max-w-lg lg:max-w-2xl mx-auto text-center">
                <img class="block w-32 sm:w-auto mx-auto sm:h-52 mb-16 rounded-md" src="flow-assets/newsletter/square-image-center.png" alt="">
                <h1 class="font-heading text-4xl xs:text-5xl xl:text-6xl mb-6">Your Source for Green Energy Updates</h1>
                <p class="text-lg text-gray-700 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 w-full lg:max-w-md xl:max-w-xl mx-auto">
                    <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 hover:text-teal-900 border border-teal-900 hover:border-lime-500 bg-teal-900 hover:bg-lime-500 rounded-full transition duration-200">Get in touch</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 Newsletter Component Generator

Tailwind Component #244

Tailwind CSS

Flow

<div x-data="{ modal: true }" :class="{'hidden': !modal}" class="fixed z-50 bottom-0 w-full p-6 md:p-16">
    <div class="container mx-auto px-4">
        <div class="py-6 px-10 mx-auto w-full bg-teal-900 border rounded-2xl">
            <div class="flex flex-wrap items-center -mx-4">
                <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
                    <p class="text-white opacity-80">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>
                <div class="w-full lg:w-1/3 px-4 md:text-right">
                    <a x-on:click.prevent="modal = false" href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-black border border-lime-500 hover:border-white bg-lime-500 hover:bg-white rounded-full transition duration-200">Accept Cookies</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 #245

Tailwind CSS

Flow

<section class="py-12 lg:py-24 bg-orange-50 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="#022C22"></circle>
                </svg>                                 
                <span class="inline-block ml-2 text-sm font-medium text-teal-900">Testimonials</span>                        
            </div>
            <div class="border-t pt-14">
                <div class="mb-16 pb-16 border-b">
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-full md:w-4/12 lg:w-1/2 px-4 mb-10 md:mb-0">
                            <img class="block w-20 h-20 rounded-full" src="flow-assets/testimonials/avatar-circle-sm-3.png" alt="">
                        </div>
                        <div class="w-full md:w-8/12 lg:w-1/2 px-4">
                            <div class="max-w-md lg:max-w-lg md:ml-auto">
                                <h4 class="text-3xl lg:text-4xl font-medium mb-10">“Flow transformed my energy use. Efficient, green tech, outstanding service!”</h4>
                                <span class="block text-xl font-medium">Jenny Wilson</span>
                                <span class="block text-lg text-gray-700">Solar energy service</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mb-16 pb-16 border-b">

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 #246

Tailwind CSS

Flow

<section class="p-4">
        <div class="py-16 px-4 sm:px-8 bg-teal-900 rounded-3xl">
            <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="max-w-lg mx-auto lg:max-w-none">
                        <div class="flex flex-wrap -mx-4">
                            <div class="w-full lg:w-2/3 px-4 mb-12 lg:mb-0">
                                <div class="max-w-xl">
                                    <h1 class="font-heading text-6xl text-white mb-6">Committed to a sustainable future</h1>
                                    <p class="text-lg text-white opacity-80">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>
                                </div>
                            </div>
                            <div class="w-full lg:w-1/3 px-4">
                                <div>
                                    <div class="mb-16">
                                        <span class="block text-5xl text-white">5,000 Mwh</span>
                                        <p class="text-lg text-white opacity-80">Renewable Energy Generated</p>
                                    </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 About Component Generator

Tailwind Component #247

Tailwind CSS

Flow

<section class="p-4 bg-white">
        <div class="pt-16 pb-24 px-5 xs:px-8 xl:px-12 bg-orange-50 rounded-3xl">
            <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">Solutions</span>                        
                </div>
                <div class="border-t pt-14">
                    <h1 class="font-heading text-4xl sm:text-6xl mb-24">Key to clean future</h1>
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-full sm:w-1/2 px-4 mb-16">
                            <div>
                                <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>
                                    <circle cx="16" cy="16" r="4" fill="#022C22"></circle>
                                    <circle cx="24" cy="32" r="4" fill="#022C22"></circle>
                                    <circle cx="32" cy="16" r="4" fill="#022C22"></circle>
                                </svg>
                                <div class="mt-6">
                                    <h5 class="text-2xl font-medium mb-3">EV charging </h5>
                                    <p class="text-gray-700 mb-6">EVs use electricity as a power source, which can be generated from renewable energy sources. Our solutions help reducing greenhouse gas emissions in the transportation sector.</p>
                                    <a href="#" class="inline-block text-lg  font-medium hover:text-teal-700">Read more</a>

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 Features Component Generator

Tailwind Component #248

Tailwind CSS

Flow

<section class="py-12 lg:py-24 bg-orange-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-20">
                <h2 class="font-heading text-6xl">Our results</h2>
            </div>
            <div class="max-w-sm md:max-w-6xl mx-auto">
                <div class="flex flex-wrap -mx-4">
                    <div class="w-full md:w-1/2 px-4 mb-8">
                        <div class="relative py-14 px-5 text-center bg-teal-900 rounded-2xl overflow-hidden">
                            <img class="absolute top-0 left-0 w-full h-full" src="flow-assets/stats/waves-sm-left.svg" alt="">
                            <div class="relative">
                                <h5 class="text-2xl xs:text-3xl lg:text-4xl xl:text-5xl text-white mb-4">5,000 Mwh</h5>
                                <span class="text-base lg:text-lg text-white opacity-80">Renewable Energy Generated</span>
                            </div>
                        </div>
                    </div>
                    <div class="w-full md:w-1/2 px-4 mb-8">
                        <div class="relative py-14 px-5 text-center bg-teal-900 rounded-2xl overflow-hidden">
                            <img class="absolute top-0 left-0 w-full h-full" src="flow-assets/stats/waves-sm-right.svg" alt="">
                            <div class="relative">
                                <h5 class="text-2xl xs:text-3xl lg:text-4xl xl:text-5xl text-white mb-4">2,500+</h5>
                                <span class="text-base lg:text-lg text-white opacity-80">Metric Tons of CO2 Reduced</span>
                            </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 Stats Component Generator

Tailwind Component #249

Tailwind CSS

Flow

<section class="py-12 lg:py-24 xl:py-32 bg-orange-50 relative overflow-hidden">
        <img class="absolute top-0 left-0 w-full h-full" src="flow-assets/cta/bg-light-lines.png" alt="">
        <div class="container mx-auto px-4 relative">
            <div class="max-w-6xl mx-auto text-center">
                <h1 class="font-heading text-4xl sm:text-6xl md:text-7xl tracking-sm mb-16">Our commitment to green energy is paving the way for a cleaner, healthier planet. </h1>
                <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">Get in touch</a>
            </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 Call to action Component Generator

Tailwind Component #250

Tailwind CSS

Flow

<section class="py-12 lg:py-24 bg-orange-50">
        <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-teal-900">Our experts</span>                        
            </div>
            <div class="border-t pt-16">
                <div class="mb-20 lg:mb-32">
                    <h1 class="font-heading text-5xl sm:text-6xl mb-4">Meet our experts</h1>
                    <p class="text-gray-700">Our team boasts top green energy experts, driving innovation in sustainability.</p>
                </div>
                <div class="mb-8 pb-8 border-b">
                    <div class="flex flex-wrap items-center -mx-4">
                        <div class="w-full lg:w-1/12 px-4 mb-6 lg:mb-0">
                            <img class="block w-24 lg:w-full" src="flow-assets/team/square-avatar-1.png" alt="">
                        </div>
                        <div class="w-full sm:w-4/12 lg:w-3/12 px-4 mb-4 sm:mb-0">
                            <span class="text-2xl font-medium">Jenny Wilson</span>
                        </div>
                        <div class="w-full sm:w-6/12 lg:w-6/12 px-4 mb-4 sm:mb-0">
                            <span class="text-2xl font-medium text-gray-700">Senior Sustainability Consultant</span>
                        </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 Team Component Generator

Tailwind Component #251

Tailwind CSS

Flow

<section class="py-12 lg:pt-16 lg:pb-24 bg-orange-50 overflow-hidden">
        <div class="container mx-auto px-4">
            <div class="border-b pb-4 mb-14">
                <div class="flex 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="#022C22"></circle>
                    </svg>
                    <span class="inline-block ml-2 text-sm font-medium text-teal-900">Careers</span>                        
                </div>
            </div>
            <div class="flex flex-wrap items-center -mx-4 mb-24">
                <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
                    <h1 class="font-heading text-4xl sm:text-6xl md:text-7xl tracking-sm mb-6">Join our team</h1>
                    <p class="text-lg text-gray-700">Our philosophy is simple – make the world a greener place. </p>
                </div>
                <div class="w-full lg:w-1/2 px-4">
                <img class="block md:h-80 lg:h-72" src="flow-assets/career/team-members-photos.png" alt="">
                </div>
            </div>
            <div class="flex flex-wrap -mx-4">
                <div class="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
                    <h3 class="text-3xl font-medium">Open positions</h3>
                </div>
                <div class="w-full lg:w-2/3 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 Careers Component Generator

Tailwind Component #252

Tailwind CSS

Flow

<section class="p-4">
        <div class="relative py-16 px-4 sm:px-8 bg-orange-50 rounded-3xl overflow-hidden">
            <img class="absolute bottom-0 left-0 h-full" src="flow-assets/footer/waves-lines-bg.png" alt="">
            <div class="container px-4 mx-auto relative">
                <div class="flex flex-wrap mb-12 md:mb-24 xl:mb-40 -mx-4">
                    <div class="w-full lg:w-2/12 xl:w-3/12 px-4 mb-16 lg:mb-0">
                        <a class="inline-block mb-4" href="#">
                            <img class="h-8" src="flow-assets/logos/flow-logo.svg" alt="">
                        </a>
                    </div>
                    <div class="w-full md:w-7/12 lg:w-7/12 xl:w-6/12 px-4 mb-16 lg:mb-0">
                        <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 font-bold">Platform</h3>
                                <ul>
                                    <li class="mb-4"><a class="inline-block text-black hover:text-lime-600 font-medium" href="#">Solutions</a></li>
                                    <li class="mb-4"><a class="inline-block text-black hover:text-lime-600 font-medium" href="#">How it works</a></li>
                                    <li><a class="inline-block text-black hover:text-lime-600 font-medium" href="#">Pricing</a></li>
                                </ul>
                            </div>
                            <div class="w-1/2 xs:w-1/3 px-4 mb-8 xs:mb-0">
                                <h3 class="mb-6 font-bold">Resources</h3>
                                <ul>
                                <li class="mb-4"><a class="inline-block text-black hover:text-lime-600 font-medium" href="#">Blog</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 #253

Tailwind CSS

Flow

<section class="py-12 bg-orange-50">
        <div class="container px-4 mx-auto">
            <div class="flex flex-wrap items-center -mx-4">
                <div class="w-full md:w-1/3 lg:w-1/2 px-4 order-last md:order-first">
                    <img class="block w-full max-w-sm md:max-w-sm mx-auto" src="flow-assets/sign-in/circle-complet-side.png" alt="">
                </div>
                <div class="w-full md:w-2/3 lg:w-1/2 px-4 mb-12 md:mb-0">
                    <div class="max-w-sm mx-auto md:mr-0">
                        <form action="">
                            <h3 class="text-4xl text-center font-medium mb-10">Login</h3>
                            <label for="" class="block pl-4 mb-1 text-sm font-medium">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">Password</label>
                            <div class="relative mb-6" x-data="{ visible: false }">
                                <input type="password" :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">
                                <a href="#" x-on:click.prevent="visible = !visible" class="absolute top-1/2 right-0 transform -translate-y-1/2 mr-4">
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M1.75 10C1.75 10 4.75 4 10 4C15.25 4 18.25 10 18.25 10C18.25 10 15.25 16 10 16C4.75 16 1.75 10 1.75 10Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M10 12.25C11.2426 12.25 12.25 11.2426 12.25 10C12.25 8.75736 11.2426 7.75 10 7.75C8.75736 7.75 7.75 8.75736 7.75 10C7.75 11.2426 8.75736 12.25 10 12.25Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </a>
                            </div>
                            <div class="text-right mb-10">
                                <a href="#" class="inline-block text-sm underline font-medium">Forgot password?</a>

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 #254

Tailwind CSS

Flow

<section class="py-12 lg:py-24 bg-orange-50">
        <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-teal-900">FAQ</span>                        
            </div>
            <div class="border-t pt-16">
                <div class="flex flex-wrap -mx-4">
                    <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
                        <div class="flex flex-col h-full max-w-sm sm:max-w-lg">
                            <h1 class="font-heading text-4xl sm:text-6xl mb-16">Answers to the frequently asked questions.</h1>
                            <div class="mt-auto">
                                <div class="mb-8">
                                    <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.676 15.5617C11.7951 17.8602 10.6666 20.7983 10.6666 24C10.6666 27.2017 11.7951 30.1398 13.6761 32.4383L18.9201 27.1943C18.3372 26.2694 18 25.174 18 24C18 22.8259 18.3372 21.7306 18.92 20.8057L13.676 15.5617Z" fill="#022C22"></path>
                                        <path d="M15.5616 13.6761L20.8056 18.9201C21.7306 18.3372 22.8259 18 24 18C25.174 18 26.2694 18.3372 27.1943 18.9201L32.4383 13.6761C30.1398 11.7951 27.2017 10.6666 24 10.6666C20.7982 10.6666 17.8601 11.7951 15.5616 13.6761Z" fill="#022C22"></path>
                                        <path d="M34.3239 15.5617L29.0799 20.8057C29.6628 21.7307 30 22.8259 30 24C30 25.174 29.6627 26.2693 29.0799 27.1943L34.3238 32.4383C36.2048 30.1398 37.3333 27.2017 37.3333 24C37.3333 20.7983 36.2048 17.8602 34.3239 15.5617Z" fill="#022C22"></path>
                                        <path d="M32.4382 34.3239L27.1942 29.0799C26.2693 29.6628 25.174 30 24 30C22.8259 30 21.7307 29.6628 20.8057 29.0799L15.5617 34.3239C17.8602 36.2048 20.7983 37.3333 24 37.3333C27.2016 37.3333 30.1397 36.2048 32.4382 34.3239Z" fill="#022C22"></path>
                                    </svg>                            
                                </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 FAQ Component Generator

Tailwind Component #255

Tailwind CSS

Flow

<section x-data="{ showContent: false }" class="py-12 lg:py-24 bg-orange-50 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="#022C22"></circle>
                </svg>
                <span class="inline-block ml-2 text-sm font-medium text-teal-900">Blog</span>                        
            </div>
            <div class="border-t 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 mb-6">Learn more from our blog</h1>
                            <p class="text-lg text-gray-700">Our team boasts top green energy experts, driving innovation in sustainability.</p>
                        </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-black hover:text-white border border-teal-900 hover:bg-teal-900 rounded-full transition duration-300">See all</a>
                    </div>
                </div>
            </div>
            <div class="mt-20 flex">
                <a href="#" class="sm:flex-shrink-0 max-w-md md:max-w-xl h-full sm:mr-8 border hover:border-teal-700 rounded-2xl shadow hover:shadow-none overflow-hidden transition duration-200">
                    <img class="block w-full h-64 md:h-87 rounded-t-2xl object-cover" src="flow-assets/blog/image-post2-1.png" alt="">

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 #256

Tailwind CSS

Flow

<section class="py-12 lg:py-24 relative overflow-hidden">
        <img class="absolute top-0 left-0 w-full h-full max-h-116 md:max-h-128" src="flow-assets/contact/waves-bg-light.png" alt="">
        <div class="container mx-auto px-4 relative">
            <div class="max-w-lg mx-auto">
                <div class="text-center mb-20">
                    <h1 class="font-heading text-5xl sm:text-6xl md:text-7xl tracking-sm mb-6">Contact us</h1>
                    <p class="text-lg text-gray-700 mb-16 ">We are here to help you make a first move to greener choice. </p>
                </div>
                <div class="p-8 bg-white rounded-2xl shadow-md">
                    <div>
                         <form action="">
                            <label for="" class="block pl-4 mb-1 text-sm font-medium">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">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">
                                <span>Company</span> 
                                <span class="text-gray-700">(optional)</span>
                            </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">Service</label>
                            <div class="relative w-full mb-8 bg-white rounded-full">
                                <span class="absolute top-1/2 right-0 mr-4 transform -translate-y-1/2">
                                    <svg width="20" height="20" viewBox="0 0 20 20" 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 Contact Component Generator

Tailwind Component #257

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-16">
                <span class="font-medium text-white">Global partners that trusted us</span>
            </div>
            <div class="md:max-w-4xl mx-auto xl:max-w-none">
                <div class="flex flex-wrap justify-between -mx-4 lg:-mx-6 xl:-mx-10 -mb-6">
                    <div class="w-1/3 md:w-1/6 px-4 lg:px-6 xl:px-10 mb-6">
                        <img class="block mx-auto h-7" src="flow-assets/logos/brands/logo-clouds-4.svg" alt="">
                    </div>
                    <div class="w-1/3 md:w-1/6 px-4 lg:px-6 xl:px-10 mb-6">
                        <img class="block mx-auto h-7" src="flow-assets/logos/brands/logo-clouds-3.svg" alt="">
                    </div>
                    <div class="w-1/3 md:w-1/6 px-4 lg:px-6 xl:px-10 mb-6">
                        <img class="block mx-auto h-7" src="flow-assets/logos/brands/logo-clouds-2.svg" alt="">
                    </div>
                    <div class="w-1/3 md:w-1/6 px-4 lg:px-6 xl:px-10 mb-6">
                        <img class="block mx-auto h-7" src="flow-assets/logos/brands/logo-clouds-1.svg" alt="">
                    </div>
                    <div class="w-1/3 md:w-1/6 px-4 lg:px-6 xl:px-10 mb-6">
                        <img class="block mx-auto h-7" src="flow-assets/logos/brands/logo-clouds-4.svg" alt="">
                    </div>
                    <div class="w-1/3 md:w-1/6 px-4 lg:px-6 xl:px-10 mb-6">
                        <img class="block mx-auto h-7" src="flow-assets/logos/brands/logo-clouds-3.svg" alt="">

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 #258

Tailwind CSS

Flow

<section class="py-12 bg-orange-50">
        <div class="container px-4 mx-auto">
            <div class="flex flex-wrap items-center -mx-4">
                <div class="w-full md:w-1/3 lg:w-1/2 px-4 order-last md:order-first">
                    <img class="block w-full max-w-sm md:max-w-sm mx-auto" src="flow-assets/sign-in/circle-complet-side.png" alt="">
                </div>
                <div class="w-full md:w-2/3 lg:w-1/2 px-4 mb-12 md:mb-0">
                    <div class="max-w-sm mx-auto md:mr-0">
                        <form action="">
                            <h3 class="text-4xl text-center font-medium mb-10">Create your account</h3>
                            <label for="" class="block pl-4 mb-1 text-sm font-medium">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">Email</label>
                            <input type="email" 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">Password</label>
                            <div class="relative mb-6" x-data="{ visible: false }">
                                <input type="password" :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">
                                <a href="#" x-on:click.prevent="visible = !visible" class="absolute top-1/2 right-0 transform -translate-y-1/2 mr-4">
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M1.75 10C1.75 10 4.75 4 10 4C15.25 4 18.25 10 18.25 10C18.25 10 15.25 16 10 16C4.75 16 1.75 10 1.75 10Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M10 12.25C11.2426 12.25 12.25 11.2426 12.25 10C12.25 8.75736 11.2426 7.75 10 7.75C8.75736 7.75 7.75 8.75736 7.75 10C7.75 11.2426 8.75736 12.25 10 12.25Z" 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 Sign in / Sign up Component Generator

Tailwind Component #259

Tailwind CSS

Flow

<section x-data="{toggle: false}" class="py-12 lg:py-24 bg-orange-50">
        <div class="container mx-auto px-4">
            <div class="max-w-xl mx-auto lg:max-w-none">
                <div class="max-w-2xl mb-14 md:mb-20">
                    <h1 class="font-heading text-5xl sm:text-6xl mb-6">Pricing</h1>
                    <p class="text-lg text-gray-700">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 justify-end">
                    <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">Monthly</span>
                            <span :class="{'hidden': !toggle}" class="hidden ml-4 font-medium">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 class="flex flex-wrap -mx-4 mb-20">
                    <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
                        <div class="relative xl:h-87 p-8 mb-10 bg-white rounded-2xl shadow-md overflow-hidden">
                            <img class="absolute top-0 left-0 w-full h-full" src="flow-assets/pricing/waves-pricing-card.svg" alt="">

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 #260

Tailwind CSS

Flow

<section class="py-52 lg:py-24 bg-orange-50 relative overflow-hidden">
        <img class="absolute bottom-0 right-0 mr-10 w-40 lg:w-1/6 max-w-xs xl:px-4" src="flow-assets/newsletter/float-bottom-image.png" alt="">
        <img class="absolute top-0 left-0 ml-10 w-40 lg:w-1/6 max-w-xs xl:px-4" src="flow-assets/newsletter/float-top-image.png" alt="">
        <div class="container mx-auto px-4 relative">
            <div class="max-w-lg xl:max-w-2xl mx-auto text-center">
                <h1 class="font-heading text-4xl xs:text-5xl xl:text-6xl mb-6">Your Source for Green Energy Updates</h1>
                <p class="text-lg text-gray-700 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 w-full lg:max-w-md xl:max-w-xl mx-auto">
                    <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 hover:text-teal-900 border border-teal-900 hover:border-lime-500 bg-teal-900 hover:bg-lime-500 rounded-full transition duration-200">Get in touch</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 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 #241

Get the code for 13,400+ components

Tailwind Component #242

Get the code for 13,400+ components

Tailwind Component #243

Get the code for 13,400+ components

Tailwind Component #244

Get the code for 13,400+ components

Tailwind Component #245

Get the code for 13,400+ components

Tailwind Component #246

Get the code for 13,400+ components

Tailwind Component #247

Get the code for 13,400+ components

Tailwind Component #248

Get the code for 13,400+ components

Tailwind Component #249

Get the code for 13,400+ components

Tailwind Component #250

Get the code for 13,400+ components

Tailwind Component #251

Get the code for 13,400+ components

Tailwind Component #252

Get the code for 13,400+ components

Tailwind Component #253

Get the code for 13,400+ components

Tailwind Component #254

Get the code for 13,400+ components

Tailwind Component #255

Get the code for 13,400+ components

Tailwind Component #256

Get the code for 13,400+ components

Tailwind Component #257

Get the code for 13,400+ components

Tailwind Component #258

Get the code for 13,400+ components

Tailwind Component #259

Get the code for 13,400+ components

Tailwind Component #260

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