Redirecting to PayPal

Can't find the right component?

Describe it and Shuffle AI builds it in seconds, ready to edit and export.

Free to start Generate with AI

Shuffle Components in Gradia library

Browse 220 ready-made UI components available in Shuffle Editor.

Framework

UI Library

Components

Tailwind Component #81

<section class="relative py-36 bg-black overflow-hidden"><img class="absolute left-0 bottom-0" src="gradia-assets/elements/contact/radial2.svg" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <div class="flex flex-wrap -m-6">
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-lg mb-14">
          <h2 class="mb-7 font-heading font-semibold text-6xl sm:text-7xl text-white" >Get in touch</h2>
          <p class="text-gray-400 text-lg" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
        </div>
        <div class="flex flex-wrap -m-10">
          <div class="w-full p-10">
            <div class="md:max-w-xs">
              <h3 class="mb-4 font-heading font-medium text-xl text-white" >United States</h3>
              <p class="text-lg text-gray-400" >support.usa@gradia.co</p>
              <p class="text-lg text-gray-400" >+1 (495) 389 3995</p>
            </div>
          </div>
          <div class="w-full p-10">
            <div class="md:max-w-xs">
              <h3 class="mb-4 font-heading font-medium text-xl text-white" >Canada</h3>
              <p class="text-lg text-gray-400" >support.usa@gradia.co</p>
              <p class="text-lg text-gray-400" >+1 (495) 389 3995</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="p-8 max-w-lg mx-auto bg-gray-800 rounded-10">
          <div class="flex flex-wrap max-w-xl mx-auto">
            <div class="w-full mb-5">
              <input class="w-full px-5 py-4 text-gray-400 text-base bg-transparent border border-gray-700 outline-none focus:ring-4 focus:ring-indigo-500 placeholder-gray-400 rounded" type="text" placeholder="Your full name">
            </div>
            <div class="w-full mb-5">
              <input class="w-full px-5 py-4 text-gray-400 text-base bg-transparent border border-gray-700 outline-none focus:ring-4 focus:ring-indigo-500 placeholder-gray-400 rounded" type="text" placeholder="Your email address">
            </div>
            <div class="w-full mb-5">
              <textarea class="w-full h-40 px-5 py-4 text-gray-400 text-base bg-transparent border border-gray-700 outline-none focus:ring-4 focus:ring-indigo-500 placeholder-gray-400 resize-none rounded" type="text" placeholder="Write message"></textarea>
            </div>
            <div class="w-full mb-5">
              <div class="group relative">
                <div class="absolute top-0 left-0 w-full h-full bg-gradient-cyan2 opacity-0 group-hover:opacity-50 rounded-lg transition ease-out duration-300"></div>
                <button class="p-1 w-full font-heading font-semibold text-xs text-gray-900 uppercase tracking-px overflow-hidden rounded-md">
                  <div class="relative p-5 px-11 bg-gradient-cyan2 overflow-hidden rounded-md">
                    <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-white transition ease-in-out duration-500"></div>
                    <p class="relative z-10" >Send message</p>
                  </div>
                </button>
              </div>
            </div>
            <div class="w-full">
              <p class="max-w-xs mx-auto text-sm text-gray-400 text-center" >By clicking the send button, you agree with our Terms &amp; Conditions</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #82

<section class="py-36 bg-gradient-gray2 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center -m-6">
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-lg">
          <p class="mb-9 font-heading max-w-max px-5 py-2.5 uppercase font-semibold text-xs tracking-wider text-white bg-gradient-green rounded-10" >Rated #1 on G2</p>
          <h2 class="mb-6 font-heading font-semibold text-6xl sm:text-7xl text-gray-900" >Learn marketing from the industry experts</h2>
          <p class="mb-9 text-xl text-gray-900" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
          <button class="group p-0.5 mb-8 font-heading block w-full md:w-auto text-base text-gray-900 font-bold bg-white hover:bg-gray-50 bg-gradient-cyan overflow-hidden rounded-md">
            <div class="relative py-4 px-9 bg-white rounded">
              <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-gradient-cyan transition ease-in-out duration-500"></div>
              <p class="relative z-10" >Join the Event</p>
            </div>
          </button>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="flex flex-wrap justify-center -m-6 xl:-m-14">
          <div class="w-full lg:w-auto p-6 xl:p-14">
            <div class="text-center max-w-max mx-auto"><img class="mb-4" src="gradia-assets/images/cta/avatar.png" alt="">
              <h3 class="mb-0.5 font-heading font-bold text-xl text-gray-900" >Albert Flores</h3>
              <p class="text-xs text-gray-600" >Digital Marketer @ Grower.io</p>
            </div>
          </div>
          <div class="w-full lg:w-auto p-6 xl:p-14">
            <div class="lg:relative lg:top-24 text-center max-w-max mx-auto"><img class="mb-4" src="gradia-assets/images/cta/avatar2.png" alt="">
              <h3 class="mb-0.5 font-heading font-bold text-xl text-gray-900" >Bessie Cooper</h3>
              <p class="text-xs text-gray-600" >Product Manager @ Innovate</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #83

<section class="pt-24 overflow-hidden">
  <div class="container mx-auto px-4"><img class="mx-auto mb-16" src="gradia-assets/logos/gradia-name-black.svg" alt="">
    <ul class="flex flex-wrap justify-center -m-5 pb-8">
      <li class="p-5"><a class="font-heading text-base text-gray-900 hover:text-gray-700" href="#" >Features</a></li>
      <li class="p-5"><a class="font-heading text-base text-gray-900 hover:text-gray-700" href="#" >Pricing</a></li>
      <li class="p-5"><a class="font-heading text-base text-gray-900 hover:text-gray-700" href="#" >Affiliate Program</a></li>
      <li class="p-5"><a class="font-heading text-base text-gray-900 hover:text-gray-700" href="#" >Press Kit</a></li>
    </ul>
    <div class="border-b border-gray-100"></div>
    <p class="text-gray-600 text-center py-8 text-sm" >© Copyright 2022. All Rights Reserved by Gradia.</p>
  </div>
</section>

Tailwind Component #84

<section class="py-32 bg-gray-100 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center max-w-6xl mx-auto -m-9">
      <div class="w-full md:flex-1 p-9"><img class="mb-12" src="gradia-assets/elements/testimonials/quote.svg" alt="">
        <h2 class="mb-8 font-heading font-semibold text-5xl sm:text-6xl text-gray-900" >You made it so simple. Our new site is so much faster and easier to work with than my old site. I just choose the page, make the change.</h2>
        <p class="text-xl text-gray-600" >Daniel Jonas, Project Manager at Kramer.io</p>
      </div>
      <div class="w-full md:w-auto p-9">
        <div class="bg-gradient-cyan2 p-1 mx-auto max-w-max overflow-hidden rounded-150"><img class="object-cover rounded-150" src="gradia-assets/images/testimonials/man.jpg" alt=""></div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #85

<section class="py-36 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="bg-gradient-cyan2 rounded-2xl shadow-9xl">
      <div class="flex flex-wrap">
        <div class="w-full lg:flex-1 px-12 py-14 lg:px-24 lg:py-28">
          <h2 class="mb-6 font-heading font-bold text-6xl sm:text-8xl xl:text-10xl text-gray-900" >Let’s make things easier</h2>
          <p class="mb-9 lg:max-w-lg text-gray-600 text-lg" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
          <button class="group relative font-heading py-4 px-6 block w-full md:w-auto text-base text-white font-medium bg-gray-900 overflow-hidden rounded-lg">
            <div class="absolute top-0 left-0 transform -translate-x-full group-hover:-translate-x-0 h-full w-full transition ease-in-out duration-500 bg-gray-800"></div>
            <p class="relative z-10" >Download Mobile Now</p>
          </button>
        </div>
        <div class="w-full lg:w-auto ml-auto"><img class="mx-auto lg:mr-0 lg:ml-auto h-full object-cover" src="gradia-assets/images/applications/phone-screen.png" alt=""></div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #86

<section class="relative pt-24 pb-28 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="max-w-md mx-auto mb-20">
      <h2 class="mb-5 font-heading font-semibold text-center text-5xl sm:text-6xl text-gray-900" >Grow fast, with us</h2>
      <p class="text-base text-center text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
    </div>
    <div class="max-w-3xl mx-auto">
      <div class="flex flex-wrap justify-center -m-6 md:-m-16 divide-y md:divide-y-0 md:divide-x divide-gray-200">
        <div class="w-full md:w-1/2 p-6 md:p-16">
          <h2 class="mb-3 font-heading font-bold text-12xl sm:text-13xl md:text-14xl xl:text-15xl text-center text-transparent bg-clip-text bg-gradient-blue" >98%</h2>
          <h3 class="mb-3 font-heading font-semibold text-center text-gray-900 text-lg" >Average Satisfaction Rate</h3>
          <p class="text-center text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor</p>
        </div>
        <div class="w-full md:w-1/2 p-6 md:p-16">
          <h2 class="mb-3 font-heading font-bold text-12xl sm:text-13xl md:text-14xl xl:text-15xl text-center text-transparent bg-clip-text bg-gradient-green" >117%</h2>
          <h3 class="mb-3 font-heading font-semibold text-center text-gray-900 text-lg" >Average ROI on Ads</h3>
          <p class="text-center text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor</p>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #87

<section class="relative pt-28 pb-32 overflow-hidden">
  <div class="container mx-auto px-4 mb-12">
    <p class="mb-5 font-heading text-xs text-gray-600 font-semibold text-center uppercase tracking-px" >The features that made us special</p>
    <h2 class="mb-20 max-w-2xl mx-auto font-heading font-bold text-center text-6xl sm:text-7xl text-gray-900" >Track every single moment of your customers</h2>
    <div class="flex flex-wrap -m-7">
      <div class="w-full md:w-1/3 p-7">
        <div class="h-full p-0.5 bg-gradient-cyan rounded-10 transform hover:-translate-y-3 transition ease-out duration-1000">
          <div class="h-full p-8 bg-white rounded-lg"><img class="relative -left-2 mb-12" src="gradia-assets/images/features/chart.png" alt="">
            <h3 class="mb-5 font-heading font-bold text-gray-900 text-xl" >Get live reports</h3>
            <p class="text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-7">
        <div class="h-full p-0.5 bg-gradient-cyan rounded-10 transform hover:-translate-y-3 transition ease-out duration-1000">
          <div class="h-full p-8 bg-white rounded-lg"><img class="relative -left-2 mb-12" src="gradia-assets/images/features/messages.png" alt="">
            <h3 class="mb-5 font-heading font-bold text-gray-900 text-xl" >Chat with customers</h3>
            <p class="text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-7">
        <div class="h-full p-0.5 bg-gradient-cyan rounded-10 transform hover:-translate-y-3 transition ease-out duration-1000">
          <div class="h-full p-8 bg-white rounded-lg"><img class="relative -left-2 mb-12" src="gradia-assets/images/features/warning.png" alt="">
            <h3 class="mb-5 font-heading font-bold text-gray-900 text-xl" >Quality speed</h3>
            <p class="text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #88

<section class="relative pt-24 pb-36 bg-black overflow-hidden"><img class="absolute right-0 top-0" src="gradia-assets/elements/teams/radial.svg" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <div class="max-w-xl">
      <h2 class="mb-6 font-heading font-bold text-6xl sm:text-7xl text-white" >Team Members</h2>
      <p class="mb-20 text-lg text-gray-400" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
    </div>
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/2 xl:w-1/4 p-3">
        <div class="p-10 text-center transform hover:-translate-y-3 bg-white transition ease-out duration-1000"><img class="mb-7 mx-auto" src="gradia-assets/images/teams/avatar-oval-md.png" alt="">
          <h3 class="mb-1 font-bold text-gray-900 text-xl" >Eleanor Pena</h3>
          <p class="pb-8 text-sm text-gray-500 border-b border-gray-200" >Team Leader</p><a class="inline-block pt-8 font-heading font-semibold text-xs uppercase text-gray-900 hover:text-gray-700" href="#" >Contact us</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 p-3">
        <div class="p-10 text-center transform hover:-translate-y-3 bg-white transition ease-out duration-1000"><img class="mb-7 mx-auto" src="gradia-assets/images/teams/avatar-oval-md2.png" alt="">
          <h3 class="mb-1 font-bold text-gray-900 text-xl" >Cameron Williamson</h3>
          <p class="pb-8 text-sm text-gray-500 border-b border-gray-200" >Software Developer</p><a class="inline-block pt-8 font-heading font-semibold text-xs uppercase text-gray-900 hover:text-gray-700" href="#" >Contact us</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 p-3">
        <div class="p-10 text-center transform hover:-translate-y-3 bg-white transition ease-out duration-1000"><img class="mb-7 mx-auto" src="gradia-assets/images/teams/avatar-oval-md3.png" alt="">
          <h3 class="mb-1 font-bold text-gray-900 text-xl" >Kathryn Murphy</h3>
          <p class="pb-8 text-sm text-gray-500 border-b border-gray-200" >Scrum Master</p><a class="inline-block pt-8 font-heading font-semibold text-xs uppercase text-gray-900 hover:text-gray-700" href="#" >Contact us</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 p-3">
        <div class="p-10 text-center transform hover:-translate-y-3 bg-white transition ease-out duration-1000"><img class="mb-7 mx-auto" src="gradia-assets/images/teams/avatar-oval-md4.png" alt="">
          <h3 class="mb-1 font-bold text-gray-900 text-xl" >Bessie Cooper</h3>
          <p class="pb-8 text-sm text-gray-500 border-b border-gray-200" >UI/UX Designer</p><a class="inline-block pt-8 font-heading font-semibold text-xs uppercase text-gray-900 hover:text-gray-700" href="#" >Contact us</a>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #89

<section class="relative pt-16 pb-56 overflow-hidden"><img class="absolute left-1/2 transform -translate-x-1/2 bottom-0" src="gradia-assets/elements/http-codes/radial3.svg" alt="">
  <div class="relative z-10 container mx-auto px-4"><img class="mx-auto mb-36" src="gradia-assets/logos/gradia-name-black.svg" alt=""><img class="mb-11 mx-auto" src="gradia-assets/elements/http-codes/sad.svg" alt="">
    <div class="md:max-w-xl mx-auto mb-12">
      <h2 class="mb-5 font-heading font-bold text-6xl sm:text-8xl xl:text-10xl text-gray-900 text-center" >Oh no! The page does not exist.</h2>
    </div>
    <div class="group relative md:max-w-max mx-auto">
      <div class="absolute top-0 left-0 w-full h-full bg-gradient-green opacity-0 group-hover:opacity-50 rounded-lg transition ease-out duration-300"></div>
      <button class="p-1 w-full font-heading font-semibold text-xs text-gray-900 group-hover:text-white uppercase overflow-hidden rounded-md">
        <div class="relative p-5 bg-gradient-green overflow-hidden rounded-md">
          <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-gray-900 transition ease-in-out duration-500"></div>
          <div class="relative z-10 flex flex-wrap items-center justify-center -m-1">
            <div class="w-auto p-1">
              <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 14.75L2.75 9.5M2.75 9.5L8 4.25M2.75 9.5L16.25 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <div class="w-auto p-1">
              <p >Go back to Homepage</p>
            </div>
          </div>
        </div>
      </button>
    </div>
  </div>
</section>

Tailwind Component #90

<section class="relative py-20 bg-black overflow-hidden"><img class="w-full h-full absolute top-1/2 left-3/4 transform -translate-y-1/2 -translate-x-3/4" src="gradia-assets/elements/cta/radial2.png" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <div class="flex flex-wrap items-center justify-between -m-6">
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-xl">
          <h2 class="font-heading font-bold text-white text-6xl sm:text-7xl" >Get maximum results from all projects.</h2>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="flex flex-wrap md:justify-end -m-2">
          <div class="w-auto p-2"><a href="#"><img src="gradia-assets/logos/brands/app-store-rounded.png" alt=""></a></div>
          <div class="w-auto p-2"><a href="#"><img src="gradia-assets/logos/brands/play-store-rounded.png" alt=""></a></div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #91

<section class="pt-28 pb-40 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="max-w-xl mx-auto">
      <h2 class="mb-5 font-heading font-bold text-6xl sm:text-8xl xl:text-10xl text-gray-900" >Plan, Select, Grow</h2>
      <p class="mb-20 text-gray-600" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada nisl, ullamcorper pulvinar sed tincidunt tempus. In mi diam neque consectetur quis vitae.</p>
      <div class="p-px bg-gradient-cyan rounded-10 shadow-7xl">
        <div class="p-12 text-center rounded-10 bg-white">
          <p class="mb-7 font-heading text-xs font-semibold text-gray-900 uppercase tracking-px" >Pricing</p>
          <h3 class="mb-4 font-heading font-semibold text-5xl text-gray-900" >$9/user/month</h3>
          <p class="mb-10 text-xl text-gray-600" >Create unlimited project, invite everyone from your team, grow everything fast </p>
          <button class="group relative mb-6 px-16 py-3.5 font-heading bg-gray-900 text-base font-bold text-white overflow-hidden rounded-md">
            <div class="absolute top-0 left-0 transform -translate-x-full group-hover:-translate-x-0 h-full w-full transition ease-in-out duration-500 bg-gradient-cyan"></div>
            <p class="relative z-10" >Create Your First Project</p>
          </button>
          <p class="text-gray-500" >30 days free trial, No credit card required</p>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #92

<section x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }" class="relative pt-28 pb-36 bg-gray-100 overflow-hidden"><img class="absolute top-0 left-1/2 transform -translate-x-1/2" src="gradia-assets/elements/testimonials/radial3.svg" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <div class="max-w-4xl mx-auto">
      <h2 class="mb-16 max-w-3xl mx-auto font-heading font-semibold text-center text-5xl sm:text-6xl text-gray-900" >Hear from Gradia’s users who saved thousands on building websites</h2>
      <div class="px-10 md:px-16 py-12 bg-white rounded-10">
        <div class="flex flex-wrap items-end justify-between -m-4">
          <div class="p-4 w-full md:flex-1 overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex -m-6 transition-transform duration-500 ease-in-out">
              <div x-ref="slide1" class="flex-shrink-0 w-full p-6">
                <img class="mb-11" src="gradia-assets/images/testimonials/logo.svg" alt="">
                <h2 class="mb-9 font-heading font-medium text-2xl text-black" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae et ultricies sapien mauris, urna. Arcu justo, tellus in tellus, sed sed venenatis velit. Nisl nam augue elit at viverra euismod vitae. Est praesent mattis velit morbi nec sit.</h2>
                <div class="flex flex-wrap -m-1.5">
                  <div class="w-auto p-1.5"><img src="gradia-assets/images/testimonials/avatar10.png" alt=""></div>
                  <div class="w-auto p-1.5">
                    <h3 class="font-heading font-semibold text-gray-900 text-lg" >Albert Flores</h3>
                    <p class="text-sm text-gray-600" >Co-Founder, CEO</p>
                  </div>
                </div>
              </div>
              <div x-ref="slide2" class="flex-shrink-0 w-full p-6">
                <img class="mb-11" src="gradia-assets/images/testimonials/logo.svg" alt="">
                <h2 class="mb-9 font-heading font-medium text-2xl text-black" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis neque vel justo suscipit, in pellentesque metus cursus. Etiam euismod euismod risus, a luctus ipsum fermentum eu. Proin bibendum nunc vel felis dapibus, sed cursus nulla congue.</h2>
                <div class="flex flex-wrap -m-1.5">
                  <div class="w-auto p-1.5"><img src="gradia-assets/images/testimonials/avatar10.png" alt=""></div>
                  <div class="w-auto p-1.5">
                    <h3 class="font-heading font-semibold text-gray-900 text-lg" >Victor Ramirez</h3>
                    <p class="text-sm text-gray-600" >Co-Founder, CEO</p>
                  </div>
                </div>
              </div>
              <div x-ref="slide2" class="flex-shrink-0 w-full p-6">
                <img class="mb-11" src="gradia-assets/images/testimonials/logo.svg" alt="">
                <h2 class="mb-9 font-heading font-medium text-2xl text-black" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero non orci tristique, id aliquam dui tincidunt. Proin aliquet justo vitae odio volutpat, vel aliquam elit fringilla. Nunc auctor, tortor vel tincidunt vulputate.</h2>
                <div class="flex flex-wrap -m-1.5">
                  <div class="w-auto p-1.5"><img src="gradia-assets/images/testimonials/avatar10.png" alt=""></div>
                  <div class="w-auto p-1.5">
                    <h3 class="font-heading font-semibold text-gray-900 text-lg" >Benjamin Gonzalez</h3>
                    <p class="text-sm text-gray-600" >Co-Founder, CEO</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="p-4 w-full md:w-auto">
            <div class="flex flex-wrap -m-2">
              <div class="w-auto p-2">
                <a x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" href="#">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10 19L3 12M3 12L10 5M3 12L21 12" stroke="#A1A1AA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </a>
              </div>
              <div class="w-auto p-2">
                <a x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" href="#">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M14 5L21 12M21 12L14 19M21 12L3 12" stroke="#18181B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #93

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden">
  <div class="flex items-center justify-between px-8 py-5 bg-gray-900">
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto mr-14"><a href="#"><img src="gradia-assets/logos/gradia-name-white.svg" alt=""></a></div>
      </div>
    </div>
    <div class="w-auto hidden lg:block">
      <ul class="flex items-center mr-10">
        <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Features</a></li>
        <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Solutions</a></li>
        <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Resources</a></li>
        <li class="font-heading text-white hover:text-gray-200 text-lg"><a href="#" >Pricing</a></li>
      </ul>
    </div>
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto hidden lg:block">
          <button class="group relative p-0.5 font-heading block w-full md:w-auto text-lg text-white font-medium bg-gradient-cyan overflow-hidden rounded-10">
            <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-gradient-cyan transition ease-in-out duration-500"></div>
            <div class="py-2 px-5 bg-gray-900 rounded-lg">
              <p class="relative z-10" >Start Free Trial</p>
            </div>
          </button>
        </div>
        <div class="w-auto lg:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen">
            <svg class="text-gray-800" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="56" height="56" rx="28" fill="currentColor"></rect>
              <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
    <nav class="relative z-10 px-9 py-8 bg-gray-900 h-full">
      <div class="flex flex-wrap justify-between h-full">
        <div class="w-full">
          <div class="flex items-center justify-between -m-2">
            <div class="w-auto p-2"><a class="inline-block" href="#"><img src="gradia-assets/logos/gradia-name-white.svg" alt=""></a></div>
            <div class="w-auto p-2">
              <button x-on:click="mobileNavOpen = !mobileNavOpen">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 18L18 6M6 6L18 18" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="flex flex-col items-center text-center justify-center py-8 w-full">
          <ul>
            <li class="mb-12"><a class="font-heading font-medium text-lg text-white hover:text-gray-200" href="#" >Features</a></li>
            <li class="mb-12"><a class="font-heading font-medium text-lg text-white hover:text-gray-200" href="#" >Solutions</a></li>
            <li class="mb-12"><a class="font-heading font-medium text-lg text-white hover:text-gray-200" href="#" >Resources</a></li>
            <li><a class="font-heading font-medium text-lg text-white hover:text-gray-200" href="#" >Pricing</a></li>
          </ul>
        </div>
        <div class="flex flex-col justify-end w-full">
          <div class="flex flex-wrap">
            <div class="w-full mb-3">
              <button class="p-0.5 font-heading block w-full text-lg text-white font-medium rounded-10">
                <div class="py-2 px-5 rounded-10">
                  <p >Login</p>
                </div>
              </button>
            </div>
            <div class="w-full">
              <button class="group relative p-0.5 font-heading block w-full text-lg text-white font-medium bg-gradient-cyan overflow-hidden rounded-10">
                <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-gradient-cyan transition ease-in-out duration-500"></div>
                <div class="py-2 px-5 bg-gray-900 rounded-lg">
                  <p class="relative z-10" >Start Free Trial</p>
                </div>
              </button>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>
</section>

Tailwind Component #94

<section class="py-44 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center -m-6">
      <div class="w-full md:w-1/2 p-6">
        <div class="max-w-lg">
          <p class="mb-9 max-w-max text-transparent bg-clip-text bg-gradient-cyan font-heading text-xs uppercase font-semibold tracking-px" >The team that made us successful</p>
          <h2 class="mb-7 font-heading font-semibold text-6xl sm:text-7xl text-gray-900" >Our mission is making the customers lives easier now.</h2>
          <p class="text-xl text-gray-900" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="flex flex-wrap justify-center -m-6">
          <div class="w-full lg:w-auto p-6">
            <div class="max-w-max mx-auto">
              <div class="mb-5 bg-gradient-orange"><img src="gradia-assets/images/teams/avatar-bg.png" alt=""></div>
              <h3 class="mb-1 font-heading font-bold text-xl text-gray-900" >Albert Flores</h3>
              <p class="text-xs text-gray-600" >Digital Marketer @ Grower.io</p>
            </div>
          </div>
          <div class="w-full lg:w-auto p-6">
            <div class="xl:mt-24 max-w-max mx-auto">
              <div class="mb-5 bg-gradient-green"><img src="gradia-assets/images/teams/avatar-bg2.png" alt=""></div>
              <h3 class="mb-1 font-heading font-bold text-xl text-gray-900" >Albert Flores</h3>
              <p class="text-xs text-gray-600" >Digital Marketer @ Grower.io</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #95

<section class="relative py-24 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center -m-6">
      <div class="w-full lg:w-7/12 p-8 lg:p-16">
        <div class="bg-gradient-violet2 rounded-2xl"><img class="relative top-3 w-full transform hover:scale-105 transition ease-in-out duration-500" src="gradia-assets/images/features/team.png" alt=""></div>
      </div>
      <div class="w-full lg:w-5/12 p-8 lg:p-16">
        <div class="lg:max-w-md">
          <h2 class="mb-10 font-heading font-bold text-4xl sm:text-5xl text-gray-900" >Control every project from a place without hassle.</h2>
          <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block pb-6" href="#">
            <div class="mb-6 bg-gradient-cyan h-px"></div>
            <div class="flex flex-wrap items-center justify-between">
              <h3 class="font-heading font-bold text-lg text-gray-900" >Video Analytics</h3>
              <div>
                <div :class="{ 'hidden': accordion }">
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M14.25 6.75L9 12L3.75 6.75" stroke="#18181B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>    
                </div>   
                <div :class="{ 'hidden': !accordion }" class="hidden">
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.75 11.25L9 6L14.25 11.25" stroke="#18181B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>           
              </div>
            </div>
            <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="visibility-item overflow-hidden h-0 duration-500">
              <p class="mt-5 text-base text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
            </div>
          </a>
          <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block pb-6" href="#">
            <div class="mb-6 bg-gradient-cyan h-px"></div>
            <div class="flex flex-wrap items-center justify-between">
              <h3 class="font-heading font-bold text-lg text-gray-900" >Transaction History</h3>
              <div>
                <div :class="{ 'hidden': accordion }">
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M14.25 6.75L9 12L3.75 6.75" stroke="#18181B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg> 
                </div>
                <div :class="{ 'hidden': !accordion }" class="hidden">
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.75 11.25L9 6L14.25 11.25" stroke="#18181B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg> 
                </div>   
              </div>
            </div>
            <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="visibility-item overflow-hidden h-0 duration-500">
              <p class="mt-5 text-base text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
            </div>
          </a>
          <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block pb-6" href="#">
            <div class="mb-6 bg-gradient-cyan h-px"></div>
            <div class="flex flex-wrap items-center justify-between">
              <h3 class="font-heading font-bold text-lg text-gray-900" >Secured Payment</h3>
              <div>
                <div :class="{ 'hidden': accordion }">
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M14.25 6.75L9 12L3.75 6.75" stroke="#18181B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg> 
                </div>
                <div :class="{ 'hidden': !accordion }" class="hidden">
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.75 11.25L9 6L14.25 11.25" stroke="#18181B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
              </div>
            </div>
            <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="visibility-item overflow-hidden h-0 duration-500">
              <p class="mt-5 text-base text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
            </div>
            <div class="mt-6 bg-gradient-cyan h-px"></div>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #96

<section class="py-24 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center -m-6">
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-md">
          <h2 class="mb-6 font-heading font-bold text-4xl sm:text-5xl text-gray-900" >Grow your business connecting with customers</h2>
          <p class="mb-9 text-base text-gray-900" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit justo, sit iaculis ultrices vitae pulvinar tellus. Volutpat, ut lacus tristique blandit ligula.</p>
          <div class="flex flex-wrap -m-2">
            <div class="w-full md:w-auto p-2">
              <button class="px-9 py-3.5 font-heading font-bold w-full lg:w-auto text-base text-white bg-blue-600 hover:bg-blue-700 rounded-md" >Book A Call</button>
            </div>
            <div class="w-full md:w-auto p-2">
              <button class="px-9 py-3.5 font-heading font-bold w-full lg:w-auto text-base text-gray-900 bg-white hover:bg-gray-50 border border-gray-300 rounded-md" >Learn More</button>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="flex flex-wrap mx-auto divide-y md:max-w-md">
          <div class="w-full py-5">
            <div class="flex flex-wrap items-center -m-2.5">
              <div class="w-auto p-2.5 self-start"><img class="relative top-1" src="gradia-assets/elements/cta/file.svg" alt=""></div>
              <div class="flex-1 p-2.5"><a class="group" href="#">
                  <h3 class="mb-1 font-heading font-bold text-lg text-gray-900 group-hover:underline" >Documentation</h3>
                  <p class="text-sm text-gray-900" >Lorem ipsum dolor sit amet, consectetur elit.</p></a></div>
              <div class="w-auto p-2.5"><a href="#">
                  <svg class="relative top-1" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.75 3.75L12 9L6.75 14.25" stroke="#18181B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg></a></div>
            </div>
          </div>
          <div class="w-full py-5">
            <div class="flex flex-wrap items-center -m-2.5">
              <div class="w-auto p-2.5 self-start"><img class="relative top-1" src="gradia-assets/elements/cta/file.svg" alt=""></div>
              <div class="flex-1 p-2.5"><a class="group" href="#">
                  <h3 class="mb-1 font-heading font-bold text-lg text-gray-900 group-hover:underline" >Getting Started with API</h3>
                  <p class="text-sm text-gray-900" >Lorem ipsum dolor sit amet, consectetur elit.</p></a></div>
              <div class="w-auto p-2.5"><a href="#">
                  <svg class="relative top-1" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.75 3.75L12 9L6.75 14.25" stroke="#18181B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg></a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #97

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden">
  <div class="flex items-center justify-between px-8 py-5 bg-gray-900">
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto mr-14"><a href="#"><img src="gradia-assets/logos/gradia-name-white.svg" alt=""></a></div>
        <div class="w-auto hidden lg:block">
          <ul class="flex items-center mr-10">
            <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Features</a></li>
            <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Solutions</a></li>
            <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Resources</a></li>
            <li class="font-heading text-white hover:text-gray-200 text-lg"><a href="#" >Pricing</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto hidden lg:block">
          <div class="flex flex-wrap">
            <div class="w-auto">
              <button class="font-heading block py-2 px-5 mr-5 text-lg text-gray-900 rounded-10" >Login</button>
            </div>
            <div class="w-auto">
              <button class="group relative p-0.5 font-heading block w-full md:w-auto text-lg text-white font-medium bg-white overflow-hidden rounded-10">
                <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-white transition ease-in-out duration-500"></div>
                <div class="py-2 px-5 bg-gray-900 rounded-lg">
                  <p class="relative z-10 group-hover:text-gray-900" >Start Free Trial</p>
                </div>
              </button>
            </div>
          </div>
        </div>
        <div class="w-auto lg:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen">
            <svg class="text-gray-800" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="56" height="56" rx="28" fill="currentColor"></rect>
              <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
    <nav class="relative z-10 px-9 py-8 bg-gray-900 h-full">
      <div class="flex flex-wrap justify-between h-full">
        <div class="w-full">
          <div class="flex items-center justify-between -m-2">
            <div class="w-auto p-2"><a class="inline-block" href="#"><img src="gradia-assets/logos/gradia-name-white.svg" alt=""></a></div>
            <div class="w-auto p-2">
              <button x-on:click="mobileNavOpen = !mobileNavOpen">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 18L18 6M6 6L18 18" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="flex flex-col justify-center py-8 w-full">
          <ul>
            <li class="mb-12"><a class="font-heading font-medium text-lg text-white hover:text-gray-200" href="#" >Features</a></li>
            <li class="mb-12"><a class="font-heading font-medium text-lg text-white hover:text-gray-200" href="#" >Solutions</a></li>
            <li class="mb-12"><a class="font-heading font-medium text-lg text-white hover:text-gray-200" href="#" >Resources</a></li>
            <li><a class="font-heading font-medium text-lg text-white hover:text-gray-200" href="#" >Pricing</a></li>
          </ul>
        </div>
        <div class="flex flex-col justify-end w-full">
          <div class="flex flex-wrap">
            <div class="w-full mb-3">
              <button class="p-0.5 font-heading block w-full text-lg text-white font-medium rounded-10">
                <div class="py-2 px-5 rounded-10">
                  <p >Login</p>
                </div>
              </button>
            </div>
            <div class="w-full">
              <button class="group relative p-0.5 font-heading block w-full text-lg text-white font-medium bg-white overflow-hidden rounded-10">
                <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-white transition ease-in-out duration-500"></div>
                <div class="py-2 px-5 bg-gray-900 rounded-lg">
                  <p class="relative z-10 group-hover:text-gray-900" >Start Free Trial</p>
                </div>
              </button>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>
</section>

Tailwind Component #98

<section class="pt-24 pb-32 bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="mb-20 max-w-xl mx-auto">
      <h2 class="mb-5 font-heading font-bold text-6xl sm:text-7xl text-white text-center" >Pricing &amp; Plans</h2>
      <p class="text-gray-400 text-base text-center" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
    </div>
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/2 xl:w-1/4 p-3">
        <div class="h-full py-9 px-7 text-center bg-gray-900 rounded-10">
          <h3 class="mb-8 font-heading text-xs text-white font-bold uppercase tracking-px" >Basic</h3>
          <p class="mb-3 font-heading font-bold text-6xl sm:text-7xl text-white" >$29</p>
          <p class="mb-8 text-gray-400" >per month</p>
          <p class="mb-11 text-lg text-white" >Book up to 10 meetings with your clients per month</p>
          <button class="mb-4 font-heading font-semibold py-4 px-10 text-xs uppercase text-white tracking-px border border-gray-500 hover:border-gray-600 rounded-md" >Try 14 Days free trial</button>
          <p class="text-sm text-gray-500" >No credit card required</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 p-3">
        <div class="h-full py-9 px-7 text-center bg-gray-900 rounded-10">
          <h3 class="mb-8 font-heading text-xs text-white font-bold uppercase tracking-px" >Standard</h3>
          <p class="mb-3 font-heading font-bold text-6xl sm:text-7xl text-white" >$59</p>
          <p class="mb-8 text-gray-400" >per month</p>
          <p class="mb-11 text-lg text-white" >Book up to 50 meetings with your clients per month</p>
          <button class="mb-4 font-heading font-semibold py-4 px-10 text-xs uppercase text-white tracking-px border border-gray-500 hover:border-gray-600 rounded-md" >Try 14 Days free trial</button>
          <p class="text-sm text-gray-500" >No credit card required</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 p-3">
        <div class="relative h-full py-9 px-7 text-center bg-gray-900 overflow-hidden rounded-10"><img class="absolute top-0 left-0 w-full" src="gradia-assets/elements/pricing/radial2.svg" alt="">
          <div class="relative z-10">
            <h3 class="mb-8 font-heading text-xs text-white font-bold uppercase tracking-px" >Pro</h3>
            <p class="mb-3 font-heading font-bold text-6xl sm:text-7xl text-white" >$99</p>
            <p class="mb-8 text-gray-400" >per month</p>
            <p class="mb-11 text-lg text-white" >Book up to 100 meetings with your clients per month</p>
            <button class="group relative p-px mb-8 font-heading block w-full text-base text-gray-900 font-bold bg-gradient-cyan overflow-hidden rounded-md">
              <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full transition ease-in-out duration-500 bg-gradient-cyan"></div>
              <div class="py-4 px-7 bg-gray-900 rounded-md">
                <p class="relative z-10 font-heading text-white text-xs tracking-px uppercase" >Try 14 Days free trial</p>
              </div>
            </button>
            <p class="text-sm text-gray-500" >No credit card required</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 p-3">
        <div class="h-full py-9 px-7 text-center bg-gray-900 rounded-10">
          <h3 class="mb-8 font-heading text-xs text-white font-bold uppercase tracking-px" >Enterprise</h3>
          <p class="mb-3 font-heading font-bold text-6xl sm:text-7xl text-white" >$199</p>
          <p class="mb-8 text-gray-400" >per month</p>
          <p class="mb-11 text-lg text-white" >Book up to 200 meetings with your clients per month</p>
          <button class="mb-4 font-heading font-semibold py-4 px-10 text-xs uppercase text-white tracking-px border border-gray-500 hover:border-gray-600 rounded-md" >Try 14 Days free trial</button>
          <p class="text-sm text-gray-500" >No credit card required</p>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #99

<section class="relative py-40 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center -m-6 lg:-m-11">
      <div class="w-full lg:w-1/2 p-6 lg:p-11">
        <div class="lg:max-w-xl">
          <h2 class="mb-5 font-heading text-6xl sm:text-7xl font-bold text-gray-900" >Manage projects easily.</h2>
          <p class="mb-9 text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.</p>
          <button class="font-heading w-full lg:w-auto px-6 py-3 text-base font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-full" >Start 14 Days Free Trial</button>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-6 lg:p-11">
        <div class="lg:max-w-md ml-auto">
          <div class="flex flex-wrap w-full lg:-m-3">
            <div class="w-full p-3">
              <div class="p-4 bg-white rounded-2xl shadow-4xl">
                <div class="flex flex-wrap items-center -m-2">
                  <div class="w-auto p-2">
                    <div class="flex items-center justify-center w-11 h-11 bg-gradient-red rounded-full">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M20 13V6C20 4.89543 19.1046 4 18 4H6C4.89543 4 4 4.89543 4 6V13M20 13V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V13M20 13H17.4142C17.149 13 16.8946 13.1054 16.7071 13.2929L14.2929 15.7071C14.1054 15.8946 13.851 16 13.5858 16H10.4142C10.149 16 9.89464 15.8946 9.70711 15.7071L7.29289 13.2929C7.10536 13.1054 6.851 13 6.58579 13H4" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                  </div>
                  <div class="w-auto p-2">
                    <h3 class="font-heading font-medium text-gray-900 text-base" >Web Design for Markoland</h3>
                    <p class="text-xs text-gray-500" >Mar 14, 2022</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-full p-3">
              <div class="lg:relative lg:-left-6 transform hover:translate-x-6 p-4 bg-white opacity-70 rounded-2xl shadow-4xl transition ease-in-out duration-500">
                <div class="flex flex-wrap items-center -m-2">
                  <div class="w-auto p-2">
                    <div class="flex items-center justify-center w-11 h-11 bg-gradient-green rounded-full">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M20 13V6C20 4.89543 19.1046 4 18 4H6C4.89543 4 4 4.89543 4 6V13M20 13V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V13M20 13H17.4142C17.149 13 16.8946 13.1054 16.7071 13.2929L14.2929 15.7071C14.1054 15.8946 13.851 16 13.5858 16H10.4142C10.149 16 9.89464 15.8946 9.70711 15.7071L7.29289 13.2929C7.10536 13.1054 6.851 13 6.58579 13H4" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                  </div>
                  <div class="w-auto p-2">
                    <h3 class="font-heading font-medium text-gray-900 text-base" >App Development for Apollo</h3>
                    <p class="text-xs text-gray-500" >Apr 27, 2022</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-full p-3">
              <div class="p-4 bg-white opacity-50 rounded-2xl shadow-4xl">
                <div class="flex flex-wrap items-center -m-2">
                  <div class="w-auto p-2">
                    <div class="flex items-center justify-center w-11 h-11 bg-gradient-violet rounded-full">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M20 13V6C20 4.89543 19.1046 4 18 4H6C4.89543 4 4 4.89543 4 6V13M20 13V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V13M20 13H17.4142C17.149 13 16.8946 13.1054 16.7071 13.2929L14.2929 15.7071C14.1054 15.8946 13.851 16 13.5858 16H10.4142C10.149 16 9.89464 15.8946 9.70711 15.7071L7.29289 13.2929C7.10536 13.1054 6.851 13 6.58579 13H4" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                  </div>
                  <div class="w-auto p-2">
                    <h3 class="font-heading font-medium text-gray-900 text-base" >UI Design - Sarlight</h3>
                    <p class="text-xs text-gray-500" >Apr 29, 2022</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-full p-3">
              <div class="lg:relative lg:-left-6 transform hover:translate-x-6 p-4 bg-white opacity-30 rounded-2xl shadow-4xl transition ease-in-out duration-500">
                <div class="flex flex-wrap items-center -m-2">
                  <div class="w-auto p-2">
                    <div class="flex items-center justify-center w-11 h-11 bg-gradient-pink rounded-full">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M20 13V6C20 4.89543 19.1046 4 18 4H6C4.89543 4 4 4.89543 4 6V13M20 13V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V13M20 13H17.4142C17.149 13 16.8946 13.1054 16.7071 13.2929L14.2929 15.7071C14.1054 15.8946 13.851 16 13.5858 16H10.4142C10.149 16 9.89464 15.8946 9.70711 15.7071L7.29289 13.2929C7.10536 13.1054 6.851 13 6.58579 13H4" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                  </div>
                  <div class="w-auto p-2">
                    <h3 class="font-heading font-medium text-gray-900 text-base" >Web Design - Karko</h3>
                    <p class="text-xs text-gray-500" >Mar 14, 2022</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #100

<section class="pt-24 pb-32 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="max-w-xl mx-auto mb-16">
      <h2 class="font-heading font-bold text-6xl sm:text-7xl text-gray-900 text-center" >Everything you need to launch a website</h2>
    </div>
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/3 p-3">
        <div class="mb-9 p-9 text-center border border-gray-200 rounded">
          <div class="mb-11 p-px bg-gradient-cyan max-w-max mx-auto rounded-full">
            <p class="font-heading font-semibold px-5 py-1.5 text-xs text-gray-900 tracking-px uppercase bg-white rounded-full" >Basic</p>
          </div>
          <h3 class="font-heading font-bold sm:text-6xl text-7xl text-gray-900" >Free</h3>
          <p class="mb-12 text-gray-500" >Forever</p>
          <button class="font-heading px-12 py-4 text-base font-bold text-white bg-blue-600 hover:bg-blue-700 rounded-full" >Sign up. It’s Free</button>
        </div>
        <div class="px-7">
          <ul>
            <li class="mb-5 flex items-center font-heading font-semibold text-lg">
              <svg class="mr-2.5" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2134 6.08683C19.6625 6.53593 19.6625 7.26407 19.2134 7.71317L10.0134 16.9132C9.56426 17.3623 8.83613 17.3623 8.38702 16.9132L3.78702 12.3132C3.33792 11.8641 3.33792 11.1359 3.78702 10.6868C4.23613 10.2377 4.96427 10.2377 5.41337 10.6868L9.20019 14.4737L17.587 6.08683C18.0361 5.63772 18.7643 5.63772 19.2134 6.08683Z" fill="#14B082"></path>
              </svg>
              <p class="text-gray-900" >10 GB Disk Space</p>
            </li>
            <li class="mb-5 flex items-center font-heading font-semibold text-lg">
              <svg class="mr-2.5" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2134 6.08683C19.6625 6.53593 19.6625 7.26407 19.2134 7.71317L10.0134 16.9132C9.56426 17.3623 8.83613 17.3623 8.38702 16.9132L3.78702 12.3132C3.33792 11.8641 3.33792 11.1359 3.78702 10.6868C4.23613 10.2377 4.96427 10.2377 5.41337 10.6868L9.20019 14.4737L17.587 6.08683C18.0361 5.63772 18.7643 5.63772 19.2134 6.08683Z" fill="#14B082"></path>
              </svg>
              <p class="text-gray-900" >1 Year Support</p>
            </li>
            <li class="flex items-center font-heading font-semibold text-lg">
              <svg class="mr-2.5" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2134 6.08683C19.6625 6.53593 19.6625 7.26407 19.2134 7.71317L10.0134 16.9132C9.56426 17.3623 8.83613 17.3623 8.38702 16.9132L3.78702 12.3132C3.33792 11.8641 3.33792 11.1359 3.78702 10.6868C4.23613 10.2377 4.96427 10.2377 5.41337 10.6868L9.20019 14.4737L17.587 6.08683C18.0361 5.63772 18.7643 5.63772 19.2134 6.08683Z" fill="#14B082"></path>
              </svg>
              <p class="text-gray-900" >50 Queries</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-3">
        <div class="mb-9 p-9 text-center border border-gray-200 rounded">
          <div class="mb-11 p-px bg-gradient-cyan max-w-max mx-auto rounded-full">
            <p class="font-heading font-semibold px-5 py-1.5 text-xs text-gray-900 tracking-px uppercase bg-white rounded-full" >Pro</p>
          </div>
          <h3 class="font-heading font-bold sm:text-6xl text-7xl text-gray-900" >$49</h3>
          <p class="mb-12 text-gray-500" >Per Month</p>
          <button class="font-heading px-12 py-4 text-base font-bold text-gray-900 border border-gray-200 hover:border-gray-300 rounded-full" >Sign up. It’s Free</button>
        </div>
        <div class="px-7">
          <p class="mb-6 font-heading font-semibold text-gray-500" >Everything in Basic, Plus:</p>
          <ul>
            <li class="mb-5 flex items-center font-heading font-semibold text-lg">
              <svg class="mr-2.5" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2134 6.08683C19.6625 6.53593 19.6625 7.26407 19.2134 7.71317L10.0134 16.9132C9.56426 17.3623 8.83613 17.3623 8.38702 16.9132L3.78702 12.3132C3.33792 11.8641 3.33792 11.1359 3.78702 10.6868C4.23613 10.2377 4.96427 10.2377 5.41337 10.6868L9.20019 14.4737L17.587 6.08683C18.0361 5.63772 18.7643 5.63772 19.2134 6.08683Z" fill="#14B082"></path>
              </svg>
              <p class="text-gray-900" >100 GB Disk Space</p>
            </li>
            <li class="mb-5 flex items-center font-heading font-semibold text-lg">
              <svg class="mr-2.5" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2134 6.08683C19.6625 6.53593 19.6625 7.26407 19.2134 7.71317L10.0134 16.9132C9.56426 17.3623 8.83613 17.3623 8.38702 16.9132L3.78702 12.3132C3.33792 11.8641 3.33792 11.1359 3.78702 10.6868C4.23613 10.2377 4.96427 10.2377 5.41337 10.6868L9.20019 14.4737L17.587 6.08683C18.0361 5.63772 18.7643 5.63772 19.2134 6.08683Z" fill="#14B082"></path>
              </svg>
              <p class="text-gray-900" >1 Year Support</p>
            </li>
            <li class="mb-5 flex items-center font-heading font-semibold text-lg">
              <svg class="mr-2.5" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2134 6.08683C19.6625 6.53593 19.6625 7.26407 19.2134 7.71317L10.0134 16.9132C9.56426 17.3623 8.83613 17.3623 8.38702 16.9132L3.78702 12.3132C3.33792 11.8641 3.33792 11.1359 3.78702 10.6868C4.23613 10.2377 4.96427 10.2377 5.41337 10.6868L9.20019 14.4737L17.587 6.08683C18.0361 5.63772 18.7643 5.63772 19.2134 6.08683Z" fill="#14B082"></path>
              </svg>
              <p class="text-gray-900" >1000 Queries</p>
            </li>
            <li class="flex items-center font-heading font-semibold text-lg">
              <svg class="mr-2.5" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2134 6.08683C19.6625 6.53593 19.6625 7.26407 19.2134 7.71317L10.0134 16.9132C9.56426 17.3623 8.83613 17.3623 8.38702 16.9132L3.78702 12.3132C3.33792 11.8641 3.33792 11.1359 3.78702 10.6868C4.23613 10.2377 4.96427 10.2377 5.41337 10.6868L9.20019 14.4737L17.587 6.08683C18.0361 5.63772 18.7643 5.63772 19.2134 6.08683Z" fill="#14B082"></path>
              </svg>
              <p class="text-gray-900" >Video Collections</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-3">
        <div class="mb-9 p-9 text-center border border-gray-200 rounded">
          <div class="mb-11 p-px bg-gradient-cyan max-w-max mx-auto rounded-full">
            <p class="font-heading font-semibold px-5 py-1.5 text-xs text-gray-900 tracking-px uppercase bg-white rounded-full" >Enterprise</p>
          </div>
          <h3 class="font-heading font-bold sm:text-6xl text-7xl text-gray-900" >Contact us</h3>
          <p class="mb-12 text-gray-500" >For Custom Offer</p>
          <button class="font-heading px-12 py-4 text-base font-bold text-white bg-blue-600 hover:bg-blue-700 rounded-full" >Sign up. It’s Free</button>
        </div>
        <div class="px-7">
          <p class="mb-6 font-heading font-semibold text-gray-500" >Everything in Pro, Plus:</p>
          <ul>
            <li class="mb-5 flex items-center font-heading font-semibold text-lg">
              <svg class="mr-2.5" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2134 6.08683C19.6625 6.53593 19.6625 7.26407 19.2134 7.71317L10.0134 16.9132C9.56426 17.3623 8.83613 17.3623 8.38702 16.9132L3.78702 12.3132C3.33792 11.8641 3.33792 11.1359 3.78702 10.6868C4.23613 10.2377 4.96427 10.2377 5.41337 10.6868L9.20019 14.4737L17.587 6.08683C18.0361 5.63772 18.7643 5.63772 19.2134 6.08683Z" fill="#14B082"></path>
              </svg>
              <p class="text-gray-900" >1 TB Disk Space</p>
            </li>
            <li class="mb-5 flex items-center font-heading font-semibold text-lg">
              <svg class="mr-2.5" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2134 6.08683C19.6625 6.53593 19.6625 7.26407 19.2134 7.71317L10.0134 16.9132C9.56426 17.3623 8.83613 17.3623 8.38702 16.9132L3.78702 12.3132C3.33792 11.8641 3.33792 11.1359 3.78702 10.6868C4.23613 10.2377 4.96427 10.2377 5.41337 10.6868L9.20019 14.4737L17.587 6.08683C18.0361 5.63772 18.7643 5.63772 19.2134 6.08683Z" fill="#14B082"></path>
              </svg>
              <p class="text-gray-900" >1 Year Support</p>
            </li>
            <li class="mb-5 flex items-center font-heading font-semibold text-lg">
              <svg class="mr-2.5" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2134 6.08683C19.6625 6.53593 19.6625 7.26407 19.2134 7.71317L10.0134 16.9132C9.56426 17.3623 8.83613 17.3623 8.38702 16.9132L3.78702 12.3132C3.33792 11.8641 3.33792 11.1359 3.78702 10.6868C4.23613 10.2377 4.96427 10.2377 5.41337 10.6868L9.20019 14.4737L17.587 6.08683C18.0361 5.63772 18.7643 5.63772 19.2134 6.08683Z" fill="#14B082"></path>
              </svg>
              <p class="text-gray-900" >Unlimited Queries</p>
            </li>
            <li class="mb-5 flex items-center font-heading font-semibold text-lg">
              <svg class="mr-2.5" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2134 6.08683C19.6625 6.53593 19.6625 7.26407 19.2134 7.71317L10.0134 16.9132C9.56426 17.3623 8.83613 17.3623 8.38702 16.9132L3.78702 12.3132C3.33792 11.8641 3.33792 11.1359 3.78702 10.6868C4.23613 10.2377 4.96427 10.2377 5.41337 10.6868L9.20019 14.4737L17.587 6.08683C18.0361 5.63772 18.7643 5.63772 19.2134 6.08683Z" fill="#14B082"></path>
              </svg>
              <p class="text-gray-900" >Video Collections</p>
            </li>
            <li class="mb-5 flex items-center font-heading font-semibold text-lg">
              <svg class="mr-2.5" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2134 6.08683C19.6625 6.53593 19.6625 7.26407 19.2134 7.71317L10.0134 16.9132C9.56426 17.3623 8.83613 17.3623 8.38702 16.9132L3.78702 12.3132C3.33792 11.8641 3.33792 11.1359 3.78702 10.6868C4.23613 10.2377 4.96427 10.2377 5.41337 10.6868L9.20019 14.4737L17.587 6.08683C18.0361 5.63772 18.7643 5.63772 19.2134 6.08683Z" fill="#14B082"></path>
              </svg>
              <p class="text-gray-900" >Learning path</p>
            </li>
            <li class="mb-5 flex items-center font-heading font-semibold text-lg">
              <svg class="mr-2.5" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2134 6.08683C19.6625 6.53593 19.6625 7.26407 19.2134 7.71317L10.0134 16.9132C9.56426 17.3623 8.83613 17.3623 8.38702 16.9132L3.78702 12.3132C3.33792 11.8641 3.33792 11.1359 3.78702 10.6868C4.23613 10.2377 4.96427 10.2377 5.41337 10.6868L9.20019 14.4737L17.587 6.08683C18.0361 5.63772 18.7643 5.63772 19.2134 6.08683Z" fill="#14B082"></path>
              </svg>
              <p class="text-gray-900" >Download images</p>
            </li>
            <li class="flex items-center font-heading font-semibold text-lg">
              <svg class="mr-2.5" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2134 6.08683C19.6625 6.53593 19.6625 7.26407 19.2134 7.71317L10.0134 16.9132C9.56426 17.3623 8.83613 17.3623 8.38702 16.9132L3.78702 12.3132C3.33792 11.8641 3.33792 11.1359 3.78702 10.6868C4.23613 10.2377 4.96427 10.2377 5.41337 10.6868L9.20019 14.4737L17.587 6.08683C18.0361 5.63772 18.7643 5.63772 19.2134 6.08683Z" fill="#14B082"></path>
              </svg>
              <p class="text-gray-900" >Free Custom Domain</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

1
2
3
4
5
6
7
8
...
11

The easiest way to create beautiful websites

Developer

Team License

monthly

$24/month

That's $0.80/day

annual

$99/year

That's $0.27/day

Last chance

lifetime

$249/paid once

Best value

The selected plan includes lifetimeannualmonthly access to Shuffle Editor.

A lifetime license is best for those who prefer to avoid subscriptions.

Lifetime License

Create an account

OR USE EMAIL

Pay with card

Pay with card

Pay with PayPal™

I agree to the terms of use and privacy policy.

We issue VAT invoices. Already have an account? Sign in

Why creators choose Shuffle

From idea to live website in minutes.

Shuffle pairs an AI visual editor with 80+ UI libraries, so you can design, build and export production‑ready code without starting from scratch.

13,400+ UI components

Top AI models built in

1-click code export

An AI Agent that builds with you Describe a page, watch it come to life, then fine-tune it visually or with a prompt.
Pick the best model for every task GPT-6 Astra, Claude Opus 5.5 and Gemini 3.8 in one place.
13,400+ professionally designed components Prefer building by hand? Drag in pixel-perfect sections crafted by professional designers.
Export to the stack you love Tailwind CSS, Bootstrap, Next.js, Laravel, WordPress and beyond.

“Its AI-powered features have transformed how I work! Designing and building websites has become faster, easier, and far more efficient.”

Est. 2019

Helping web builders ship since 2019 7 years of steady development.

Build websites faster with an AI Visual Editor

Products

UI Components

Extensions

Support

Company

© 2026 Shuffle. All rights reserved.