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

Tailwind CSS

Flow

<section x-data="{ activeSlide: 1, slideCount: 3 }" class="pt-12 lg:pt-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">Solutions</span>                        
            </div>
            <div class="border-t pt-16">
                <div>
                    <h1 class="font-heading text-4xl sm:text-5xl md:text-6xl mb-6">Key to clean future</h1>
                    <p class="text-lg text-gray-700">Our commitment to green energy is paving the way for a cleaner, healthier planet.</p>
                </div>
            </div>
        </div>
        <div class="px-4 pb-4 mt-12 md:mt-24">
            <div class="py-12 md:py-16 bg-teal-900 rounded-3xl">
                <div class="container mx-auto px-4">
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
                            <div class="max-w-lg lg:pt-14">
                                <h1 class="font-heading text-4xl sm:text-5xl text-white mb-6">Solar Energy</h1>
                                <p class="text-lg text-white opacity-80 mb-10">Solar panels convert sunlight into electricity. Photovoltaic (PV) cells on these panels capture the energy from the sun and convert it into electrical power.</p>
                                <a href="#" class="inline-flex mb-20 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">Learn 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 #282

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">About us</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">Blog</h1>
                        </div>
                    </div>
                    <div class="w-full sm:w-1/3 px-4 sm:text-right">
                        <a x-on:click.prevent="showContent = true" :class="{'hidden': showContent}" href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-black hover:text-white border border-teal-900 hover:bg-teal-900 rounded-full transition duration-300">
                            <span class="mr-2">See all</span>
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M4.75 10H15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M10 4.75L15.25 10L10 15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>                            
                        </a>
                    </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Blog Component Generator

Tailwind Component #283

Tailwind CSS

Flow

<section class="pt-12 md:py-24 xl:py-32 bg-orange-50 relative overflow-hidden">
        <div class="hidden md:block absolute top-0 left-0 h-full w-1/3">
            <div class="flex h-full items-center justify-center p-2 bg-lime-500">
                <img class="block" src="flow-assets/cta/circle-photo.png" alt="">
            </div>
        </div>
        <div class="container mx-auto px-4 relative">
            <div class="flex justify-end">  
                <div class="max-w-md lg:max-w-xl xl:max-w-none mx-auto md:mx-0">
                    <h1 class="font-heading text-5xl sm:text-6xl tracking-sm mb-6">Join the green movement</h1>
                    <p class="text-lg text-gray-700 mb-10">Our commitment to green energy is paving the way for a cleaner, healthier planet. </p>
                    <a href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-white hover:text-teal-900 border border-teal-900 hover:border-lime-500 bg-teal-900 hover:bg-lime-500 rounded-full transition duration-200">Get in touch</a>
                </div>
            </div>
        </div>
        <div class="md:hidden flex mt-20 items-center justify-center p-2 bg-lime-500">
            <img class="block" src="flow-assets/cta/circle-photo.png" alt="">
        </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 #284

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-20">
                <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">
                    <div class="sm:flex lg:justify-end">
                        <div class="relative inline-block w-full max-w-xs mb-4 sm:mb-0 sm:mr-4 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">
                                    <path d="M6.3999 8.2L9.9999 11.8L13.5999 8.2" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>  
                            </span>    
                            <select name="" id="" class="w-full px-4 py-3 font-medium border rounded-full appearance-none cursor-pointer outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 bg-transparent relative">

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

Tailwind CSS

Flow

<section x-data="{toggle: false}" class="relative py-12 lg:py-24 bg-orange-50 overflow-hidden">
        <img class="absolute top-0 right-0" src="flow-assets/pricing/waves-right-top.png" alt="">
        <div class="container mx-auto px-4 relative">
            <div class="max-w-2xl mb-20">
                <h1 class="font-heading text-5xl sm:text-6xl tracking-xs 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">
                <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>
                <div class="relative mb-8 p-8 bg-white shadow-md rounded-2xl overflow-hidden">
                    <div class="absolute top-0 left-0 h-1 w-full bg-lime-500"></div>
                    <div class="flex flex-wrap -mx-4">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Pricing Component Generator

Tailwind Component #286

Tailwind CSS

Flow

<section class="py-12 lg:py-24 bg-teal-900">
        <div class="container mx-auto px-4">
            <div class="max-w-sm lg:max-w-md mx-auto text-center mb-16">
                <h4 class="font-heading text-4xl md:text-5xl text-white">Global partners that trusted us</h4>
            </div>
            <div class="md:max-w-xl mx-auto lg:max-w-none">
                <div class="flex flex-wrap justify-between -mb-2 -mx-2">
                    <div class="w-1/2 md:w-1/4 px-2 mb-2">
                        <div class="flex h-14 px-6 lg:px-12 items-center justify-center bg-white bg-opacity-25 rounded-lg">
                            <img class="block h-7" src="flow-assets/logos/brands/logo-light-4.svg" alt="">
                        </div>
                    </div>
                    <div class="w-1/2 md:w-1/4 px-2 mb-2">
                        <div class="flex h-14 px-6 lg:px-12 items-center justify-center bg-white bg-opacity-25 rounded-lg">
                            <img class="block h-7" src="flow-assets/logos/brands/logo-light-3.svg" alt="">
                        </div>
                    </div>
                    <div class="w-1/2 md:w-1/4 px-2 mb-2">
                        <div class="flex h-14 px-6 lg:px-12 items-center justify-center bg-white bg-opacity-25 rounded-lg">
                            <img class="block h-7" src="flow-assets/logos/brands/logo-light-2.svg" alt="">
                        </div>
                    </div>
                    <div class="w-1/2 md:w-1/4 px-2 mb-2">
                        <div class="flex h-14 px-6 lg:px-12 items-center justify-center bg-white bg-opacity-25 rounded-lg">

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

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 results</span>                        
            </div>
            <div class="border-t pt-16">
                <div class="max-w-xl">
                    <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl mb-20">We are committed to a sustainable future</h2>
                </div>
                <div>
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-full md:w-1/2 px-4 mb-8 lg:mb-0">
                            <div class="h-full py-10 px-5 xs:px-10 bg-lime-500 rounded-2xl">
                                <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>
                                    <rect x="23" y="8" width="2" height="12" rx="1" fill="#022C22"></rect>
                                    <rect x="23" y="28" width="2" height="12" rx="1" fill="#022C22"></rect>
                                    <rect x="34.6067" y="11.9792" width="2" height="12" rx="1" transform="rotate(45 34.6067 11.9792)" fill="#022C22"></rect>
                                    <rect x="20.4646" y="26.1213" width="2" height="12" rx="1" transform="rotate(45 20.4646 26.1213)" fill="#022C22"></rect>
                                    <rect x="28" y="25" width="2" height="12" rx="1" transform="rotate(-90 28 25)" fill="#022C22"></rect>
                                    <rect x="8" y="25" width="2" height="12" rx="1" transform="rotate(-90 8 25)" fill="#022C22"></rect>

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

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-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="flex flex-wrap -mx-4">
                <div class="w-full xs:w-1/2 sm:w-1/3 px-4 mb-24">
                    <div>
                        <div class="flex mx-auto items-center justify-center w-36 h-36 mb-8 p-1 bg-lime-500 rounded-xl">
                            <img class="block h-full rounded-full mx-auto" src="flow-assets/team/avatar-circle-team1.png" alt="">
                        </div>
                        <div class="text-center">
                            <span class="block text-xl font-medium">Jenny Wilson</span>
                            <span class="text-lg text-gray-700">Senior Sustainability Consultant</span>
                        </div>
                    </div>
                </div>
                <div class="w-full xs:w-1/2 sm:w-1/3 px-4 mb-24">
                    <div>
                        <div class="flex mx-auto items-center justify-center w-36 h-36 mb-8 p-1 bg-lime-500 rounded-xl">
                            <img class="block h-full rounded-full mx-auto" src="flow-assets/team/avatar-circle-team2.png" alt="">
                        </div>
                        <div class="text-center">

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

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI About Component Generator

Tailwind Component #290

Tailwind CSS

Flow

<section x-data="{ activeSlide: 1, slideCount: 3 }" 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 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="4" cy="4" r="4" fill="#BEF264"></circle>
                    </svg>                        
                    <span class="inline-block ml-2 text-sm font-medium text-white">Testimonials</span>                        
                </div>
                <div class="border-t border-white border-opacity-25 pt-16">
                    <div class="max-w-md mx-auto md:max-w-none">
                        <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: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 text-white mb-10">“Flow transformed my energy use. Efficient, green tech, outstanding service!”</h4>
                                            <span class="block text-xl font-medium text-white">Jenny Wilson</span>
                                            <span class="block mb-12 lg:mb-32 text-lg text-gray-500">Solar energy service</span>
                                        </div>
                                        <div class="flex-shrink-0 px-4 w-full">
                                            <h4 class="text-3xl lg:text-4xl font-medium text-white mb-10">“Efficient, green tech, outstanding service”</h4>
                                            <span class="block text-xl font-medium text-white">John Jones</span>
                                            <span class="block mb-12 lg:mb-32 text-lg text-gray-500">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 #291

Tailwind CSS

Flow

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

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

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Contact Component Generator

Tailwind Component #293

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-2xl mx-auto">
                <div class="pt-6 pr-4 border-t-2 border-teal-900 mb-14">
                    <h5 class="text-lg font-medium mb-4">What is green energy?</h5>
                    <p class="text-gray-600">Green energy, also known as renewable energy, is derived from natural sources that are replenished on a human timescale. This includes solar, wind, hydro, geothermal, and biomass energy, among others.</p>
                </div>
                <div class="pt-6 pr-4 border-t-2 border-teal-900 mb-14">
                    <h5 class="text-lg font-medium mb-4">How does green energy benefit the environment?</h5>
                    <p class="text-gray-600">Green energy reduces the reliance on fossil fuels, lowering greenhouse gas emissions and mitigating climate change. It also helps conserve natural resources and promotes a cleaner, sustainable future.</p>
                </div>
                <div class="pt-6 pr-4 border-t-2 border-teal-900 mb-14">
                    <h5 class="text-lg font-medium mb-4">What green energy solutions does your company offer?</h5>
                    <p class="text-gray-600">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 class="pt-6 pr-4 border-t-2 border-teal-900">
                    <h5 class="text-lg font-medium mb-4">What support services do you offer after installing green energy solutions?</h5>
                    <p class="text-gray-600">We offer ongoing maintenance, monitoring, and support services to ensure the optimal performance and longevity of your green energy system. Our team is ready to assist with any issues that may arise.</p>
                </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

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

Get the code for 13,400+ components

Tailwind Component #282

Get the code for 13,400+ components

Tailwind Component #283

Get the code for 13,400+ components

Tailwind Component #284

Get the code for 13,400+ components

Tailwind Component #285

Get the code for 13,400+ components

Tailwind Component #286

Get the code for 13,400+ components

Tailwind Component #287

Get the code for 13,400+ components

Tailwind Component #288

Get the code for 13,400+ components

Tailwind Component #289

Get the code for 13,400+ components

Tailwind Component #290

Get the code for 13,400+ components

Tailwind Component #291

Get the code for 13,400+ components

Tailwind Component #292

Get the code for 13,400+ components

Tailwind Component #293

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