Tailwind CSS Components

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

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

New to Shuffle? Try our tools:

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

Components

Tailwind Component #41

Tailwind CSS

Saturn

<section class="relative xl:pt-20 overflow-hidden">
  <img class="absolute top-0 left-0 -mt-24 md:-mt-0" src="saturn-assets/images/applications/blue-left-light.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-3/5 px-4">
          <div class="max-w-md md:max-w-xl lg:max-w-2xl mx-auto py-20 lg:py-32 lg:mx-0">
            <span class="inline-block py-1 px-3 mb-5 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">👋 MEET SATURN UI LIBRARY</span>
            <h1 class="font-heading text-5xl xs:text-6xl xl:text-7xl font-bold mb-5">
              <span>Ready to Deliver</span>
              <span class="block leading-snug font-serif italic">Wonderfull</span>
              <span>digital product</span>
            </h1>
            <p class="max-w-md text-xl text-gray-500 font-semibold mb-15">Nisi eu pellentesque felis volutpat aliquet pulvinar sed. Vitae fames vestibulum urna vel odio mauris urna orci est.</p>
            <div class="flex items-center">
              <a class="inline-block transform hover:scale-102 transition duration-200 mr-4 md:mr-6" href="#">
                <img class="block h-12" src="saturn-assets/images/applications/button-logo1.png" alt="">
              </a>
              <a class="inline-block transform hover:scale-102 transition duration-200" href="#">
                <img class="block h-12" src="saturn-assets/images/applications/button-logo2.png" alt="">
              </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

Mobile App Marketing Hero with Phone Chat Mockup and Store Badges

A split-layout promotional hero for a mobile app, with a bold headline, short supporting text, and Google Play and App Store download badges on the left, and a tilted phone mockup showing a chat screen on the right. The outer component is a marketing section, and the phone screen is an illustrative app screenshot.

AI Application Component Generator

Tailwind Component #42

Tailwind CSS

Saturn

<section class="relative py-20 md:py-32 overflow-hidden">
  <img class="absolute top-0 left-0" src="saturn-assets/images/contact/light-left-blue.png" alt="">
  <img class="absolute bottom-0 right-0 -mb-20" src="saturn-assets/images/contact/light-orange-right.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-2xl mx-auto mb-22 text-center">
      <span class="inline-block py-1 px-3 mb-4 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">READY TO SUPPORT</span>
      <h1 class="font-heading text-5xl xs:text-6xl font-bold text-gray-900 mb-4">
        <span>Get in touch with us for</span>
        <span class="font-serif italic">collaboration</span>
      </h1>
      <p class="text-xl text-gray-500 font-semibold">We help people to grow their business using saturn ui library with professional and powerfull solution.</p>
    </div>
    <div class="max-w-5xl mx-auto">
      <div class="flex flex-wrap justify-center -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-10 lg:mb-0">
          <div class="max-w-lg mx-auto h-full bg-white border-2 border-gray-100 rounded-3xl">
            <div class="pt-4 px-4 pb-9 border-b border-gray-100">
              <div class="relative mb-10">
                <img class="block h-56 w-full rounded-lg" src="saturn-assets/images/contact/furniture-picture.png" alt="">
                <div class="absolute bottom-0 right-0 -mb-12 mr-4">
                  <div class="relative w-24 h-24 flex items-center justify-center">
                    <div class="absolute top-0 left-0 w-full h-full rounded-full bg-green-400 bg-opacity-30 animate-pulse animate-scaleChange"></div>
                    <div class="relative flex items-center justify-center w-15 h-15 rounded-full bg-green-400">
                      <img src="saturn-assets/images/contact/icon-pointer.svg" alt="">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Contact Section with Two Office Location Cards

A light-themed contact section with a centered heading, subtext, and two side-by-side office location cards showing photos, addresses, and phone numbers. Each card uses icon badges and a teal navigation button for directions.

AI Contact Component Generator

Tailwind Component #43

Tailwind CSS

Saturn

<section class="relative pt-20 lg:pt-24 overflow-hidden">
  <img class="absolute bottom-0 left-0" src="saturn-assets/images/content/light-blue-left.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <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-md md:max-w-lg mx-auto lg:mx-0">
            <span class="inline-block py-1 px-3 mb-4 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">RICH TEXT MODULE</span>
            <h1 class="font-heading text-4xl xs:text-6xl md:text-7xl font-bold text-gray-900 mb-12">
              <span class="block">Saturn</span>
              <span>is a beautiful</span>
              <span class="block font-serif italic">UI Library</span>
            </h1>
            <p class="max-w-md text-lg xs:text-3xl font-semibold text-gray-400 mb-6">Arcu ultrices sit non magna enim id semper quam venenatis. Mi quisque ultrices hendrerit nec aliquet integer mollis faucibus morbi.</p>
            <p class="max-w-md text-lg xs:text-3xl font-semibold text-gray-400">Augue justo at convallis vitae nunc maecenas est. Viverra duis feugiat posuere vitae tincidunt.</p>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="max-w-md md:max-w-lg mx-auto lg:mr-0">
            <h3 class="text-xl xs:text-3xl font-semibold text-gray-800 mb-6">Mi quisque ultrices hendrerit nec aliquet integer mollis faucibus morbi.</h3>
            <ul class="mb-6">
              <li class="flex mb-6 items-center">
                <img class="w-6 h-6 mr-4" src="saturn-assets/images/content/check-green.svg" alt="">
                <span class="text-base xs:text-lg font-semibold text-gray-900">Design Style well organized</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

Split-screen rich text module with serif accent heading and checklist

A two-column marketing content module with a large display heading, gray lead paragraphs on the left, and a bold lead line, checkmark feature list, body copy, and an illustrative image on the right. It presents editorial text and a feature list with no visible interactive controls.

AI Content Component Generator

Tailwind Component #44

Tailwind CSS

Saturn

<section class="relative py-20 md:py-32 overflow-hidden">
  <img class="absolute top-0 left-1/2 transform -translate-x-1/2 w-full max-w-4xl" src="saturn-assets/images/cta/circle-triple.svg" alt="">
  <img class="absolute top-0 left-0" src="saturn-assets/images/cta/blue-light-left-top.png" alt="">
  <img class="absolute top-0 right-0" src="saturn-assets/images/cta/orange-right-bottom.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-sm sm:max-w-md md:max-w-2xl mx-auto">
      <h1 class="font-heading text-4xl xs:text-5xl md:text-6xl font-bold text-gray-900 mb-10">
        <span>Get ready to build your</span>
        <span class="font-serif italic">product</span>
      </h1>
      <p class="text-lg text-gray-600 mb-10">Adipiscing neque id sit in odio at lorem.</p>
      <div class="md:flex mb-10 items-center">
        <div class="flex mb-6 md:mb-0 md:mr-6 items-center">
          <img src="saturn-assets/images/cta/avatar2.png" alt="">
          <img class="-ml-2" src="saturn-assets/images/cta/avatar3.png" alt="">
          <img class="-ml-2" src="saturn-assets/images/cta/avatar4.png" alt="">
          <img class="-ml-2" src="saturn-assets/images/cta/avatar5.png" alt="">
          <img class="-ml-2" src="saturn-assets/images/cta/avatar1.png" alt="">
        </div>
        <div>
          <span class="block text-2xl font-bold leading-none">250+</span>
          <span class="block text-xs text-gray-500 font-semibold">Startup founders</span>
        </div>
      </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Centered Hero with Serif Accent Heading, Founder Avatars, and Orange CTA

A centered hero section with a large bold sans-serif headline where the word "product" is set in italic serif, followed by a subtitle, a row of five avatars with a "250+ Startup founders" stat, and an orange "Get Started" call-to-action button. The background uses soft blue and peach gradient blobs with faint concentric circle outlines.

AI Call to action Component Generator

Tailwind Component #45

Tailwind CSS

Saturn

<section class="py-20 bg-gray-100">
  <div class="container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="flex flex-wrap -mx-4 pb-20 md:pb-28">
        <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
          <div class="max-w-md mx-auto lg:mx-0">
            <h3 class="max-w-sm font-heading text-5xl md:text-6xl font-bold text-gray-900 mb-6">
              <span>Ready to get</span>
              <span class="font-serif italic">started</span>
              <span>?</span>
            </h3>
            <p class="max-w-sm text-gray-500 mb-16">If there are questions you want to ask, we will answer all your question</p>
            <div class="sm:flex mb-2 items-center">
              <input class="w-full mb-3 sm:mb-0 sm:mr-4 pb-4 bg-transparent border-b border-gray-200 text-sm text-gray-900 placeholder-gray-400 outline-none" type="email" placeholder="Enter your email">
              <button class="relative group inline-block flex-shrink-0 w-full sm:w-auto py-3 px-5 text-sm font-semibold text-orange-50 bg-orange-900 rounded-full overflow-hidden" type="submit">
                <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
                <span class="relative">Subscribe</span>
              </button>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="max-w-md mx-auto lg:mr-0">
            <p class="text-2xl font-semibold text-gray-900 mb-16">Maybe your question is have been answered, check this out.</p>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Get Started CTA with Email Signup and FAQ Links

A combined call-to-action section with a headline, email subscribe form, and a short FAQ list with arrow links, followed by a footer row of social icons and legal links. Content is split into a left signup column and a right FAQ column on a light background.

AI Footers Component Generator

Tailwind Component #46

Tailwind CSS

Saturn

<section class="relative py-20 md:py-24 overflow-hidden">
  <img class="absolute top-0 left-0" src="saturn-assets/images/team/light-blue.png" alt="">
  <img class="absolute bottom-0 right-0 mr-32" src="saturn-assets/images/team/light-orange.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-2xl lg:max-w-3xl mx-auto xl:max-w-7xl">
      <div class="flex flex-wrap mb-20 -mx-4 items-center">
        <div class="w-full xl:w-1/2 px-4">
          <div>
            <h1 class="font-heading text-5xl xs:text-6xl md:text-7xl font-bold text-gray-900 mb-8">
              <span>Get to know our amazing</span>
              <span class="font-serif italic">Team</span>
            </h1>
          </div>
        </div>
        <div class="w-full xl:w-1/2 px-4">
          <div class="max-w-md xl:ml-auto">
            <p class="text-lg text-gray-500 mb-6">Mi turpis turpis in justo pellentesque id nibh praesent. Posuere vel sit dignissim eu nisl.</p>
            <a class="inline-flex py-4 px-6 items-center text-sm text-orange-900 font-semibold bg-white border border-gray-200 hover:border-orange-900 rounded-full transition duration-200" href="#">
              <span class="mr-4">See More Team</span>
              <span>
                <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.83 5.28999L2.59 1.04999C2.49704 0.956266 2.38644 0.881872 2.26458 0.831103C2.14272 0.780334 2.01202 0.754196 1.88 0.754196C1.74799 0.754196 1.61729 0.780334 1.49543 0.831103C1.37357 0.881872 1.26297 0.956266 1.17 1.04999C0.983753 1.23736 0.879211 1.49081 0.879211 1.75499C0.879211 2.01918 0.983753 2.27263 1.17 2.45999L4.71 5.99999L1.17 9.53999C0.983753 9.72736 0.879211 9.98081 0.879211 10.245C0.879211 10.5092 0.983753 10.7626 1.17 10.95C1.26344 11.0427 1.37426 11.116 1.4961 11.1658C1.61794 11.2155 1.7484 11.2408 1.88 11.24C2.01161 11.2408 2.14207 11.2155 2.26391 11.1658C2.38575 11.116 2.49656 11.0427 2.59 10.95L6.83 6.70999C6.92373 6.61703 6.99813 6.50643 7.04889 6.38457C7.09966 6.26271 7.1258 6.13201 7.1258 5.99999C7.1258 5.86798 7.09966 5.73728 7.04889 5.61542C6.99813 5.49356 6.92373 5.38296 6.83 5.28999Z" fill="currentColor"></path>
                </svg>
              </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

Team Introduction Section with Four Member Cards

A marketing section with a two-line serif-accented heading, supporting text, and a outlined "See More Team" button above a four-column row of team member photos with names and roles. The layout is a horizontal row of cards on a light background with soft gradient glows.

AI Team Component Generator

Tailwind Component #47

Tailwind CSS

Saturn

<section class="relative py-20 md:py-24 overflow-hidden">
  <img class="absolute top-0 left-0" src="saturn-assets/images/newsletter/light-left-top-double.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-7xl mx-auto px-8 md:px-16 py-12 sm:py-20 bg-gray-900 rounded-4xl">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
          <div class="max-w-lg mx-auto">
            <h4 class="font-heading text-4xl sm:text-5xl text-white font-semibold">Sign up for our newsletter</h4>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="max-w-lg lg:ml-auto">
            <p class="text-lg font-semibold text-gray-50 mb-10">Get insider access to our company by subscribing to our newsletter and stay informed about our products, services, and initiatives.</p>
            <div class="sm:flex mb-2 items-center">
              <input class="w-full mb-3 sm:mb-0 sm:mr-4 py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="email" placeholder="pat@saturn.dev">
              <button class="relative group inline-block flex-shrink-0 w-full sm:w-auto py-3 px-5 text-sm font-semibold text-orange-50 hover:text-orange-900 bg-orange-900 rounded-md transition duration-300 overflow-hidden" type="submit">
                <div class="absolute top-0 right-full w-full h-full bg-white transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
                <div class="relative flex items-center justify-center">
                  <span class="mr-4">Subscribe</span>
                  <svg width="8" height="11" viewBox="0 0 8 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.82994 5.04001L2.58994 0.80001C2.49698 0.706281 2.38638 0.631887 2.26452 0.581118C2.14266 0.530349 2.01195 0.504211 1.87994 0.504211C1.74793 0.504211 1.61723 0.530349 1.49537 0.581118C1.37351 0.631887 1.26291 0.706281 1.16994 0.80001C0.983692 0.987372 0.87915 1.24082 0.87915 1.50501C0.87915 1.7692 0.983692 2.02265 1.16994 2.21001L4.70994 5.75001L1.16994 9.29001C0.983692 9.47737 0.87915 9.73082 0.87915 9.99501C0.87915 10.2592 0.983692 10.5126 1.16994 10.7C1.26338 10.7927 1.3742 10.866 1.49604 10.9158C1.61787 10.9655 1.74834 10.9908 1.87994 10.99C2.01155 10.9908 2.14201 10.9655 2.26385 10.9158C2.38569 10.866 2.4965 10.7927 2.58994 10.7L6.82994 6.46001C6.92367 6.36705 6.99806 6.25645 7.04883 6.13459C7.0996 6.01273 7.12574 5.88202 7.12574 5.75001C7.12574 5.618 7.0996 5.48729 7.04883 5.36543C6.99806 5.24357 6.92367 5.13297 6.82994 5.04001Z" fill="currentColor"></path>
                  </svg>
                </div>
              </button>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Dark newsletter signup banner with email input and orange Subscribe button

A dark navy rounded panel promoting a company newsletter, with a large two-line heading on the left and a supporting paragraph, email input field, and orange Subscribe button on the right. A small privacy policy note sits below the form controls.

AI Newsletter Component Generator

Tailwind Component #48

Tailwind CSS

Saturn

<section x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }" class="relative pt-24 pb-24 lg:pb-20 lg:pt-32 overflow-hidden">
  <img class="absolute top-0 left-0" src="saturn-assets/images/testimonials/blue-light.png" alt="">
  <img class="absolute top-0 right-0" src="saturn-assets/images/testimonials/orange-light.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="max-w-xl mb-24 mx-auto text-center">
        <span class="inline-block py-1 px-3 mb-4 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">TESTIMONIALS</span>
        <h1 class="font-heading text-4xl xs:text-6xl font-bold text-gray-900 mb-6">
          <span>Customer said about</span>
          <span class="font-serif italic">Saturn</span>
        </h1>
      </div>
    </div>
  </div>
  <div class="relative" style="height:600px;">
    <div class="overflow-hidden h-full">
        <div class="absolute left-1/2 transform -translate-x-1/2">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-5">
                <div x-ref="slide1" class="flex-shrink-0 h-full w-full p-5">
                    <div class="flex mb-8 justify-center">
                      <div class="w-full max-w-sm flex-shrink-0 mr-8">
                        <div class="p-6 bg-white rounded-4xl shadow-lg">
                          <div class="flex mb-6 items-center">
                            <img class="block w-15 h-15 rounded-full" src="saturn-assets/images/testimonials/avatar-group-3.png" alt="">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Testimonials Component Generator

Tailwind Component #49

Tailwind CSS

Saturn

<section class="py-20 bg-gray-900">
  <div class="container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="pb-10 mb-10 border-b border-gray-700 items-center">
        <div class="flex flex-wrap -mx-4 items-center">
          <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-0">
            <a class="inline-block" href="#">
              <img class="h-15" src="saturn-assets/logos/logo-saturn-light.svg" alt="">
            </a>
          </div>
          <div class="w-full lg:w-1/2 px-4">
            <div class="sm:flex -mb-4 items-center lg:justify-end">
              <span class="inline-block text-white mb-4 mr-8">Ready to get collaborate?</span>
              <a class="relative group inline-block w-full sm:w-auto py-3 px-5 mb-4 text-center text-sm font-semibold text-orange-50 hover:text-orange-900 bg-orange-900 rounded-md overflow-hidden transition duration-300" href="#">
                <div class="absolute top-0 right-full w-full h-full bg-white transform group-hover:translate-x-full group-hover:scale-105 transition duration-500"></div>
                <span class="relative">Get Started</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4 mb-18">
        <div class="w-full lg:w-2/5 px-4 mb-12 lg:mb-0">
          <div class="xs:max-w-xs">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Footers Component Generator

Tailwind Component #50

Tailwind CSS

Saturn

<section class="relative py-20 md:py-24 bg-gray-100 overflow-hidden">
  <img class="absolute top-0 left-0" src="saturn-assets/images/team/light-blue.png" alt="">
  <img class="absolute bottom-0 right-0" src="saturn-assets/images/team/light-orange.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-md md:max-w-2xl mx-auto xl:max-w-7xl">
      <div class="flex flex-wrap mb-20 -mx-4 items-center">
        <div class="w-full xl:w-1/2 px-4">
          <div>
            <h1 class="font-heading text-5xl xs:text-6xl md:text-7xl font-bold text-gray-900 mb-8">
              <span>Get to know our amazing</span>
              <span class="font-serif italic">Team</span>
            </h1>
          </div>
        </div>
        <div class="w-full xl:w-1/2 px-4">
          <div class="max-w-lg xl:ml-auto">
            <p class="text-lg text-gray-500">Mi turpis turpis in justo pellentesque id nibh praesent. Posuere vel sit dignissim eu nisl gravida. Fringilla sodales lobortis eget citudin fringilla.</p>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4 -mb-12">
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-12">
          <div class="max-w-xs md:max-w-none mx-auto">
            <div class="flex flex-col items-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 #51

Tailwind CSS

Saturn

<section x-data="{ toggle: true }" class="relative py-20 overflow-hidden bg-gray-50">
  <img class="absolute top-0 right-0 -mr-32 md:-mr-0" src="saturn-assets/images/pricing/circle-star.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-2xl lg:max-w-5xl mx-auto mb-24 text-center">
      <h1 class="font-heading text-4xl sm:text-6xl lg:text-7xl font-bold text-gray-900 mb-8">
        <span>Choose a plan for a more</span>
        <span class="font-serif italic">advanced</span>
        <span>business</span>
      </h1>
      <div class="flex items-center justify-center">
        <div x-on:click="toggle = !toggle" class="relative inline-flex p-1 w-12 h-7 items-center justify-end bg-gray-100 rounded-full">
          <span :class="{'left-1/2': toggle}" class="absolute left-1 w-5 h-5 bg-orange-900 rounded-full transition-all duration-500"></span>
        </div>
        <span x-show="!toggle" class="ml-3 text-xl text-gray-900">Monthly pricing (save 20%)</span>
        <span x-show="toggle" class="visibility-item ml-3 text-xl text-gray-900">Annual pricing (save 20%)</span>
      </div>
    </div>
    <div class="max-w-7xl mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 px-4 lg:pt-16 mb-8 lg:mb-0">
          <div class="max-w-sm mx-auto p-10 bg-gray-50 border border-gray-100 rounded-3xl">
            <div class="flex mb-4 items-center justify-center w-10 h-10 bg-gray-100 rounded-full">
              <img src="saturn-assets/images/pricing/icon1.svg" alt="">
            </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Pricing Component Generator

Tailwind Component #52

Tailwind CSS

Saturn

<section class="relative py-20 overflow-hidden">
  <img class="absolute top-0 left-0 mt-44" src="saturn-assets/images/faq/light-orange-left.png" alt="">
  <img class="absolute top-0 right-0 mt-10 -mr-20 sm:-mr-0" src="saturn-assets/images/faq/star-right.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-4xl mx-auto">
      <div class="text-center mb-24">
        <span class="inline-block py-1 px-3 mb-4 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">FREQUENTLY ASK QUESTION</span>
        <h1 class="font-heading text-5xl xs:text-6xl md:text-7xl font-bold">
          <span>You ask? We</span>
          <span class="font-serif italic">answer</span>
        </h1>
      </div>
      <div class="flex cursor-pointer mb-8 p-8 group w-full items-start justify-between rounded-3xl border border-gray-100 text-left" x-data="{ accordion: false }" x-on:click="accordion = !accordion">
        <div class="max-w-xl pr-5">
          <h3 class="text-xl font-semibold" :class="accordion ? 'text-orange-900' : 'text-black'">Do you provide a complete design style?</h3>
          <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
              <p class="mt-3 text-lg text-gray-500">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
          </div>
        </div>
        <div>
          <span :class="{ 'hidden': !accordion }" class="relative top-4 hidden">
            <svg width="17" height="3" viewBox="0 0 17 3" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15.4619 0.045166H1.46194C1.19673 0.045166 0.942374 0.150523 0.754838 0.338059C0.567302 0.525596 0.461945 0.77995 0.461945 1.04517C0.461945 1.31038 0.567302 1.56474 0.754838 1.75227C0.942374 1.93981 1.19673 2.04517 1.46194 2.04517H15.4619C15.7272 2.04517 15.9815 1.93981 16.1691 1.75227C16.3566 1.56474 16.4619 1.31038 16.4619 1.04517C16.4619 0.77995 16.3566 0.525596 16.1691 0.338059C15.9815 0.150523 15.7272 0.045166 15.4619 0.045166Z" fill="#FF460C"></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 FAQ Component Generator

Tailwind Component #53

Tailwind CSS

Saturn

<section x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }" class="relative py-20 md:py-32 overflow-hidden">
  <img class="absolute top-0 left-0 mt-4 -ml-20 md:-ml-0" src="saturn-assets/images/content/stars-left-top.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="text-center mb-18">
      <span class="inline-block py-1 px-3 mb-4 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">SOCIAL MEDIA</span>
      <h1 class="font-heading text-4xl xs:text-6xl md:text-7xl font-bold text-gray-900 mb-4">
        <span>Follow us on</span>
        <span class="font-serif italic">instagram</span>
      </h1>
      <p class="text-gray-500">Risus viverra justo sagittis vestibulum metus.</p>
    </div>
    <div class="relative max-w-sm sm:max-w-7xl mx-auto">
      <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="absolute z-10 top-1/2 left-0 transform -translate-y-1/2 flex items-center justify-center w-12 h-12 bg-white rounded-full border border-gray-200 hover:border-orange-900 transition duration-200">
        <img src="saturn-assets/images/instagram-photos/left-arrow.svg" alt="">
      </button>
      <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="absolute z-10 top-1/2 right-0 transform -translate-y-1/2 flex items-center justify-center w-12 h-12 bg-white rounded-full border border-gray-200 hover:border-orange-900 transition duration-200">
        <img src="saturn-assets/images/instagram-photos/right-arrow.svg" alt="">
      </button>
      <div class="px-6">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-5">
                <div x-ref="slide1" class="flex-shrink-0 w-full p-5">
                    <div class="flex -mx-4">
                      <div class="w-full md:w-1/3 lg:w-1/4 px-4">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Instagram photos Component Generator

Tailwind Component #54

Tailwind CSS

Saturn

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative py-6 bg-white z-50">
    <div class="container px-4 mx-auto">
      <div class="flex items-center relative">
        <a class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 inline-block text-lg font-bold" href="#">
          <img class="h-10" src="saturn-assets/logos/logo-saturn-dark.svg" alt="" width="auto">
        </a>
        <div class="lg:hidden ml-auto">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex w-12 h-12 items-center justify-center bg-gray-100 hover:bg-gray-200 rounded-md transition duration-200">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3 12H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M3 6H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M3 18H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>
        <ul class="hidden lg:flex lg:w-auto lg:space-x-12">
          <li class="group relative">
            <a class="inline-block text-sm text-gray-900 hover:text-orange-900 font-medium" href="#">Featured</a>
            <div class="hidden group-hover:block absolute top-full left-0 min-w-max max-w-xs p-4 z-50">
              <div class="-mb-2 ml-8 w-4 h-4 rounded-sm bg-white border-l border-t border-gray-200 transform rotate-45"></div>
              <div class="w-full max-w-xs bg-white border border-gray-100 rounded-3xl pt-4 pb-4 px-4">
                <div class="pb-3 mb-3 border-b border-gray-100"><a class="block py-3 px-4 text-sm text-gray-900 hover:bg-orange-50 rounded-lg" href="#">Featured</a><a class="block py-3 px-4 text-sm text-gray-900 hover:bg-orange-50 rounded-lg" href="#">Solutions</a></div>
                <div class="pb-3 mb-3 border-b border-gray-100">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Navigation (horizontal) Component Generator

Tailwind Component #55

Tailwind CSS

Saturn

<section class="relative py-20 md:py-32 overflow-hidden">
  <img class="absolute top-0 right-0 md:mt-10 -mr-20 md:-mr-0" src="saturn-assets/images/stats/star-circle.svg" alt="">
  <img class="absolute bottom-0 left-0" src="saturn-assets/images/stats/left-blue-light.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-5xl mx-auto">
      <div class="flex flex-wrap -mx-4 mb-24 items-end">
        <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
          <div class="max-w-md md:max-w-lg">
            <span class="inline-block py-1 px-3 mb-5 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">PRODUCT OVERVIEW</span>
            <h1 class="font-heading text-5xl xs:text-6xl md:text-7xl font-bold">
              <span>Build</span>
              <span class="font-serif italic">Exclusively</span>
            </h1>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="max-w-md lg:ml-auto lg:pb-3">
            <p class="text-xl text-gray-500 font-semibold">Nisi eu pellentesque felis volutpat aliquet pulvinar sed. Vitae fames vestibulum urna vel odio mauris urna orci est.</p>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="relative w-full md:w-1/3 px-4 pb-9 md:pb-0 mb-12 lg:mb-0">
          <div class="hidden md:block absolute top-1/2 right-0 w-px h-28 bg-gray-200 transform -translate-y-1/2"></div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Stats Component Generator

Tailwind Component #56

Tailwind CSS

Saturn

<section class="relative py-20 md:py-32 overflow-hidden">
  <img class="absolute top-0 right-0 -mt-24" src="saturn-assets/images/contact/light-orange-right.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="max-w-2xl mb-24">
        <span class="inline-block py-1 px-3 mb-4 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">CONTACT US</span>
        <h1 class="max-w-md font-heading text-5xl xs:text-6xl font-bold text-gray-900 mb-4">
          <span>Don’t hesitate</span>
          <span class="font-serif italic">to talk with us</span>
        </h1>
        <p class="text-xl text-gray-500 font-semibold">Relax, we are ready to support 24/7 for you</p>
      </div>
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
          <div class="flex mb-16 items-center">
            <div class="flex flex-shrink-0 mr-5 sm:mr-8 items-center justify-center p-1 w-16 sm:w-20 h-16 sm:h-20 rounded-full bg-yellow-200">
              <img src="saturn-assets/images/contact/icon-email.svg" alt="">
            </div>
            <div>
              <span class="sm:text-lg text-gray-500">Email</span>
              <span class="block text-lg sm:text-2xl font-semibold text-gray-900">hello@yourdomain.com</span>
            </div>
          </div>
          <div class="flex items-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 Contact Component Generator

Tailwind Component #57

Tailwind CSS

Saturn

<section x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }" class="relative overflow-hidden">
  <div class="hidden xl:block absolute top-0 left-0 h-full w-full max-w-2xl xl:max-w-3xl 2xl:max-w-4xl">
    <img class="block h-full w-full object-cover" src="saturn-assets/images/sign-up/image-vr-woman.png" alt="">
    <div class="absolute bottom-0 w-full left-0 px-20 pb-18">
      <div class="max-w-2xl p-10 backdrop-blur-md backdrop-filter bg-black bg-opacity-30 rounded-5xl">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                <div x-ref="slide1" class="flex-shrink-0 h-full w-full p-5">
                    <h5 class="text-3xl text-white font-semibold mb-2">Selina Destin</h5>
                    <span class="block text-sm text-white font-semibold mb-6">Web Development Agency</span>
                    <p class="max-w-lg text-2xl text-white mb-15">"Untitled has become essential in starting every new project, we can't imagine working without it."</p>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 h-full w-full p-5">
                    <h5 class="text-3xl text-white font-semibold mb-2">Kristin Watson</h5>
                    <span class="block text-sm text-white font-semibold mb-6">Medical Assistant</span>
                    <p class="max-w-lg text-2xl text-white mb-15">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna."</p>
                </div>
                <div x-ref="slide3" class="flex-shrink-0 h-full w-full p-5">
                    <h5 class="text-3xl text-white font-semibold mb-2">Darrell Steward</h5>
                    <span class="block text-sm text-white font-semibold mb-6">Marketing Coordinator</span>
                    <p class="max-w-lg text-2xl text-white mb-15">"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
                </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 Sign in / Sign up Component Generator

Tailwind Component #58

Tailwind CSS

Saturn

<section class="relative py-20 overflow-hidden" x-data="{ showContent: false }">
  <img class="absolute top-0 right-0 xl:mt-10 -mr-24 lg:-mr-0" src="saturn-assets/images/blog/star-circle-right.svg" alt="">
  <img class="hidden sm:block absolute bottom-0 left-0 -mb-48 lg:mb-0" src="saturn-assets/images/blog/blue-light-left.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-xl lg:max-w-7xl mx-auto">
      <div class="max-w-2xl mx-auto mb-15 text-center">
        <span class="inline-block py-1 px-3 mb-4 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">OUR BLOG</span>
        <h1 class="font-heading text-5xl xs:text-6xl md:text-7xl font-bold">
          <span>News &amp;</span>
          <span class="font-serif italic">Articles</span>
        </h1>
      </div>
      <div class="flex flex-wrap -mx-4 mb-18">
        <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
          <a class="block group w-full" href="#">
            <img class="block w-full mb-5" src="saturn-assets/images/blog/article-big.png" alt="">
            <span class="block text-gray-500 mb-5">Jul 20, 2022</span>
            <h4 class="text-3xl font-semibold text-gray-900 group-hover:text-orange-900 mb-5">Consectures Dummy Content Velit officia consequat duis enim velit</h4>
            <p class="max-w-xl text-lg text-gray-500">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit xercitation veniam consequat sunt nostrud amet.</p>
          </a>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <a class="md:flex group mb-8" href="#">
            <img class="w-48 h-40" src="saturn-assets/images/blog/article-small-2.png" alt="">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Blog Component Generator

Tailwind Component #59

Tailwind CSS

Saturn

<div class="fixed bottom-0 inset-x-0 z-50 overflow-hidden" :class="{ 'hidden': !open }" x-data="{ open: true }">
  <div class="relative py-18 bg-gray-900">
    <img class="absolute bottom-0 right-0" src="saturn-assets/images/cookies/cookies-dark-right.svg" alt="">
    <div class="relative container px-4 mx-auto">
      <div class="max-w-5xl mx-auto">
        <div class="flex flex-wrap -mx-4 items-center">
          <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
            <h4 class="text-xl text-gray-50 font-semibold mb-4">Cookies on this site</h4>
            <p class="text-gray-400">
              <span>By clicking "Accept all" you consent to cookies being stored on your device to improve website navigation, analyze website usage and assist with our marketing efforts. View our</span>
              <a class="inline-block text-orange-900 hover:text-orange-700" href="#">Personal Data Policy</a>
              <span>for more information.</span>
            </p>
          </div>
          <div class="w-full lg:w-1/3 px-4">
            <div class="flex items-center lg:justify-end"><a class="inline-block mr-4 py-3 px-5 text-sm font-semibold text-orange-50 border border-gray-700 rounded-md hover:border-orange-900 transition duration-200" href="#">Manage Cookies</a><a x-on:click.prevent="open = false" class="inline-block py-3 px-5 text-sm font-semibold text-orange-50 hover:text-orange-900 bg-orange-900 hover:bg-orange-50 rounded-md transition duration-200" href="#">Accept all</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Cookies Component Generator

Tailwind Component #60

Tailwind CSS

Saturn

<section class="relative pt-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-md lg:max-w-7xl mx-auto">
      <div class="relative z-10 flex flex-wrap -mx-4 mb-14 items-center">
        <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
          <div class="max-w-2xl mx-auto lg:mx-0">
            <span class="inline-block py-1 px-3 mb-5 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">👋 MEET SATURN UI LIBRARY</span>
            <h1 class="font-heading text-5xl xs:text-6xl xl:text-7xl font-bold">
              <span>Manage your</span>
              <span class="block leading-snug font-serif italic">products</span>
              <span>with saturn</span>
            </h1>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="flex lg:justify-end">
            <div class="mr-5 pt-2">
              <div class="w-12 xs:w-24 h-px bg-orange-500"></div>
            </div>
            <div>
              <div class="flex items-center mb-5">
                <img class="mr-1.5 h-4" src="saturn-assets/images/applications/star.svg" alt="">
                <img class="mr-1.5 h-4" src="saturn-assets/images/applications/star.svg" alt="">
                <img class="mr-1.5 h-4" src="saturn-assets/images/applications/star.svg" alt="">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Application 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

Framework

UI Library

Components

Tailwind Component #41

Get the code for 13,400+ components

Mobile App Marketing Hero with Phone Chat Mockup and Store Badges

Tailwind Component #42

Get the code for 13,400+ components

Contact Section with Two Office Location Cards

Tailwind Component #43

Get the code for 13,400+ components

Split-screen rich text module with serif accent heading and checklist

Tailwind Component #44

Get the code for 13,400+ components

Centered Hero with Serif Accent Heading, Founder Avatars, and Orange CTA

Tailwind Component #45

Get the code for 13,400+ components

Get Started CTA with Email Signup and FAQ Links

Tailwind Component #46

Get the code for 13,400+ components

Team Introduction Section with Four Member Cards

Tailwind Component #47

Get the code for 13,400+ components

Dark newsletter signup banner with email input and orange Subscribe button

Tailwind Component #48

Get the code for 13,400+ components

Tailwind Component #49

Get the code for 13,400+ components

Tailwind Component #50

Get the code for 13,400+ components

Tailwind Component #51

Get the code for 13,400+ components

Tailwind Component #52

Get the code for 13,400+ components

Tailwind Component #53

Get the code for 13,400+ components

Tailwind Component #54

Get the code for 13,400+ components

Tailwind Component #55

Get the code for 13,400+ components

Tailwind Component #56

Get the code for 13,400+ components

Tailwind Component #57

Get the code for 13,400+ components

Tailwind Component #58

Get the code for 13,400+ components

Tailwind Component #59

Get the code for 13,400+ components

Tailwind Component #60

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support