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

Tailwind CSS

Flow

<section class="pb-12 md:pb-24">
        <div class="relative pt-10 pb-80">
            <img class="absolute top-0 left-0 w-full h-full" src="flow-assets/content/bg-teal-waves.png" alt="">
            <div class="container mx-auto px-4 relative">
                <a href="#" class="inline-block mb-14 text-lg font-medium text-white hover:text-lime-600">Back to blog</a>
                <div class="max-w-3xl mx-auto text-center">
                    <span class="inline-block px-2 mb-4 text-sm leading-5 font-medium bg-white rounded-full">Solar Power</span>
                    <h2 class="font-heading text-4xl xs:text-5xl md:text-6xl tracking-xs text-white mb-6">Harnessing the Power of the Sun: Exploring the World of Solar Energy</h2>
                    <div class="flex items-center justify-center">
                        <span class="text-sm font-medium text-white">9 min read</span>
                        <span class="mx-3">
                            <svg width="5" height="4" viewBox="0 0 5 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="2.5" cy="2" r="2" fill="#929C9A"></circle>
                            </svg>        
                        </span>                    
                        <span class="text-sm font-medium text-white">December 11, 2023</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="container mx-auto -mt-64 px-4 relative">
            <div class="flex flex-wrap -mx-4 mb-18">
                <div class="w-full md:w-1/6 px-4 mb-6 md:mb-0">
                    <div class="flex flex-row md:flex-col items-center md:items-start gap-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

Solar Energy Blog Article Page with Newsletter Signup and Related Posts

A full blog article page about solar energy with a dark green hero header, author and share sidebars, body text sections, an email newsletter signup card, a testimonial quote, and a row of related article cards at the bottom.

AI Content Component Generator

Tailwind Component #42

Tailwind CSS

Flow

<section class="relative py-12 lg:py-24 bg-orange-50 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="flex flex-wrap mb-16 -mx-4">
                <div class="w-full lg:w-2/12 xl:w-2/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-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-gray-600 hover:text-lime-500 font-medium" href="#">Solutions</a></li>
                                <li class="mb-4"><a class="inline-block text-gray-600 hover:text-lime-500 font-medium" href="#">How it works</a></li>
                                <li><a class="inline-block text-gray-600 hover:text-lime-500 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-gray-600 hover:text-lime-500 font-medium" href="#">Blog</a></li>
                            <li class="mb-4"><a class="inline-block text-gray-600 hover:text-lime-500 font-medium" href="#">Help Center</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

Footer with link columns and newsletter signup

A website footer on a cream background with a Flow logo, three link columns (Platform, Resources, Company), and a dark green newsletter card with an email input and a lime 'Get in touch' button. Social icons and a copyright line sit along the bottom edge.

AI Footers Component Generator

Tailwind Component #43

Tailwind CSS

Flow

<section class="relative pt-52 xs:pt-40 pb-16 md:pb-24 lg:pb-52 bg-orange-50 overflow-hidden">
        <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>
        <p class="absolute top-0 right-0 mt-32 xs:mt-12 mr-5">
            <span>New to Flow?</span>
            <a href="#" class="inline-block font-medium underline hover:text-lime-600">Create an account</a>
        </p>
        <div class="container mx-auto px-4 relative">
            <div class="max-w-sm mx-auto">
                <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">

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

Tailwind CSS

Flow

<section class="p-4 bg-orange-50">
        <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">Our experts</span>                        
                </div>
                <div class="border-t border-white border-opacity-25 pt-16">
                    <h1 class="font-heading text-5xl sm:text-6xl text-white mb-24">Meet our experts</h1>
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
                            <div class="h-full p-8 bg-lime-500 rounded-xl">
                                <img class="block h-36 rounded-full mx-auto mb-8" src="flow-assets/team/avatar-circle-team1.png" alt="">
                                <div class="text-center">
                                    <span class="block text-xl font-medium">Jenny Wilson</span>
                                    <span class="text-lg">Senior Sustainability Consultant</span>
                                </div>
                            </div>
                        </div>
                        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
                            <div class="h-full p-8 bg-lime-500 rounded-xl">
                                <img class="block h-36 rounded-full mx-auto mb-8" src="flow-assets/team/avatar-circle-team2.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

Meet Our Experts Team Grid on Dark Green Background

A dark green section titled 'Meet our experts' with a six-card grid of lime green cards, each showing a circular headshot, a name, and a job title. The layout is a three-column grid with two rows, presenting team members in a simple, repeated structure.

AI Team Component Generator

Tailwind Component #45

Tailwind CSS

Flow

<section 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 mx-auto text-center 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 flex-wrap -mx-4 mb-24">
                <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
                    <div class="relative pt-14 pb-8 px-8 bg-white rounded-2xl overflow-hidden">
                        <div class="absolute top-0 left-0 h-1 w-full bg-lime-500"></div>
                        <span class="block text-2xl font-medium mb-6">Basic</span>     
                        <div class="flex items-center mb-6">
                            <span class="text-6xl">$59</span>
                            <span class="ml-4 text-xl font-medium text-gray-700 ">per month</span>
                        </div>  
                        <p class="text-lg mb-8">For small households or businesses with moderate energy consumption</p>
                        <a href="#" class="inline-flex w-full group 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">
                            <span class="mr-2">Get started</span>
                            <span class="transform group-hover:translate-x-1 transition-transform duration-200">
                                <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M5.25 10H15.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M10.5 4.75L15.75 10L10.5 15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></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

Pricing Plans with Feature Comparison Table

A dark-themed pricing section presenting three plan cards (Basic, Basic recommended, Enterprise) with price and Get started buttons, followed by a comparison table of support and energy supply benefits across the plans. The recommended plan is highlighted with a bright green card and a Recommended label.

AI Pricing Component Generator

Tailwind Component #46

Tailwind CSS

Flow

<section>
        <div class="p-4">
            <div class="max-w-xl lg:max-w-5xl mx-auto xl:max-w-none px-5 md:px-12 xl:px-24 py-16 bg-teal-900 rounded-2xl">
                <div class="container mx-auto px-4">
                    <div class="flex flex-wrap items-center -mx-4">
                        <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
                            <div class="max-w-md xl:max-w-none">
                                <h1 class="font-heading text-4xl xs:text-5xl sm:text-6xl tracking-sm text-white mb-6">Join the green movement</h1>
                                <p class="text-lg text-white opacity-80">Our commitment to green energy is paving the way for a cleaner, healthier planet. </p>
                            </div>
                        </div>
                        <div class="w-full lg:w-1/3 px-4 lg:text-right">
                            <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-white bg-lime-500 hover:bg-white rounded-full transition duration-200">Get in touch</a>
                        </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

Dark green call-to-action banner with heading and lime button

A full-width dark green rounded banner with a large white heading, a short supporting sentence, and a lime pill-shaped 'Get in touch' button on the right. It functions as a promotional call-to-action section for contacting or engaging with a green energy initiative.

AI Call to action Component Generator

Tailwind Component #47

Tailwind CSS

Flow

<section class="relative py-12 lg:py-24 bg-orange-50 overflow-hidden">
        <img class="absolute bottom-0 left-0" src="flow-assets/about/lines.svg" alt="">
        <div class="container mx-auto px-4 relative">
            <div class="max-w-4xl mx-auto text-center">
                <h1 class="font-heading text-5xl sm:text-6xl mb-8">About us</h1>
                <p class="text-2xl text-black font-medium 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-black hover:text-white border border-teal-900 hover:bg-teal-900 rounded-full transition duration-300">Read more</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

Centered About Us Hero Section with Read More Button

A centered introductory text section with a large heading "About us", a multi-line mission paragraph, and an outlined "Read more" call-to-action button on a cream background with faint diagonal line texture. It presents company mission content without images or navigation.

AI About Component Generator

Tailwind Component #48

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 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 bg-lime-500 hover:bg-black border border-lime-500 hover:border-black rounded-full transition duration-300">See all</a>
                </div>
            </div>
            <div class="flex flex-wrap -mx-4 -mb-8 mt-20">
                <div class="w-full lg:w-1/2 px-4 mb-8">
                    <a href="#" class="block 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-96 object-cover" src="flow-assets/blog/image-post2-1.png" alt="">
                        <div class="flex flex-col lg:h-80 py-8 pl-8 pr-10 bg-white">
                            <h4 class="text-3xl font-medium mb-4">Harnessing the Power of the Sun: Exploring the World of Solar Energy</h4>
                            <p class="text-lg text-gray-700 mb-6">Solar energy is revolutionizing the way we power our world. In this blog post, we'll delve into the incredible po...</p>
                            <div class="flex mt-auto items-center">
                                <img class="w-10 h-10 rounded-full" src="flow-assets/blog/circle-avatar-3.png" alt="">
                                <div class="flex items-center ml-4">
                                    <span class="text-sm font-medium">Leslie Alexander</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

Blog Article Card Grid with Header and See All Button

A blog section with a large heading, subtitle, and a 'See all' pill button above two large article cards and three smaller article cards. Each card shows a photo, title, excerpt or title only, author avatar, name, and read time on a cream background.

AI Blog Component Generator

Tailwind Component #49

Tailwind CSS

Flow

<section class="relative bg-orange-50 overflow-hidden">
        <img class="hidden md:block absolute top-0 left-0 h-full w-1/3 xl:w-2/6" src="flow-assets/newsletter/image-car-left.png" alt="">
        <div class="container mx-auto px-4 relative">
            <div class="max-w-md lg:max-w-xl py-12 lg:py-24 mx-auto md:mr-0">
                <h1 class="font-heading text-5xl xl:text-6xl mb-6">Your Source for Green Energy Updates</h1>
                <p class="lg:max-w-md xl:max-w-none 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 lg:max-w-md xl:max-w-none">
                    <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>
        <img class="block md:hidden w-full" src="flow-assets/newsletter/image-car-left.png" alt="">
    </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

Split-screen newsletter signup hero with EV charging photo

A split-screen hero section with an electric vehicle charging photograph on the left and a cream panel on the right containing a heading, supporting text, and an email signup field with a dark call-to-action button. It is a promotional newsletter subscription section for a green energy brand.

AI Newsletter Component Generator

Tailwind Component #50

Tailwind CSS

Flow

<section>
        <div x-data="{ modal: true }" x-show="modal" class="fixed z-50 bottom-0 left-0 w-full">
            <div class="py-6 bg-teal-900">
                <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-8 md:mb-0">
                            <h5 class="text-lg font-medium text-white">Privacy Settings</h5>
                            <p class="text-white opacity-80">This site uses third-party website tracking technologies to provide and continually improve our services.</p>
                        </div>
                        <div class="w-full md:w-1/2 px-4">
                            <div class="flex flex-wrap md:justify-end -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 hover:text-teal-900 border border-white hover:bg-white rounded-full transition duration-200">Deny</a>
                                </div>
                                <div class="w-auto mb-3">
                                    <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 All</a>
                                </div>
                            </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

Dark Green Privacy Settings Cookie Consent Banner

A horizontal dark green consent banner with a Privacy Settings heading and explanatory text about third-party tracking on the left, and Deny (outlined) and Accept All (lime filled) pill buttons on the right. It is a single-row notification-style banner.

AI Cookies Component Generator

Tailwind Component #51

Tailwind CSS

Flow

<section class="py-12 lg:py-24 bg-orange-50 overflow-hidden" x-data="{ activeSlide: 1, slideCount: 3 }">
        <div class="container mx-auto px-4">
            <div class="max-w-xs sm:max-w-md md:max-w-none mx-auto text-center mb-20">
                <h1 class="font-heading text-5xl sm:text-6xl tracking-tight mb-6">What our customers say</h1>
                <p class="text-gray-700">Thousands of happy customers that changed their energy use </p>
            </div>
            <div class="max-w-md md:max-w-2xl lg:max-w-6xl mx-auto">
                <div class="flex flex-wrap items-center justify-center md:justify-between -mx-4">
                    <div class="px-4 order-last md:order-first">
                        <a href="#" x-on:click.prevent="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="inline-block mr-4 text-gray-700 hover:text-lime-500">
                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M24.4 16H7.59998" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M16 24.4L7.59998 16L16 7.59998" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>                                    
                        </a>
                    </div>
                    <div class="w-full md:w-2/3 lg:w-auto px-4 mb-12 md:mb-0">
                        <div class="relative px-6">
                            <div class="absolute top-1/2 left-0 transform -translate-y-1/2 h-full w-full py-8">
                                <div class="h-full bg-gray-50 bg-opacity-70 shadow-md rounded-2xl"></div>
                            </div>
                            <div class="relative py-12 px-16 text-center bg-white shadow-md rounded-2xl">
                               <div class="max-w-2xl mx-auto">
                                    <div class="mb-4 inline-block mx-auto">

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

Testimonial Carousel with Star Rating and Navigation Arrows

A testimonials section with a centered heading, subtitle, and a single featured customer quote card with five green stars, a quote, and attribution. Left and right arrow buttons sit beside a stacked card effect suggesting additional testimonials in a carousel.

AI Testimonials Component Generator

Tailwind Component #52

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="mb-20">
                <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="mb-14">
                <span class="block font-medium text-gray-600 mb-6">Research and Development (R&amp;D)</span>
                <div class="flex flex-wrap -mx-4 -mb-8">
                    <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
                        <div class="relative py-6 px-8 bg-white rounded-2xl shadow-md overflow-hidden">
                            <div class="absolute top-0 left-0 w-full pt-1 bg-lime-500"></div>
                            <h5 class="text-xl font-medium mb-4">Renewable Energy Researcher</h5>
                            <div class="flex flex-wrap gap-2 mb-6">
                                <span class="inline-flex items-center pl-2 pr-3 text-sm font-medium border rounded-full">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M13.4 6.79999C13.4 11 7.99998 14.6 7.99998 14.6C7.99998 14.6 2.59998 11 2.59998 6.79999C2.59998 5.36783 3.1689 3.99431 4.1816 2.98162C5.1943 1.96892 6.56781 1.39999 7.99998 1.39999C9.43214 1.39999 10.8057 1.96892 11.8184 2.98162C12.831 3.99431 13.4 5.36783 13.4 6.79999Z" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M8.00001 8.6C8.99413 8.6 9.80001 7.79411 9.80001 6.8C9.80001 5.80589 8.99413 5 8.00001 5C7.0059 5 6.20001 5.80589 6.20001 6.8C6.20001 7.79411 7.0059 8.6 8.00001 8.6Z" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>                                                                     
                                    <span class="ml-2 text-gray-900 leading-5">San Francisco, US</span>
                                </span>
                                <span class="inline-flex items-center pl-2 pr-3 text-sm font-medium border rounded-full">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z" stroke="#1D1F1E" 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

Job Listings Grid with Department Sections and Apply Cards

A careers section headed "Join our team" with grouped job openings under department labels (R&D, Engineering), each shown as a white card with a lime top accent, location and employment-type pills, and an Apply link. The cards are arranged in multi-column grids with generous spacing on a cream background.

AI Careers Component Generator

Tailwind Component #53

Tailwind CSS

Flow

<section class="relative py-24 md:py-32 xl:py-52 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

404 Not Found Error Page with Back to Home and Support Buttons

A centered error state displaying a large lime-green 404 heading, a short explanatory message, and two buttons: a filled dark green 'Back to home' button and an outlined 'Support' button. The light background has a soft green gradient glow on the upper left.

AI HTTP codes Component Generator

Tailwind Component #54

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">
                <h1 class="font-heading text-6xl mb-6">FAQ</h1>
                <p class="text-gray-700">Here you will find the answers to the frequently asked questions.</p>
            </div>
           <div class="max-w-xl mx-auto lg:max-w-none">
                <div class="flex flex-wrap -mx-4 mb-24">
                    <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-0">
                        <button x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="flex w-full py-4 px-8 mb-4 items-start justify-between text-left bg-white shadow-md rounded-2xl">
                            <div class="pr-5">
                                <h5 class="text-lg font-medium">What is green energy?</h5>
                                <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                                    <p class="text-gray-700 mt-4">We provide a range of green energy solutions, including solar power systems, wind turbines, energy-efficient appliances, and smart home technologies to enhance energy sustainability.</p>
                                </div>
                            </div>
                            <span class="flex-shrink-0">
                                <div :class="{'hidden': accordion}">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12 5.69995V18.3" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M5.69995 12H18.3" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>   
                                  </div>
                                  <div :class="{'hidden': !accordion}" class="hidden">

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

FAQ accordion section with green energy questions and support prompt

A centered FAQ section with a large heading, subtitle, and a two-column list of collapsed question rows marked with plus icons. A footer prompt with a lime support icon, a Contact Us link, and a hotline number invites further questions.

AI FAQ Component Generator

Tailwind Component #55

Tailwind CSS

Flow

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden">
        <div class="bg-teal-900">
            <nav class="mx-4 py-6">
                <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/logo-white-flow.svg" alt="">
                            </a>
                            <ul class="hidden md:flex ml-10">
                                <li class="mr-8"><a class="inline-block text-white hover:text-lime-500 font-medium" href="#">About us</a></li>
                                <li class="mr-8"><a class="inline-block text-white hover:text-lime-500 font-medium" href="#">Team</a></li>
                                <li class="mr-8"><a class="inline-block text-white hover:text-lime-500 font-medium" href="#">Solutions</a></li>
                                <li><a class="inline-block text-white hover:text-lime-500 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-white hover:text-teal-900 border border-white hover:border-lime-500 hover:bg-lime-500 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-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>
                            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="md:hidden text-white hover:text-lime-500">
                                <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>

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

Dark Green Top Navigation Bar with Logo, Links, Login and CTA

A horizontal top navigation bar on a dark green background with the Flow logo at left, text links for About us, Team, Solutions and Blog, and right-aligned Login outlined button and a lime green Get in touch call-to-action button.

AI Navigation (horizontal) Component Generator

Tailwind Component #56

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="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/logo-white-flow.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 text-white font-bold">Platform</h3>
                            <ul>
                                <li class="mb-4"><a class="inline-block text-gray-600 hover:text-lime-500 font-medium" href="#">Solutions</a></li>
                                <li class="mb-4"><a class="inline-block text-gray-600 hover:text-lime-500 font-medium" href="#">How it works</a></li>
                                <li><a class="inline-block text-gray-600 hover:text-lime-500 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 text-white font-bold">Resources</h3>
                            <ul>
                            <li class="mb-4"><a class="inline-block text-gray-600 hover:text-lime-500 font-medium" href="#">Blog</a></li>
                            <li class="mb-4"><a class="inline-block text-gray-600 hover:text-lime-500 font-medium" href="#">Help Center</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 #57

Tailwind CSS

Flow

<section class="relative bg-teal-900 overflow-hidden">
        <div class="flex flex-wrap">
            <div class="w-full lg:w-1/2 xl:w-2/3 pt-12 px-5 xl:px-20 pb-24">
                <div class="flex mb-20 lg:mb-32 items-center justify-between">
                    <span>
                        <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.1665" y="6.6665" width="1.66667" height="10" rx="0.833333" fill="#022C22"></rect>
                            <rect x="19.1665" y="23.3335" width="1.66667" height="10" rx="0.833333" fill="#022C22"></rect>
                            <rect x="28.8391" y="9.98291" width="1.66667" height="10" rx="0.833333" transform="rotate(45 28.8391 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.6665" y="20.8333" width="1.66667" height="10" rx="0.833333" transform="rotate(-90 6.6665 20.8333)" fill="#022C22"></rect>
                            <rect x="21.7678" y="22.9463" width="1.66667" height="10" rx="0.833333" transform="rotate(-45 21.7678 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>                    
                    </span>
                    <p class="text-white">
                        <span class="opacity-80">New to Flow?</span>
                        <a href="#" class="inline-block font-medium underline opacity-80 hover:opacity-100">Create an account</a>
                    </p>
                </div>
                <div class="max-w-sm mx-auto">
                    <form action="">

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

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 -mx-4">
                <div class="w-full lg:w-1/3 px-4 mb-10 lg:mb-0">
                    <div>
                        <span class="font-medium">Global partners that trusted us</span>
                    </div>
                </div>
                <div class="w-full lg:w-2/3 px-4">
                    <div class="flex flex-wrap justify-between -mx-4">
                        <div class="w-1/2 xs:w-1/4 lg:w-1/5 px-4 mb-6 sm:mb-0">
                            <img class="block h-7" src="flow-assets/logos/brands/logo-clouds-4.svg" alt="">
                        </div>
                        <div class="w-1/2 xs:w-1/4 lg:w-1/5 px-4 mb-6 sm:mb-0">
                            <img class="block h-7" src="flow-assets/logos/brands/logo-clouds-3.svg" alt="">
                        </div>
                        <div class="w-1/2 xs:w-1/4 lg:w-1/5 px-4">
                            <img class="block h-7" src="flow-assets/logos/brands/logo-clouds-2.svg" alt="">
                        </div>
                        <div class="w-1/2 xs:w-1/4 lg:w-1/5 px-4">
                            <img class="block h-7" src="flow-assets/logos/brands/logo-clouds-1.svg" alt="">
                        </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 Logo clouds Component Generator

Tailwind Component #59

Tailwind CSS

Flow

<section class="p-4 bg-white">
        <div class="pt-16 pb-24 px-5 xs:px-8 xl:px-12 bg-lime-500 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="#022C22"></circle>
                    </svg>                                           
                    <span class="inline-block ml-2 text-sm font-medium">Solutions</span>                        
                </div>
                <div class="border-t border-teal-900 border-opacity-25 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 lg:w-1/4 px-4 mb-12 lg: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="white"></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>                                    
                                <h5 class="text-2xl font-medium mt-6 mb-3">EV charging </h5>
                                <p class="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 mt-auto text-lg font-medium hover:text-teal-800">Read more</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 Features Component Generator

Tailwind Component #60

Tailwind CSS

Flow

<section x-data="{ activeSlide: 1, slideCount: 2}" class="py-12 lg:py-24 bg-teal-900 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 text-white mb-4">Meet our experts</h1>
                        <p class="text-white opacity-80">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-white opacity-80 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-white 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

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

Get the code for 13,400+ components

Solar Energy Blog Article Page with Newsletter Signup and Related Posts

Tailwind Component #42

Get the code for 13,400+ components

Footer with link columns and newsletter signup

Tailwind Component #43

Get the code for 13,400+ components

Tailwind Component #44

Get the code for 13,400+ components

Meet Our Experts Team Grid on Dark Green Background

Tailwind Component #45

Get the code for 13,400+ components

Pricing Plans with Feature Comparison Table

Tailwind Component #46

Get the code for 13,400+ components

Dark green call-to-action banner with heading and lime button

Tailwind Component #47

Get the code for 13,400+ components

Centered About Us Hero Section with Read More Button

Tailwind Component #48

Get the code for 13,400+ components

Blog Article Card Grid with Header and See All Button

Tailwind Component #49

Get the code for 13,400+ components

Split-screen newsletter signup hero with EV charging photo

Tailwind Component #50

Get the code for 13,400+ components

Dark Green Privacy Settings Cookie Consent Banner

Tailwind Component #51

Get the code for 13,400+ components

Testimonial Carousel with Star Rating and Navigation Arrows

Tailwind Component #52

Get the code for 13,400+ components

Job Listings Grid with Department Sections and Apply Cards

Tailwind Component #53

Get the code for 13,400+ components

404 Not Found Error Page with Back to Home and Support Buttons

Tailwind Component #54

Get the code for 13,400+ components

FAQ accordion section with green energy questions and support prompt

Tailwind Component #55

Get the code for 13,400+ components

Dark Green Top Navigation Bar with Logo, Links, Login and CTA

Tailwind Component #56

Get the code for 13,400+ components

Tailwind Component #57

Get the code for 13,400+ components

Tailwind Component #58

Get the code for 13,400+ components

Tailwind Component #59

Get the code for 13,400+ components

Tailwind Component #60

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.