Tailwind CSS Components – 7,300+ Free Copy-Paste Blocks

Tailwind Component #61

<section class="relative py-20 lg:py-32 overflow-hidden">
  <img class="absolute left-0 top-0" src="saturn-assets/images/features/star-left.png" alt="">
  <img class="absolute right-0 bottom-0" src="saturn-assets/images/features/light-orange.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-5xl mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
          <div class="max-w-md lg:max-w-lg mx-auto lg:mx-0">
            <h1 class="font-heading text-5xl xs:text-6xl font-bold text-gray-900 mb-6">
              <span>Why we are</span>
              <span class="font-serif italic">different</span>
              <span>from other startups</span>
            </h1>
            <div class="max-w-sm mb-10">
              <p class="text-gray-500">With us you can create a mobile app for your business in 2 weeks as well as create a website for your business in 2 days.</p>
            </div>
            <div class="inline-block sm:inline-flex items-center pl-5 py-5 pr-6 bg-white rounded-3xl shadow-xl">
              <div class="flex mb-6 sm:mb-0 mr-6 items-center">
                <img class="h-13 w-13 border-2 border-white" src="saturn-assets/images/features/avatar-3.png" alt="">
                <img class="-ml-4 h-13 w-13" src="saturn-assets/images/features/avatar-2.png" alt="">
                <img class="-ml-4 h-13 w-13" src="saturn-assets/images/features/avatar-1.png" alt="">
              </div>
              <div>
                <span class="block text-2xl font-semibold">1.289</span>
                <span class="text-gray-500">Our Remote Team</span>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="relative max-w-md lg:max-w-sm mx-auto lg:mr-0">
            <img class="w-full" src="saturn-assets/images/features/color-pastel-image.png" alt="">
            <div class="absolute bottom-0 left-0 p-4">
              <div class="inline-block p-5 bg-white rounded-lg">
                <span class="block mb-5 text-2xl font-semibold">$60,000</span>
                <span class="block mb-2 text-xs text-gray-500">Transaction per month</span>
                <div class="inline-flex p-1 items-center bg-green-50 rounded-md">
                  <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8.80666 3.52664L5.47333 0.193305C5.40993 0.132611 5.33516 0.0850345 5.25333 0.0533049C5.09102 -0.0133738 4.90897 -0.0133738 4.74666 0.0533049C4.66483 0.0850345 4.59007 0.132611 4.52666 0.193305L1.19333 3.52664C1.13117 3.5888 1.08186 3.66259 1.04822 3.74381C1.01458 3.82502 0.997269 3.91207 0.997269 3.99997C0.997269 4.17751 1.06779 4.34777 1.19333 4.47331C1.31887 4.59884 1.48913 4.66937 1.66666 4.66937C1.8442 4.66937 2.01446 4.59884 2.14 4.47331L4.33333 2.2733V7.3333C4.33333 7.51012 4.40357 7.67969 4.52859 7.80471C4.65362 7.92973 4.82319 7.99997 5 7.99997C5.17681 7.99997 5.34638 7.92973 5.4714 7.80471C5.59642 7.67969 5.66666 7.51012 5.66666 7.3333V2.2733L7.86 4.47331C7.92197 4.53579 7.99571 4.58539 8.07694 4.61923C8.15818 4.65308 8.24532 4.6705 8.33333 4.6705C8.42134 4.6705 8.50847 4.65308 8.58971 4.61923C8.67095 4.58539 8.74469 4.53579 8.80666 4.47331C8.86915 4.41133 8.91874 4.3376 8.95259 4.25636C8.98644 4.17512 9.00386 4.08798 9.00386 3.99997C9.00386 3.91196 8.98644 3.82483 8.95259 3.74359C8.91874 3.66235 8.86915 3.58861 8.80666 3.52664Z" fill="#00AD6F"></path>
                  </svg>
                  <span class="ml-1 text-xs font-semibold text-green-900">2.5%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Tailwind Component #62

Tailwind CSS

Saturn

<section class="relative py-20 lg:py-24 overflow-hidden">
  <img class="absolute top-0 left-0 mt-10" src="saturn-assets/images/content/stars-left-top.svg" alt="">
  <img class="absolute bottom-0 right-0" src="saturn-assets/images/content/orange-light-right.png" 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">RICH TEXT MODULE</span>
      <h1 class="font-heading text-5xl xs:text-6xl md:text-7xl font-bold text-gray-900 mb-12">
        <span>Saturn is a beautiful</span>
        <span class="block font-serif italic">UI Library</span>
      </h1>
    </div>
    <div class="max-w-lg lg:max-w-3xl xl:max-w-5xl 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-lg">
            <p class="text-2xl text-gray-800 mb-12">Arcu ultrices sit non magna enim semper quam venenatis. Mi quisque ultrices rerit nec aliquet integer mollis faucibus colum morbi paleo javanicus.</p>
            <p class="text-2xl text-gray-800 mb-12">Augue justo at convallis vitae nunc maecenas est. Viverra duis feugiat posuere vitae tincidunt.</p>
            <p class="text-lg text-gray-700 mb-6">Pellentesque ipsum nulla in eget interdum a. Neque pellentesque pulvinar mauris pulvinar diam. Turpis aliquet pellentesque velit vitae nisi sed morbi ultrices sed. Egestas interdum elit integer nec pharetra eget blandit dolor purus. A sed nisi congue morbi fermentum blandit. Turpis pretium dignissim risus ultrices purus et amet netus nibh.</p>
            <p class="text-lg text-gray-700">Vestibulum est ante in congue a fusce nunc. At tristique donec nisi viverra vulputate blandit orci at lectus. Morbi cras urna congue ornare. Mi magna vestibulum tortor id nec tortor non. Enim orci lorem egestas sed morbi dui mauris etiam nulla. Euismod cursus viverra ut ac eu sit quam amet tempor. Id in suspendisse nam sit vitae ullamcorper mollis et ut.</p>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="max-w-lg">
            <p class="text-2xl font-semibold text-gray-800 mb-10">Vestibulum est ante in congue a fusce nunc. At tristique donec nisi viverra vulputate blandit turpis pretium dignissim risus ultrices purus et amet netus nibh.</p>
            <p class="text-lg text-gray-700 mb-6">Pellentesque ipsum nulla in eget interdum a. Neque pellentesque pulvinar mauris pulvinar diam. Turpis aliquet pellentesque velit vitae nisi sed morbi ultrices sed. Egestas interdum elit integer nec pharetra eget blandit dolor purus. A sed nisi congue morbi fermentum blandit. Turpis pretium dignissim risus ultrices purus et amet netus nibh.</p>
            <p class="text-lg text-gray-700">Vestibulum est ante in congue a fusce nunc. At tristique donec nisi viverra vulputate blandit orci at lectus. Morbi cras urna congue ornare. Mi magna vestibulum tortor id nec tortor non. Enim orci lorem egestas sed morbi dui mauris etiam nulla. Euismod cursus viverra ut ac eu sit quam amet tempor. Id in suspendisse nam sit vitae ullamcorper mollis et ut.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #63

Tailwind CSS

Saturn

<section class="relative py-20 overflow-hidden">
  <div class="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-16 lg:mb-0">
          <div class="max-w-md lg:max-w-xl mx-auto lg:mx-0">
            <span class="inline-block py-2 px-3 mb-10 text-xs bg-orange-50 text-orange-900 font-semibold rounded-full">DESIGN &amp; DEVELOPMENT</span>
            <h2 class="font-heading text-5xl xs:text-6xl font-bold text-gray-900 mb-10">
              <span>Join &amp; build your</span>
              <span class="font-serif italic">amazing</span>
              <span>apps</span>
            </h2>
            <div class="md:flex max-w-sm px-5 py-5 mb-10 items-center bg-white shadow-lg rounded-3xl">
              <div class="flex mb-6 md:mb-0 md:mr-6 items-center">
                <img src="saturn-assets/images/cta/avata-medium2.png" alt="">
                <img class="-ml-5" src="saturn-assets/images/cta/avata-medium1.png" alt="">
                <img class="-ml-5" src="saturn-assets/images/cta/avata-medium3.png" alt="">
              </div>
              <div>
                <span class="block text-2xl font-bold leading-none">200+</span>
                <span class="block text-sm text-gray-500">Our Remote Team</span>
              </div>
            </div>
            <div class="flex p-1.5 max-w-sm items-center border border-gray-200 rounded-lg">
              <input class="w-full py-1 px-4 rounded-lg bg-transparent text-sm text-gray-500 outline-none" type="email" placeholder="Enter your email">
              <a class="relative group flex-shrink-0 inline-block py-2 px-4 text-xs font-semibold text-orange-50 rounded-md bg-orange-900 overflow-hidden" href="#">
                <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">Join now</span>
              </a>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <img class="block w-full max-w-md lg:max-w-sm mx-auto lg:mr-0" src="saturn-assets/images/cta/image-red.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #64

Tailwind CSS

Saturn

<section class="relative py-20 md:py-24 overflow-hidden">
  <div class="relative container px-4 mx-auto">
    <div class="relative max-w-7xl mx-auto px-8 pt-16 pb-18 md:pb-24 bg-gray-900 rounded-4xl overflow-hidden">
      <img class="absolute top-0 left-0 w-full h-full" src="saturn-assets/images/newsletter/bg-gradient-medium.png" alt="">
      <div class="relative max-w-md mx-auto">
        <h4 class="font-heading text-center text-4xl sm:text-5xl text-gray-50 font-semibold mb-12">Sign up for our newsletter</h4>
        <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 bg-blue-900 rounded-md 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>
            <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>
        </div>
        <span class="block text-xs font-semibold text-gray-200">
          <span>We care about your data in our</span>
          <a class="inline-block underline text-white" href="#">privacy policy</a>
        </span>
      </div>
    </div>
  </div>
</section>

Tailwind Component #65

Tailwind CSS

Saturn

<section class="relative py-20 md:py-28 lg:py-52 overflow-hidden">
  <div class="relative container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <div class="max-w-md md:max-w-2xl lg:max-w-none mx-auto">
          <h2 class="font-heading text-4xl xs:text-6xl font-bold text-gray-900 mb-12">
            <span>Currently Updating-</span>
            <span class="block font-serif italic">Back soon!</span>
          </h2>
          <div class="sm:flex max-w-sm sm:max-w-lg">
            <div class="mb-6 sm:mb-0 sm:mr-3 pt-3">
              <svg width="84" height="10" viewBox="0 0 84 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 4.25C0.585786 4.25 0.25 4.58579 0.25 5C0.25 5.41421 0.585786 5.75 1 5.75L1 4.25ZM84 5.00001L76.5 0.669879L76.5 9.33013L84 5.00001ZM1 5.75L77.25 5.75001L77.25 4.25001L1 4.25L1 5.75Z" fill="#1E254C"></path>
              </svg>
            </div>
            <div class="max-w-md">
              <p class="sm:text-xl text-gray-500 font-semibold mb-14">Sorry, the page you are looking for doesn't exist or has been moved. Try searching our site:</p>
              <a class="relative group inline-block py-3 px-5 text-center text-sm font-semibold text-orange-50 bg-orange-900 rounded-full overflow-hidden" href="#">
                <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">Take me home</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <img class="block mx-auto" src="saturn-assets/images/http-codes/404-alien.png" alt="">
      </div>
    </div>
  </div>
</section>

Tailwind Component #66

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>
          <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>
        <div class="hidden lg:block ml-auto">
          <div class="flex items-center">
            <a class="inline-block mr-9 text-sm font-semibold text-orange-900 hover:text-gray-900" href="#">Sign In</a>
            <a class="relative group inline-block py-3 px-4 text-sm font-semibold text-orange-50 bg-orange-900 rounded-md overflow-hidden transition duration-300" href="#">
              <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">Create an account</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-md z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="relative flex flex-col py-6 px-10 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-16">
        <a class="mr-auto text-2xl font-medium leading-none" href="#">
          <img class="h-10" src="saturn-assets/logos/logo-saturn-dark.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-6 w-6 text-gray-500 cursor-pointer hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <div>
        <ul class="mb-2">
          <li><a class="block py-4 px-5 text-gray-900 hover:bg-orange-50 rounded-lg" href="#">About Us</a></li>
          <li><a class="block py-4 px-5 text-gray-900 hover:bg-orange-50 rounded-lg" href="#">Featured</a></li>
          <li><a class="block py-4 px-5 text-gray-900 hover:bg-orange-50 rounded-lg" href="#">Solutions</a></li>
          <li><a class="block py-4 px-5 text-gray-900 hover:bg-orange-50 rounded-lg" href="#">Products</a></li>
          <li><a class="block py-4 px-5 text-gray-900 hover:bg-orange-50 rounded-lg" href="#">Articles</a></li>
        </ul>
        <div class="py-8 px-6 mb-6 border-t border-b border-gray-200">
          <a class="flex items-center text-sm font-semibold text-orange-900 hover:text-orange-600" href="#">
            <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.3337 6.05833C17.2811 5.9059 17.1854 5.77202 17.0582 5.67292C16.931 5.57381 16.7777 5.51374 16.617 5.5L11.8754 4.80833L9.75038 0.499999C9.68215 0.359106 9.5756 0.240284 9.44296 0.157143C9.31031 0.074003 9.15693 0.0299072 9.00039 0.0299072C8.84384 0.0299072 8.69046 0.074003 8.55781 0.157143C8.42517 0.240284 8.31862 0.359106 8.25039 0.499999L6.12539 4.8L1.38372 5.5C1.22949 5.52192 1.08449 5.58663 0.96518 5.6868C0.845868 5.78696 0.757021 5.91856 0.708721 6.06666C0.664509 6.21139 0.660541 6.36543 0.697245 6.51224C0.733948 6.65905 0.809936 6.7931 0.917055 6.9L4.35872 10.2333L3.52539 14.9667C3.49564 15.1229 3.51121 15.2844 3.57028 15.432C3.62935 15.5797 3.72943 15.7074 3.85872 15.8C3.98474 15.8901 4.13337 15.9433 4.28793 15.9536C4.44249 15.9639 4.59686 15.9309 4.73372 15.8583L9.00039 13.6333L13.2504 15.8667C13.3673 15.9326 13.4994 15.9671 13.6337 15.9667C13.8102 15.9673 13.9824 15.9118 14.1254 15.8083C14.2547 15.7157 14.3548 15.588 14.4138 15.4404C14.4729 15.2927 14.4885 15.1312 14.4587 14.975L13.6254 10.2417L17.067 6.90833C17.1874 6.8064 17.2763 6.67242 17.3235 6.52195C17.3707 6.37149 17.3742 6.21073 17.3337 6.05833ZM12.2087 9.39166C12.111 9.48619 12.0379 9.6032 11.9957 9.73247C11.9536 9.86175 11.9438 9.99937 11.9671 10.1333L12.5671 13.625L9.43372 11.9583C9.31315 11.8941 9.17865 11.8605 9.04205 11.8605C8.90546 11.8605 8.77095 11.8941 8.65039 11.9583L5.51705 13.625L6.11705 10.1333C6.14033 9.99937 6.13048 9.86175 6.08836 9.73247C6.04623 9.6032 5.97312 9.48619 5.87539 9.39166L3.37539 6.89166L6.88372 6.38333C7.01872 6.36455 7.14705 6.31295 7.25747 6.23304C7.36789 6.15313 7.45702 6.04736 7.51705 5.925L9.00039 2.75L10.5671 5.93333C10.6271 6.0557 10.7162 6.16147 10.8266 6.24137C10.9371 6.32128 11.0654 6.37289 11.2004 6.39166L14.7087 6.9L12.2087 9.39166Z" fill="currentColor"></path>
            </svg>
            <span class="ml-3">Upgrade to Premium</span>
          </a>
        </div>
        <div class="flex px-6 mb-16 items-center"><a class="inline-block mr-9 text-sm font-semibold text-orange-900 hover:text-gray-900" href="#">Sign In</a><a class="inline-block py-3 px-4 text-sm font-semibold text-orange-900 hover:text-white border border-gray-300 hover:border-orange-600 hover:bg-orange-900 rounded-md transition duration-200" href="#">Create an account</a></div>
        <div>
          <div class="flex w-20 h-20 mb-6 items-center justify-center bg-orange-50 rounded-full">
            <svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M25.3333 16.6667C24.9797 16.6667 24.6406 16.8072 24.3905 17.0572C24.1405 17.3073 24 17.6464 24 18V23.3334C24 23.687 23.8595 24.0261 23.6095 24.2762C23.3594 24.5262 23.0203 24.6667 22.6667 24.6667H4C3.64638 24.6667 3.30724 24.5262 3.05719 24.2762C2.80714 24.0261 2.66667 23.687 2.66667 23.3334V10.5467L10.5067 18.4C11.2567 19.1491 12.2733 19.5698 13.3333 19.5698C14.3933 19.5698 15.41 19.1491 16.16 18.4L18.3467 16.2134C18.5977 15.9623 18.7388 15.6218 18.7388 15.2667C18.7388 14.9116 18.5977 14.5711 18.3467 14.32C18.0956 14.069 17.7551 13.9279 17.4 13.9279C17.0449 13.9279 16.7044 14.069 16.4533 14.32L14.2667 16.5067C14.0174 16.751 13.6823 16.8878 13.3333 16.8878C12.9843 16.8878 12.6492 16.751 12.4 16.5067L4.54667 8.66669H13.3333C13.687 8.66669 14.0261 8.52622 14.2761 8.27617C14.5262 8.02612 14.6667 7.68698 14.6667 7.33336C14.6667 6.97974 14.5262 6.6406 14.2761 6.39055C14.0261 6.1405 13.687 6.00002 13.3333 6.00002H4C2.93913 6.00002 1.92172 6.42145 1.17157 7.1716C0.421427 7.92174 0 8.93916 0 10V23.3334C0 24.3942 0.421427 25.4116 1.17157 26.1618C1.92172 26.9119 2.93913 27.3334 4 27.3334H22.6667C23.7275 27.3334 24.7449 26.9119 25.4951 26.1618C26.2452 25.4116 26.6667 24.3942 26.6667 23.3334V18C26.6667 17.6464 26.5262 17.3073 26.2761 17.0572C26.0261 16.8072 25.687 16.6667 25.3333 16.6667ZM27.6133 5.05336L23.6133 1.05336C23.4865 0.93197 23.337 0.836817 23.1733 0.773358C22.8487 0.64 22.4846 0.64 22.16 0.773358C21.9963 0.836817 21.8468 0.93197 21.72 1.05336L17.72 5.05336C17.4689 5.30443 17.3279 5.64496 17.3279 6.00002C17.3279 6.35509 17.4689 6.69562 17.72 6.94669C17.9711 7.19776 18.3116 7.33881 18.6667 7.33881C19.0217 7.33881 19.3623 7.19776 19.6133 6.94669L21.3333 5.21336V12.6667C21.3333 13.0203 21.4738 13.3595 21.7239 13.6095C21.9739 13.8595 22.313 14 22.6667 14C23.0203 14 23.3594 13.8595 23.6095 13.6095C23.8595 13.3595 24 13.0203 24 12.6667V5.21336L25.72 6.94669C25.844 7.07166 25.9914 7.17086 26.1539 7.23855C26.3164 7.30624 26.4907 7.34109 26.6667 7.34109C26.8427 7.34109 27.017 7.30624 27.1794 7.23855C27.3419 7.17086 27.4894 7.07166 27.6133 6.94669C27.7383 6.82274 27.8375 6.67527 27.9052 6.51279C27.9729 6.35032 28.0077 6.17604 28.0077 6.00002C28.0077 5.82401 27.9729 5.64973 27.9052 5.48726C27.8375 5.32478 27.7383 5.17731 27.6133 5.05336Z" fill="black"></path>
            </svg>
          </div>
          <span class="block mb-3 text-sm text-gray-500">Drop us a line</span>
          <a class="font-semibold text-black" href="#">hello@shuffle.dev</a>
        </div>
      </div>
    </nav>
  </div>
</section>

Tailwind Component #67

Tailwind CSS

Saturn

<section x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }" class="relative py-20 lg:pt-32 lg:pb-36 bg-gray-50 overflow-hidden">
  <img class="absolute top-0 right-0 mt-6 -mr-24 md:-mr-0" src="saturn-assets/images/testimonials/circle-star-bg.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="flex flex-wrap -mx-4 items-center mb-16">
        <div class="w-full lg:w-2/3 px-4 mb-12 lg:mb-0">
          <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-4">
            <span>What our clients</span>
            <span class="font-serif italic">said</span>
          </h1>
          <p class="text-gray-500">Risus viverra justo sagittis vestibulum metus.</p>
        </div>
        <div class="w-full lg:w-1/3 px-4">
          <div class="flex items-center justify-end">
            <button x-on:click="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-flex mr-3 w-14 h-14 items-center justify-center rounded-full border border-gray-200 hover:border-orange-900 text-gray-600 hover:text-orange-900 transition duration-200">
              <svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.0799999 6.62C0.127594 6.49725 0.19896 6.38511 0.290001 6.29L5.29 1.29C5.38324 1.19676 5.49393 1.1228 5.61575 1.07234C5.73757 1.02188 5.86814 0.995911 6 0.995911C6.2663 0.995911 6.5217 1.1017 6.71 1.29C6.80324 1.38324 6.8772 1.49393 6.92766 1.61575C6.97812 1.73758 7.00409 1.86814 7.00409 2C7.00409 2.2663 6.8983 2.5217 6.71 2.71L3.41 6H11C11.2652 6 11.5196 6.10536 11.7071 6.2929C11.8946 6.48043 12 6.73479 12 7C12 7.26522 11.8946 7.51957 11.7071 7.70711C11.5196 7.89465 11.2652 8 11 8H3.41L6.71 11.29C6.80373 11.383 6.87812 11.4936 6.92889 11.6154C6.97966 11.7373 7.0058 11.868 7.0058 12C7.0058 12.132 6.97966 12.2627 6.92889 12.3846C6.87812 12.5064 6.80373 12.617 6.71 12.71C6.61704 12.8037 6.50644 12.8781 6.38458 12.9289C6.26272 12.9797 6.13201 13.0058 6 13.0058C5.86799 13.0058 5.73728 12.9797 5.61542 12.9289C5.49356 12.8781 5.38296 12.8037 5.29 12.71L0.290001 7.71C0.19896 7.6149 0.127594 7.50275 0.0799999 7.38C-0.0200176 7.13654 -0.0200176 6.86346 0.0799999 6.62Z" fill="currentColor"></path>
              </svg>
            </button>
            <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-flex w-14 h-14 items-center justify-center rounded-full bg-orange-50 hover:bg-orange-100 text-orange-900 transition duration-200">
              <svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.92 6.62C11.8724 6.49725 11.801 6.38511 11.71 6.29L6.71 1.29C6.61676 1.19676 6.50607 1.1228 6.38425 1.07234C6.26243 1.02188 6.13186 0.995911 6 0.995911C5.7337 0.995911 5.4783 1.1017 5.29 1.29C5.19676 1.38324 5.1228 1.49393 5.07234 1.61575C5.02188 1.73758 4.99591 1.86814 4.99591 2C4.99591 2.2663 5.1017 2.5217 5.29 2.71L8.59 6H1C0.734784 6 0.48043 6.10536 0.292893 6.2929C0.105357 6.48043 0 6.73479 0 7C0 7.26522 0.105357 7.51957 0.292893 7.70711C0.48043 7.89465 0.734784 8 1 8H8.59L5.29 11.29C5.19627 11.383 5.12188 11.4936 5.07111 11.6154C5.02034 11.7373 4.9942 11.868 4.9942 12C4.9942 12.132 5.02034 12.2627 5.07111 12.3846C5.12188 12.5064 5.19627 12.617 5.29 12.71C5.38296 12.8037 5.49356 12.8781 5.61542 12.9289C5.73728 12.9797 5.86799 13.0058 6 13.0058C6.13201 13.0058 6.26272 12.9797 6.38458 12.9289C6.50644 12.8781 6.61704 12.8037 6.71 12.71L11.71 7.71C11.801 7.6149 11.8724 7.50275 11.92 7.38C12.02 7.13654 12.02 6.86346 11.92 6.62Z" fill="#FF460C"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
      <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 h-full w-full p-5">
                <div class="flex flex-wrap -mx-4">
                  <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
                    <div class="flex flex-col justify-between h-full max-w-md mx-auto lg:max-w-none bg-white rounded-3xl shadow-lg overflow-hidden">
                      <div class="p-6">
                        <div class="flex mb-4 items-center">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block" src="saturn-assets/images/testimonials/star.svg" alt="">
                        </div>
                        <p class="text-lg text-gray-900">It was a pleasure working with the Saturn. They understood the brief correctly and delivered great designs exceeding the expectations.</p>
                      </div>
                      <div class="px-8 py-4 bg-orange-800">
                        <div class="flex items-center">
                          <img class="block w-15 h-15 rounded-full" src="saturn-assets/images/testimonials/avatar-group-5.png" alt="">
                          <div class="ml-5">
                            <span class="block text-xl text-white font-semibold leading-none">Marvin McKinney</span>
                            <span class="block text-sm text-orange-200">CEO of Coca Soft</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
                    <div class="flex flex-col justify-between h-full max-w-md mx-auto lg:max-w-none bg-white rounded-3xl shadow-lg overflow-hidden">
                      <div class="p-6">
                        <div class="flex mb-4 items-center">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block" src="saturn-assets/images/testimonials/star.svg" alt="">
                        </div>
                        <p class="text-lg text-gray-900">With Saturn the results are very satisfying. wrapped with Hight quality and innovative design that makes a surge of visitors.</p>
                      </div>
                      <div class="px-8 py-4 bg-orange-800">
                        <div class="flex items-center">
                          <img class="block w-15 h-15 rounded-full" src="saturn-assets/images/testimonials/avatar-group-6.png" alt="">
                          <div class="ml-5">
                            <span class="block text-xl text-white font-semibold leading-none">Kathryn Murphy</span>
                            <span class="block text-sm text-orange-200">Founder ABC Studio</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="w-full lg:w-1/3 px-4">
                    <div class="flex flex-col justify-between h-full max-w-md mx-auto lg:max-w-none bg-white rounded-3xl shadow-lg overflow-hidden">
                      <div class="p-6">
                        <div class="flex mb-4 items-center">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block" src="saturn-assets/images/testimonials/star.svg" alt="">
                        </div>
                        <p class="text-lg text-gray-900">It was a delight collaborating with Saturn. They grasped the brief accurately and produced exceptional designs that surpassed expectations.</p>
                      </div>
                      <div class="px-8 py-4 bg-orange-800">
                        <div class="flex items-center">
                          <img class="block w-15 h-15 rounded-full" src="saturn-assets/images/testimonials/avatar-group-4.png" alt="">
                          <div class="ml-5">
                            <span class="block text-xl text-white font-semibold leading-none">Beby Aduhai</span>
                            <span class="block text-sm text-orange-200">CEO of Sans Design</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
            <div x-ref="slide2" class="flex-shrink-0 h-full w-full p-5">
                <div class="flex flex-wrap -mx-4">
                  <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
                    <div class="flex flex-col justify-between h-full max-w-md mx-auto lg:max-w-none bg-white rounded-3xl shadow-lg overflow-hidden">
                      <div class="p-6">
                        <div class="flex mb-4 items-center">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block" src="saturn-assets/images/testimonials/star.svg" alt="">
                        </div>
                        <p class="text-lg text-gray-900">Working with Saturn was truly enjoyable. They not only captured the essence of the brief perfectly but also delivered designs.</p>
                      </div>
                      <div class="px-8 py-4 bg-orange-800">
                        <div class="flex items-center">
                          <img class="block w-15 h-15 rounded-full" src="saturn-assets/images/testimonials/avatar-group-1.png" alt="">
                          <div class="ml-5">
                            <span class="block text-xl text-white font-semibold leading-none">Marvin McKinney</span>
                            <span class="block text-sm text-orange-200">CEO of Coca Soft</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
                    <div class="flex flex-col justify-between h-full max-w-md mx-auto lg:max-w-none bg-white rounded-3xl shadow-lg overflow-hidden">
                      <div class="p-6">
                        <div class="flex mb-4 items-center">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block" src="saturn-assets/images/testimonials/star.svg" alt="">
                        </div>
                        <p class="text-lg text-gray-900">Collaborating with Saturn was a pleasure. Their understanding of the brief was spot-on, and the designs.</p>
                      </div>
                      <div class="px-8 py-4 bg-orange-800">
                        <div class="flex items-center">
                          <img class="block w-15 h-15 rounded-full" src="saturn-assets/images/testimonials/avatar-group-2.png" alt="">
                          <div class="ml-5">
                            <span class="block text-xl text-white font-semibold leading-none">Kathryn Murphy</span>
                            <span class="block text-sm text-orange-200">Founder ABC Studio</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="w-full lg:w-1/3 px-4">
                    <div class="flex flex-col justify-between h-full max-w-md mx-auto lg:max-w-none bg-white rounded-3xl shadow-lg overflow-hidden">
                      <div class="p-6">
                        <div class="flex mb-4 items-center">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block" src="saturn-assets/images/testimonials/star.svg" alt="">
                        </div>
                        <p class="text-lg text-gray-900">It was a rewarding experience teaming up with Saturn. They not only interpreted the brief with precision but also went above and beyond.</p>
                      </div>
                      <div class="px-8 py-4 bg-orange-800">
                        <div class="flex items-center">
                          <img class="block w-15 h-15 rounded-full" src="saturn-assets/images/testimonials/avatar-group-3.png" alt="">
                          <div class="ml-5">
                            <span class="block text-xl text-white font-semibold leading-none">Beby Aduhai</span>
                            <span class="block text-sm text-orange-200">CEO of Sans Design</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
            <div x-ref="slide3" class="flex-shrink-0 h-full w-full p-5">
                <div class="flex flex-wrap -mx-4">
                  <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
                    <div class="flex flex-col justify-between h-full max-w-md mx-auto lg:max-w-none bg-white rounded-3xl shadow-lg overflow-hidden">
                      <div class="p-6">
                        <div class="flex mb-4 items-center">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block" src="saturn-assets/images/testimonials/star.svg" alt="">
                        </div>
                        <p class="text-lg text-gray-900">Working alongside Saturn was a pleasure from start to finish. They not only grasped the brief accurately.</p>
                      </div>
                      <div class="px-8 py-4 bg-orange-800">
                        <div class="flex items-center">
                          <img class="block w-15 h-15 rounded-full" src="saturn-assets/images/testimonials/avatar-group-2.png" alt="">
                          <div class="ml-5">
                            <span class="block text-xl text-white font-semibold leading-none">Marvin McKinney</span>
                            <span class="block text-sm text-orange-200">CEO of Coca Soft</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
                    <div class="flex flex-col justify-between h-full max-w-md mx-auto lg:max-w-none bg-white rounded-3xl shadow-lg overflow-hidden">
                      <div class="p-6">
                        <div class="flex mb-4 items-center">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block" src="saturn-assets/images/testimonials/star.svg" alt="">
                        </div>
                        <p class="text-lg text-gray-900">Saturn's collaboration was truly enjoyable. They not only comprehended the brief perfectly but also delivered designs.</p>
                      </div>
                      <div class="px-8 py-4 bg-orange-800">
                        <div class="flex items-center">
                          <img class="block w-15 h-15 rounded-full" src="saturn-assets/images/testimonials/avatar-group-5.png" alt="">
                          <div class="ml-5">
                            <span class="block text-xl text-white font-semibold leading-none">Kathryn Murphy</span>
                            <span class="block text-sm text-orange-200">Founder ABC Studio</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="w-full lg:w-1/3 px-4">
                    <div class="flex flex-col justify-between h-full max-w-md mx-auto lg:max-w-none bg-white rounded-3xl shadow-lg overflow-hidden">
                      <div class="p-6">
                        <div class="flex mb-4 items-center">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block mr-1.5" src="saturn-assets/images/testimonials/star.svg" alt="">
                          <img class="block" src="saturn-assets/images/testimonials/star.svg" alt="">
                        </div>
                        <p class="text-lg text-gray-900">It was a delightful experience collaborating with Saturn. Their ability to grasp the essence of the brief and deliver.</p>
                      </div>
                      <div class="px-8 py-4 bg-orange-800">
                        <div class="flex items-center">
                          <img class="block w-15 h-15 rounded-full" src="saturn-assets/images/testimonials/avatar-group-4.png" alt="">
                          <div class="ml-5">
                            <span class="block text-xl text-white font-semibold leading-none">Beby Aduhai</span>
                            <span class="block text-sm text-orange-200">CEO of Sans Design</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #68

Tailwind CSS

Saturn

<section class="relative xl:pt-20 overflow-hidden">
  <div class="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-2/5 px-4 order-last lg:order-first">
          <div class="relative flex h-full items-end">
            <img class="absolute top-0 left-0 -ml-32 lg:-ml-64" src="saturn-assets/images/applications/light-full-center-blue.png" alt="">
            <img class="absolute top-0 right-0 -mr-32 lg:-mr-64" src="saturn-assets/images/applications/light-full-center-orange.png" alt="">
            <img class="hidden lg:block absolute bottom-0 left-0 -ml-20 min-w-max w-full h-150 xl:h-200" src="saturn-assets/images/applications/phone-left-side.png" alt="">
            <img class="lg:hidden relative block w-full max-w-lg mx-auto" src="saturn-assets/images/applications/phone-left-side.png" alt="">
          </div>
        </div>
        <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:mr-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>Customer experience your competitive</span>
              <span class="block font-serif italic">advantage</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>
            <a class="relative group inline-block py-4 px-6 text-center text-orange-50 bg-orange-900 font-semibold rounded-full overflow-hidden" href="#">
              <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">Start 14-days Trial</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #69

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-8 mb-15 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 -mb-5 lg:-mx-6 items-center justify-center">
        <div class="px-6 mb-5"><a class="inline-block text-gray-300 hover:text-gray-200" href="#">Product</a></div>
        <div class="px-6 mb-5"><a class="inline-block text-gray-300 hover:text-gray-200" href="#">Features</a></div>
        <div class="px-6 mb-5"><a class="inline-block text-gray-300 hover:text-gray-200" href="#">Pricing</a></div>
        <div class="px-6 mb-5"><a class="inline-block text-gray-300 hover:text-gray-200" href="#">Resources</a></div>
        <div class="px-6 mb-5"><a class="inline-block text-gray-300 hover:text-gray-200" href="#">Careers</a></div>
        <div class="px-6 mb-5"><a class="inline-block text-gray-300 hover:text-gray-200" href="#">Help</a></div>
        <div class="px-6 mb-5"><a class="inline-block text-gray-300 hover:text-gray-200" href="#">Privacy</a></div>
      </div>
      <div class="mt-15 text-center">
        <span class="text-gray-500">© 2023 saturn. All rights reserved.</span>
      </div>
    </div>
  </div>
</section>

Tailwind Component #70

Tailwind CSS

Saturn

<section class="relative py-20 md:py-32 bg-gray-800 overflow-hidden">
  <img class="absolute top-0 right-0 md:mt-10 -mr-20 md:-mr-0" src="saturn-assets/images/stats/star-dark.svg" 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 text-white 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-200 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>
          <div class="md:hidden absolute bottom-0 left-1/2 h-px w-40 bg-gray-200 transform -translate-x-1/2"></div>
          <div class="text-center">
            <span class="block text-5xl lg:text-7xl font-bold text-gray-50 mb-5">300+</span>
            <span class="text-xl text-gray-200">PRODUCTS</span>
          </div>
        </div>
        <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>
          <div class="md:hidden absolute bottom-0 left-1/2 h-px w-40 bg-gray-200 transform -translate-x-1/2"></div>
          <div class="text-center">
            <span class="block text-5xl lg:text-7xl font-bold text-gray-50 mb-5">85</span>
            <span class="text-xl text-gray-200">WEB TEMPLATE</span>
          </div>
        </div>
        <div class="w-full md:w-1/3 px-4">
          <div class="text-center">
            <span class="block text-5xl lg:text-7xl font-bold text-gray-50 mb-5">215</span>
            <span class="text-xl text-gray-200">MOBILE TEMPLATE</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #71

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/orange-light-left.png" alt="">
  <img class="absolute top-0 right-0 -mt-20" src="saturn-assets/images/team/blue-light-right.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="mx-auto max-w-7xl">
      <h1 class="font-heading text-5xl xs:text-6xl md:text-7xl font-bold text-gray-900 mb-8">
        <span>Meet our team of creators, designers, and world-class problem</span>
        <span class="font-serif italic">solvers</span>
      </h1>
      <p class="max-w-xl text-lg text-gray-500 mb-20">We provide experienced advisors to help your company become more successful in the future.</p>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full sm:w-1/2 lg:w-1/3 px-4">
          <div class="inline-block sm:block relative pr-10 sm:pr-0">
            <img class="block mb-4 w-full max-w-xs md:max-w-none h-96 lg:h-112 object-cover" src="saturn-assets/images/team/large-photo-color2.png" alt="">
            <div class="xl:flex items-start justify-between">
              <div class="mb-6 xl:mb-0">
                <h5 class="text-2xl font-semibold text-gray-900 mb-1">Jonathan Siuuu</h5>
                <span class="text-lg text-gray-500">Founder &amp; CEO</span>
              </div>
              <div>
                <a class="inline-flex mr-2 items-center justify-center w-8 h-8 rounded-full bg-orange-50 hover:bg-orange-100 transition duration-200" href="#">
                  <img src="saturn-assets/images/team/icon-facebook-black.svg" alt="">
                </a>
                <a class="inline-flex mr-2 items-center justify-center w-8 h-8 rounded-full bg-orange-50 hover:bg-orange-100 transition duration-200" href="#">
                  <img src="saturn-assets/images/team/icon-instagram-black.svg" alt="">
                </a>
                <a class="inline-flex mr-2 items-center justify-center w-8 h-8 rounded-full bg-orange-50 hover:bg-orange-100 transition duration-200" href="#">
                  <img src="saturn-assets/images/team/icon-linkedin-black.svg" alt="">
                </a>
              </div>
            </div>
            <button class="inline-flex absolute top-0 right-0 mt-32 lg:mt-40 sm:-mr-14 w-20 h-20 shadow items-center justify-center bg-white rounded-full">
              <svg width="28" height="18" viewBox="0 0 28 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 2.33333L25.6667 9L19 15.6667M9.00002 15.6667L2.33335 8.99999L9.00002 2.33333" stroke="#7E8492" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
        </div>
        <div class="hidden sm:block w-full sm:w-1/2 lg:w-1/3 px-4">
          <div>
            <img class="block mb-4 w-full max-w-xs lg:max-w-none h-96 lg:h-112 object-cover" src="saturn-assets/images/team/large-photo-color3.png" alt="">
            <div class="xl:flex items-start justify-between">
              <div class="mb-6 xl:mb-0">
                <h5 class="text-2xl font-semibold text-gray-900 mb-1">Jovanca Azalea</h5>
                <span class="text-lg text-gray-500">Co-Founder &amp; CTO</span>
              </div>
              <div>
                <a class="inline-flex mr-2 items-center justify-center w-8 h-8 rounded-full bg-orange-50 hover:bg-orange-100 transition duration-200" href="#">
                  <img src="saturn-assets/images/team/icon-facebook-black.svg" alt="">
                </a>
                <a class="inline-flex mr-2 items-center justify-center w-8 h-8 rounded-full bg-orange-50 hover:bg-orange-100 transition duration-200" href="#">
                  <img src="saturn-assets/images/team/icon-instagram-black.svg" alt="">
                </a>
                <a class="inline-flex mr-2 items-center justify-center w-8 h-8 rounded-full bg-orange-50 hover:bg-orange-100 transition duration-200" href="#">
                  <img src="saturn-assets/images/team/icon-linkedin-black.svg" alt="">
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="hidden lg:block w-full lg:w-1/3 px-4">
          <div>
            <img class="block mb-4 w-full max-w-xs lg:max-w-none h-96 lg:h-112 object-cover" src="saturn-assets/images/team/large-photo-color1.png" alt="">
            <div class="xl:flex items-start justify-between">
              <div class="mb-6 xl:mb-0">
                <h5 class="text-2xl font-semibold text-gray-900 mb-1">Boy Rakabuming</h5>
                <span class="text-lg text-gray-500">Co-Founder &amp; CMO</span>
              </div>
              <div>
                <a class="inline-flex mr-2 items-center justify-center w-8 h-8 rounded-full bg-orange-50 hover:bg-orange-100 transition duration-200" href="#">
                  <img src="saturn-assets/images/team/icon-facebook-black.svg" alt="">
                </a>
                <a class="inline-flex mr-2 items-center justify-center w-8 h-8 rounded-full bg-orange-50 hover:bg-orange-100 transition duration-200" href="#">
                  <img src="saturn-assets/images/team/icon-instagram-black.svg" alt="">
                </a>
                <a class="inline-flex mr-2 items-center justify-center w-8 h-8 rounded-full bg-orange-50 hover:bg-orange-100 transition duration-200" href="#">
                  <img src="saturn-assets/images/team/icon-linkedin-black.svg" alt="">
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #72

Tailwind CSS

Saturn

<section class="relative pt-20 pb-20 lg:pb-32 overflow-hidden">
  <img class="absolute top-0 right-0" src="saturn-assets/images/features/star-element-right.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-md lg:max-w-7xl mx-auto">
      <div class="flex flex-wrap -mx-4 mb-18 items-center">
        <div class="w-full lg:w-2/3 xl:w-1/2 px-4 mb-12 lg:mb-0">
          <div class="max-w-lg">
            <span class="inline-block py-1 px-3 mb-4 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">FEATURES</span>
            <h1 class="font-heading text-5xl xs:text-6xl md:text-7xl font-bold text-gray-900">
              <span>Magnificent Case</span>
              <span class="font-serif italic">Studies</span>
            </h1>
          </div>
        </div>
        <div class="w-full lg:w-1/3 xl:w-1/2 px-4">
          <div class="max-w-lg lg:ml-auto">
            <p class="text-lg text-gray-500">So, how do you know which is the right tax software agency for your company? Well, you can't go wrong with choosing Saturn.</p>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
          <div>
            <img class="block mb-6 w-full h-100" src="saturn-assets/images/features/image-article1.png" alt="">
            <div>
              <h3 class="text-3xl font-semibold mb-5">The heart of what makes we valuable</h3>
              <a class="inline-flex items-center justify-center w-full lg:w-auto px-5 py-3 text-sm font-semibold text-orange-900 rounded-full border border-gray-100 hover:border-orange-900 transition duration-200" href="#">
                <span class="mr-3">Learn More</span>
                <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.9199 0.62C12.8185 0.375651 12.6243 0.181475 12.3799 0.0799999C12.2597 0.028759 12.1306 0.00157999 11.9999 0H1.99994C1.73472 0 1.48037 0.105357 1.29283 0.292893C1.1053 0.48043 0.999939 0.734784 0.999939 1C0.999939 1.26522 1.1053 1.51957 1.29283 1.70711C1.48037 1.89464 1.73472 2 1.99994 2H9.58994L1.28994 10.29C1.19621 10.383 1.12182 10.4936 1.07105 10.6154C1.02028 10.7373 0.994141 10.868 0.994141 11C0.994141 11.132 1.02028 11.2627 1.07105 11.3846C1.12182 11.5064 1.19621 11.617 1.28994 11.71C1.3829 11.8037 1.4935 11.8781 1.61536 11.9289C1.73722 11.9797 1.86793 12.0058 1.99994 12.0058C2.13195 12.0058 2.26266 11.9797 2.38452 11.9289C2.50638 11.8781 2.61698 11.8037 2.70994 11.71L10.9999 3.41V11C10.9999 11.2652 11.1053 11.5196 11.2928 11.7071C11.4804 11.8946 11.7347 12 11.9999 12C12.2652 12 12.5195 11.8946 12.707 11.7071C12.8946 11.5196 12.9999 11.2652 12.9999 11V1C12.9984 0.869323 12.9712 0.740222 12.9199 0.62Z" fill="#FF460C"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
          <div>
            <img class="block mb-6 w-full h-100" src="saturn-assets/images/features/image-article2.png" alt="">
            <div>
              <h3 class="text-3xl font-semibold mb-5">The heart of what makes we valuable</h3>
              <a class="inline-flex items-center justify-center w-full lg:w-auto px-5 py-3 text-sm font-semibold text-orange-900 rounded-full border border-gray-100 hover:border-orange-900 transition duration-200" href="#">
                <span class="mr-3">Learn More</span>
                <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.9199 0.62C12.8185 0.375651 12.6243 0.181475 12.3799 0.0799999C12.2597 0.028759 12.1306 0.00157999 11.9999 0H1.99994C1.73472 0 1.48037 0.105357 1.29283 0.292893C1.1053 0.48043 0.999939 0.734784 0.999939 1C0.999939 1.26522 1.1053 1.51957 1.29283 1.70711C1.48037 1.89464 1.73472 2 1.99994 2H9.58994L1.28994 10.29C1.19621 10.383 1.12182 10.4936 1.07105 10.6154C1.02028 10.7373 0.994141 10.868 0.994141 11C0.994141 11.132 1.02028 11.2627 1.07105 11.3846C1.12182 11.5064 1.19621 11.617 1.28994 11.71C1.3829 11.8037 1.4935 11.8781 1.61536 11.9289C1.73722 11.9797 1.86793 12.0058 1.99994 12.0058C2.13195 12.0058 2.26266 11.9797 2.38452 11.9289C2.50638 11.8781 2.61698 11.8037 2.70994 11.71L10.9999 3.41V11C10.9999 11.2652 11.1053 11.5196 11.2928 11.7071C11.4804 11.8946 11.7347 12 11.9999 12C12.2652 12 12.5195 11.8946 12.707 11.7071C12.8946 11.5196 12.9999 11.2652 12.9999 11V1C12.9984 0.869323 12.9712 0.740222 12.9199 0.62Z" fill="#FF460C"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-4">
          <div>
            <img class="block mb-6 w-full h-100" src="saturn-assets/images/features/image-article3.png" alt="">
            <div>
              <h3 class="text-3xl font-semibold mb-5">The heart of what makes we valuable</h3>
              <a class="inline-flex items-center justify-center w-full lg:w-auto px-5 py-3 text-sm font-semibold text-orange-900 rounded-full border border-gray-100 hover:border-orange-900 transition duration-200" href="#">
                <span class="mr-3">Learn More</span>
                <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.9199 0.62C12.8185 0.375651 12.6243 0.181475 12.3799 0.0799999C12.2597 0.028759 12.1306 0.00157999 11.9999 0H1.99994C1.73472 0 1.48037 0.105357 1.29283 0.292893C1.1053 0.48043 0.999939 0.734784 0.999939 1C0.999939 1.26522 1.1053 1.51957 1.29283 1.70711C1.48037 1.89464 1.73472 2 1.99994 2H9.58994L1.28994 10.29C1.19621 10.383 1.12182 10.4936 1.07105 10.6154C1.02028 10.7373 0.994141 10.868 0.994141 11C0.994141 11.132 1.02028 11.2627 1.07105 11.3846C1.12182 11.5064 1.19621 11.617 1.28994 11.71C1.3829 11.8037 1.4935 11.8781 1.61536 11.9289C1.73722 11.9797 1.86793 12.0058 1.99994 12.0058C2.13195 12.0058 2.26266 11.9797 2.38452 11.9289C2.50638 11.8781 2.61698 11.8037 2.70994 11.71L10.9999 3.41V11C10.9999 11.2652 11.1053 11.5196 11.2928 11.7071C11.4804 11.8946 11.7347 12 11.9999 12C12.2652 12 12.5195 11.8946 12.707 11.7071C12.8946 11.5196 12.9999 11.2652 12.9999 11V1C12.9984 0.869323 12.9712 0.740222 12.9199 0.62Z" fill="#FF460C"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #73

Tailwind CSS

Saturn

<section class="relative py-20 md:py-36 overflow-hidden bg-gray-100">
  <img class="hidden xs:block absolute top-0 left-0 w-full h-full md:object-top object-cover" src="saturn-assets/images/cta/men-image-bg.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-xs sm:max-w-md lg:max-w-lg xl:max-w-2xl">
      <h1 class="font-heading text-4xl sm:text-6xl lg:text-8xl xl:text-10xl font-bold text-black mb-12">
        <span>Are you looking for</span>
        <span class="font-serif italic">partnership</span>
        <span>?</span>
      </h1>
      <p class="max-w-sm lg:max-w-xl text-gray-500 mb-12">Tempus diam auctor mattis elementum sagittis at urna sodales. A egestas vulputate cursus blandit scelerisque ac sed.</p>
      <a class="relative group inline-block py-4 px-6 text-white font-semibold bg-orange-900 rounded-md overflow-hidden" href="#">
        <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>
        <div class="relative flex items-center justify-center">
          <span class="mr-4">Get Started</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="#FAFBFC"></path>
            </svg>
          </span>
        </div>
      </a>
    </div>
  </div>
</section>

Tailwind Component #74

Tailwind CSS

Saturn

<section class="relative py-20 md:py-24 lg:pt-32 lg:pb-40 overflow-hidden">
  <img class="absolute top-0 left-0 w-full h-full" src="saturn-assets/images/newsletter/bg-gradient-color-big.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="relative max-w-3xl mx-auto">
      <div class="text-center mb-15">
        <h4 class="font-heading text-4xl sm:text-5xl md:text-6xl text-gray-50 font-semibold mb-6">Sign up and get to know our updates</h4>
        <p class="text-lg font-semibold text-gray-50">Get insider access to our company by subscribing to our newsletter and stay informed about our products, services, and initiatives.</p>
      </div>
      <div class="max-w-lg mx-auto">
        <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 bg-blue-900 rounded-md 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>
            <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>
        </div>
        <span class="block text-xs font-semibold text-gray-200">
          <span>We care about your data in our</span>
          <a class="inline-block underline text-white" href="#">privacy policy</a>
        </span>
      </div>
    </div>
  </div>
</section>

Tailwind Component #75

Tailwind CSS

Saturn

<section class="relative pb-24 overflow-hidden bg-gray-50">
  <div class="pt-32 pb-52 bg-orange-50">
    <div class="container px-4 mx-auto">
      <div class="max-w-2xl lg:max-w-5xl mx-auto mb-24 text-center">
        <span class="inline-block py-1 px-3 mb-4 text-xs font-semibold bg-orange-900 text-orange-100 rounded-full uppercase">Pricing</span>
        <h1 class="font-heading text-4xl sm:text-6xl lg:text-7xl font-bold text-gray-900 mb-6">
          <span>Inspiring possibility and applying</span>
          <span class="font-serif italic">innovation</span>
        </h1>
        <p class="text-lg text-gray-500">Lacinia eros at arcu gravida molestie faucibus.</p>
      </div>
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="max-w-md lg:max-w-4xl mx-auto">
      <div class="-mt-52 mb-16 lg:mb-8 py-9 px-8 sm:px-14 bg-white rounded-3xl shadow-xl">
        <div class="flex flex-wrap -mx-4 items-center">
          <div class="w-full lg:w-2/5 mb-8 lg:mb-0 px-4 pb-12 lg:py-4 border-b lg:border-0 lg:border-r border-gray-100">
            <div class="text-center">
              <span class="block text-2xl font-semibold mb-4">Professional</span>
              <span class="block text-5xl font-bold text-gray-900 mb-5">$250</span>
              <a class="relative group inline-block py-4 px-10 text-center text-orange-50 bg-orange-900 font-semibold rounded-full overflow-hidden transition duration-200" href="#">
                <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">Get Started</span>
              </a>
            </div>
          </div>
          <div class="w-full lg:w-3/5 px-4 py-2">
            <div class="max-w-sm ml-auto">
              <p class="text-gray-500 mb-8">Simply dummy text of the printing and typesetting industry.</p>
              <ul>
                <li class="flex mb-6 items-center">
                  <img src="saturn-assets/images/pricing/green-check.svg" alt="">
                  <span class="ml-2 text-sm text-gray-900">Design Style well organized</span>
                </li>
                <li class="flex mb-6 items-center">
                  <img src="saturn-assets/images/pricing/green-check.svg" alt="">
                  <span class="ml-2 text-sm text-gray-900">Component Library with many variants</span>
                </li>
                <li class="flex items-center">
                  <img src="saturn-assets/images/pricing/green-check.svg" alt="">
                  <span class="ml-2 text-sm text-gray-900">All limited links</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="lg:flex items-center justify-center">
        <div class="flex mb-12 lg:mb-0 sm:mr-24 items-center max-w-xs">
          <div class="flex flex-shrink-0 w-12 h-12 mr-4 items-center justify-center rounded-full bg-gray-100">
            <img src="saturn-assets/images/pricing/icon-bill.svg" alt="">
          </div>
          <p class="font-semibold text-gray-900">Billed just once and no monthly subscribtion</p>
        </div>
        <div class="flex items-center max-w-xs">
          <div class="flex flex-shrink-0 w-12 h-12 mr-4 items-center justify-center rounded-full bg-gray-100">
            <img src="saturn-assets/images/pricing/icon-shield.svg" alt="">
          </div>
          <p class="font-semibold text-gray-900">Money back guarantee if there was any problem</p>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #76

Tailwind CSS

Saturn

<section class="relative py-20 md:py-32 overflow-hidden">
  <img class="absolute top-0 left-0 m-12" src="saturn-assets/images/http-codes/blue-light-left.png" alt="">
  <img class="absolute bottom-0 right-0 m-12" src="saturn-assets/images/http-codes/orange-light-right.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-5xl mx-auto">
      <img class="block mb-4 mx-auto" src="saturn-assets/images/http-codes/alien-ship.png" alt="">
      <div class="flex mb-8 items-end justify-center">
        <span class="text-9xl sm:text-11xl font-bold text-gray-900">4</span>
        <img class="block mx-4" src="saturn-assets/images/http-codes/cry-face-icon.png" alt="">
        <span class="text-9xl sm:text-11xl font-bold text-gray-900">4</span>
      </div>
      <h2 class="font-heading text-center text-4xl sm:text-5xl font-bold text-gray-900 mb-6">Oops! Can't Find That Page</h2>
      <p class="max-w-lg mx-auto text-xl font-semibold text-gray-500 mb-12 md:mb-20">Sorry, the page you are looking for doesn't exist or has been moved. Try searching our site:</p>
      <div class="text-center">
        <a class="relative group inline-block py-3 px-5 text-center text-sm font-semibold text-orange-50 bg-orange-900 rounded-full overflow-hidden" href="#">
          <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">Take me home</span>
        </a>
      </div>
    </div>
  </div>
</section>

Tailwind Component #77

Tailwind CSS

Saturn

<section class="relative pt-6 px-4 lg:px-6 pb-20 md:pb-32 overflow-hidden">
  <div class="relative max-w-7xl pt-12 sm:pt-28 mx-auto">
    <img class="absolute top-0 left-0 object-contain" src="saturn-assets/images/sign-up/background-gradient-color.png" alt="">
    <div class="relative container px-4 mx-auto">
      <div class="max-w-lg md:max-w-xl py-14 px-6 xs:px-12 lg:px-16 mx-auto bg-white rounded-4xl shadow-lg">
        <h3 class="font-heading text-4xl text-gray-900 font-semibold mb-4">Sign in to your account</h3>
        <p class="text-lg text-gray-500 mb-10">Greetings on your return! We kindly request you to enter your details.</p>
        <form action="">
          <div class="mb-6">
            <label class="block mb-1.5 text-sm text-gray-900 font-semibold" for="">Email</label>
            <input class="w-full 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">
          </div>
          <div class="mb-7">
            <div class="flex mb-1.5 items-center justify-between">
              <label class="block text-sm text-gray-900 font-semibold" for="">Password</label>
              <a class="inline-block text-xs font-semibold text-orange-900 hover:text-gray-900" href="#">Forget password?</a>
            </div>
            <div class="relative">
              <input class="w-full 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="password" placeholder="Enter your password">
              <button class="absolute top-1/2 right-0 mr-3 transform -translate-y-1/2 inline-block hover:scale-110 transition duration-100">
                <img src="saturn-assets/images/sign-up/icon-eye.svg" alt="">
              </button>
            </div>
          </div>
          <div class="flex mb-6 items-center">
            <input type="checkbox" value="" id="">
            <label class="ml-2 text-xs text-gray-800" for="">Remember for 30 days</label>
          </div>
          <button class="relative group block w-full mb-6 py-3 px-5 text-center 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">Login</span>
          </button>
          <a class="inline-flex w-full mb-20 py-3 px-4 items-center justify-center rounded-full border border-gray-200 hover:border-gray-400 transition duration-100" href="#">
            <img src="saturn-assets/images/sign-up/icon-apple.svg" alt="">
            <span class="ml-4 text-sm font-semibold text-gray-900">Login with Apple</span>
          </a>
          <div class="text-center">
            <span class="text-xs font-semibold text-gray-900">
              <span>Don’t have an account?</span>
              <a class="inline-block ml-1 text-orange-900 hover:text-orange-700" href="#">Sign up</a>
            </span>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

Tailwind Component #78

Tailwind CSS

Saturn

<section class="relative py-20 md:py-32 overflow-hidden bg-gray-50">
  <img class="absolute top-0 left-0 mt-44" src="saturn-assets/images/faq/light-blue-left.png" alt="">
  <img class="absolute top-0 right-0 mt-10" src="saturn-assets/images/faq/star-right.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-7xl 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 flex-wrap -mx-4 -mb-8">
        <div class="w-full sm:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="flex flex-col h-full max-w-xs mx-auto md:max-w-none px-6 py-9 md:pl-9 md:pr-12 bg-white rounded-3xl shadow-lg">
            <h4 class="text-xl font-semibold text-gray-900 mb-4">How to Apply</h4>
            <p class="text-gray-500 mb-4">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut.</p>
            <a class="inline-block mt-auto text-xs font-semibold text-orange-900 hover:underline" href="#">Read More</a>
          </div>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="flex flex-col h-full max-w-xs mx-auto md:max-w-none px-6 py-9 md:pl-9 md:pr-12 bg-white rounded-3xl shadow-lg">
            <h4 class="text-xl font-semibold text-gray-900 mb-4">How Much the Plans</h4>
            <p class="text-gray-500 mb-4">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut.</p>
            <a class="inline-block mt-auto text-xs font-semibold text-orange-900 hover:underline" href="#">Read More</a>
          </div>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="flex flex-col h-full max-w-xs mx-auto md:max-w-none px-6 py-9 md:pl-9 md:pr-12 bg-white rounded-3xl shadow-lg">
            <h4 class="text-xl font-semibold text-gray-900 mb-4">How to Create New Module</h4>
            <p class="text-gray-500 mb-4">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut.</p>
            <a class="inline-block mt-auto text-xs font-semibold text-orange-900 hover:underline" href="#">Read More</a>
          </div>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="flex flex-col h-full max-w-xs mx-auto md:max-w-none px-6 py-9 md:pl-9 md:pr-12 bg-white rounded-3xl shadow-lg">
            <h4 class="text-xl font-semibold text-gray-900 mb-4">How to Add Icons</h4>
            <p class="text-gray-500 mb-4">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut.</p>
            <a class="inline-block mt-auto text-xs font-semibold text-orange-900 hover:underline" href="#">Read More</a>
          </div>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="flex flex-col h-full max-w-xs mx-auto md:max-w-none px-6 py-9 md:pl-9 md:pr-12 bg-white rounded-3xl shadow-lg">
            <h4 class="text-xl font-semibold text-gray-900 mb-4">How to Share</h4>
            <p class="text-gray-500 mb-4">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut.</p>
            <a class="inline-block mt-auto text-xs font-semibold text-orange-900 hover:underline" href="#">Read More</a>
          </div>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="flex flex-col h-full max-w-xs mx-auto md:max-w-none px-6 py-9 md:pl-9 md:pr-12 bg-white rounded-3xl shadow-lg">
            <h4 class="text-xl font-semibold text-gray-900 mb-4">Setup Component</h4>
            <p class="text-gray-500 mb-4">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut.</p>
            <a class="inline-block mt-auto text-xs font-semibold text-orange-900 hover:underline" href="#">Read More</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #79

Tailwind CSS

Saturn

<section x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 5 }" 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>
  <div class="overflow-hidden">
    <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -mx-3">
        <div x-ref="slide1" class="flex-shrink-0 h-full w-full max-w-xs px-3">
            <div class="flex px-4 justify-center mb-8">
              <div class="max-w-2xs w-full flex-shrink-0">
                <a class="group block h-full" href="#">
                  <div class="relative w-full h-72 mb-3">
                    <div class="hidden group-hover:flex items-center justify-center absolute top-0 left-0 w-full h-full bg-gray-800 bg-opacity-40">
                      <img src="saturn-assets/images/instagram-photos/icon-insta-white.svg" alt="">
                    </div>
                    <img class="block w-full h-full" src="saturn-assets/images/instagram-photos/photos-insta-color3.png" alt="">
                  </div>
                  <span class="text-sm text-black">@saturn_ui</span>
                </a>
              </div>
            </div>
        </div>
        <div x-ref="slide2" class="flex-shrink-0 h-full w-full max-w-xs px-3">
          <div class="max-w-2xs flex-shrink-0">
            <a class="group block h-full" href="#">
              <div class="relative w-full h-72 mb-3">
                <div class="hidden group-hover:flex items-center justify-center absolute top-0 left-0 w-full h-full bg-gray-800 bg-opacity-40">
                  <img src="saturn-assets/images/instagram-photos/icon-insta-white.svg" alt="">
                </div>
                <img class="block w-full h-full" src="saturn-assets/images/instagram-photos/photos-insta-color4.png" alt="">
              </div>
              <span class="text-sm text-black">@saturn_ui</span>
            </a>
          </div>
        </div>
        <div x-ref="slide3" class="flex-shrink-0 h-full w-full max-w-xs px-3">
          <div class="max-w-2xs flex-shrink-0">
            <a class="group block h-full" href="#">
              <div class="relative w-full h-72 mb-3">
                <div class="hidden group-hover:flex items-center justify-center absolute top-0 left-0 w-full h-full bg-gray-800 bg-opacity-40">
                  <img src="saturn-assets/images/instagram-photos/icon-insta-white.svg" alt="">
                </div>
                <img class="block w-full h-full" src="saturn-assets/images/instagram-photos/photos-insta-color1.png" alt="">
              </div>
              <span class="text-sm text-black">@saturn_ui</span>
            </a>
          </div>
        </div>
        <div x-ref="slide4" class="flex-shrink-0 h-full w-full max-w-xs px-3">
          <div class="hidden xs:block max-w-2xs flex-shrink-0">
            <a class="group block h-full" href="#">
              <div class="relative w-full h-72 mb-3">
                <div class="hidden group-hover:flex items-center justify-center absolute top-0 left-0 w-full h-full bg-gray-800 bg-opacity-40">
                  <img src="saturn-assets/images/instagram-photos/icon-insta-white.svg" alt="">
                </div>
                <img class="block w-full h-full" src="saturn-assets/images/instagram-photos/photos-insta-color2.png" alt="">
              </div>
              <span class="text-sm text-black">@saturn_ui</span>
            </a>
          </div>
        </div>
        <div x-ref="slide5" class="flex-shrink-0 h-full w-full max-w-xs px-3">
          <a class="group block h-full" href="#">
            <div class="relative w-full h-72 mb-3">
              <div class="hidden group-hover:flex items-center justify-center absolute top-0 left-0 w-full h-full bg-gray-800 bg-opacity-40">
                <img src="saturn-assets/images/instagram-photos/icon-insta-white.svg" alt="">
              </div>
              <img class="block w-full h-full" src="saturn-assets/images/instagram-photos/photos-insta-color6.png" alt="">
            </div>
            <span class="text-sm text-black">@saturn_ui</span>
          </a>
        </div>
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-center">
      <button x-on:click="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="flex mr-4 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="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>
  </div>
</section>

Tailwind Component #80

Tailwind CSS

Saturn

<section class="relative py-20 md:py-32 overflow-hidden">
  <img class="absolute top-0 left-0 md:mt-24" src="saturn-assets/images/contact/dots-side-1.svg" alt="">
  <img class="absolute bottom-0 right-0 mb-8 lg:mb-24" src="saturn-assets/images/contact/dots-side-2.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="max-w-2xl text-center mx-auto mb-20">
        <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 US</span>
        <h1 class="font-heading text-5xl xs:text-6xl font-bold text-gray-900 mb-4">
          <span>Let’s stay</span>
          <span class="font-serif italic">connected</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="max-w-md lg:max-w-5xl mx-auto">
        <div class="flex flex-wrap -mx-4">
          <div class="w-full lg:w-1/2 px-4 order-last lg:order-first">
            <img class="h-full w-full max-w-md" src="saturn-assets/images/contact/red-image.png" alt="">
          </div>
          <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
            <div class="max-w-md py-6 lg:ml-auto">
              <div class="flex mb-12 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-blue-200">
                  <img src="saturn-assets/images/contact/icon-phone.svg" alt="">
                </div>
                <div>
                  <span class="text-lg text-gray-500">Phone</span>
                  <span class="block text-lg font-semibold text-gray-900">+1 891 4937</span>
                </div>
              </div>
              <div class="flex mb-12 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="text-lg text-gray-500">Email</span>
                  <span class="block text-lg font-semibold text-gray-900">hello@yourdomain.com</span>
                </div>
              </div>
              <div class="flex 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-green-200">
                  <img class="h-8" src="saturn-assets/images/contact/icon-location.svg" alt="">
                </div>
                <div>
                  <span class="text-lg text-gray-500">Office</span>
                  <span class="block text-lg font-semibold text-gray-900">213, New York</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind Components

Framework

UI Library

Components

Tailwind Component #61

Your next website starts here

Tailwind Component #62

Tailwind Component #63

Tailwind Component #64

Tailwind Component #65

Tailwind Component #66

Tailwind Component #67

Tailwind Component #68

Tailwind Component #69

Tailwind Component #70

Tailwind Component #71

Tailwind Component #72

Tailwind Component #73

Tailwind Component #74

Tailwind Component #75

Tailwind Component #76

Tailwind Component #77

Tailwind Component #78

Tailwind Component #79

Tailwind Component #80

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

UI Components

Extensions

Support

Company