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

Tailwind CSS

Solstice

<section class="overflow-hidden py-24 pl-8 lg:pl-20 pr-8 lg:pr-40">
  <div class="flex flex-wrap -mx-4">
    <div class="w-full lg:w-1/3 xl:w-1/6 p-4">
      <a class=" text-gray-500 group mb-24 lg:mb-72 inline-flex items-center gap-2 flex-wrap" href="#">
        <div class="group-hover:text-gray-600 transition duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M15.4167 10H5M5 10L10 5M5 10L10 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </div>
        <span class="group-hover:text-gray-600 transition duration-200 font-bold">Back to Blog</span>
      </a>
      <p class="font-semibold mb-6">TABLE OF CONTENTS</p>
      <div class="pl-6 flex flex-col gap-5"><a class="inline-block text-purple-500 text-lg font-semibold" href="#">The Essence of Design Development</a><a class="inline-block text-gray-500 hover:text-purple-500 transition duration-200 text-lg font-semibold" href="#">The Collaborative Symphony</a><a class="inline-block text-gray-500 hover:text-purple-500 transition duration-200 text-lg font-semibold" href="#">From Pixels to Interactions</a><a class="inline-block text-gray-500 hover:text-purple-500 transition duration-200 text-lg font-semibold" href="#">Conclusion</a></div>
    </div>
    <div class="w-full lg:w-2/3 xl:w-5/6 p-4">
      <div class="container">
        <div class="flex items-center gap-3 flex-wrap mb-4">
          <span class="text-gray-500">17 Jul 2023</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="4" height="5" viewBox="0 0 4 5" fill="none"><circle cx="2" cy="2.66669" r="2" fill="#D1D1D1"></circle></svg>
          <span class="text-gray-500">4 min read</span>
        </div>
        <h1 class="text-3xl lg:text-5xl font-bold mb-16 max-w-xl lg:max-w-3xl">The Art and Science of Design Development: Crafting Digital Experiences</h1>
        <img class="w-full rounded-2xl mb-16" src="solstice-assets/images/blog/post-picture.png" alt="">
        <h2 class="text-xl lg:text-4xl font-bold mb-6">The Essence of Design Development</h2>

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 Content Component Generator

Tailwind Component #542

Tailwind CSS

Solstice

<section class="py-24">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap mb-24 -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="lg:px-8">
          <h2 class="text-4xl lg:text-5xl font-bold font-heading mb-4">One plan that fits</h2>
          <p class="text-gray-600 text-lg mb-4 max-w-md">Simple one plan pricing that fits for everyone for the price of a cup of coffee.</p>
          <p class="text-gray-600 text-lg mb-10 max-w-md">We offer a transparent monthly payment that covers everything our learning platform has to offer, with no hidden costs or transaction fees.</p>
          <h2 class="text-lg font-bold font-heading mb-4">What you’ll get</h2>
          <ul class="flex flex-col gap-4">
            <li class="flex gap-4">
              <div class="w-6 h-6">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.47692 6.47692 2 12 2C17.5231 2 22 6.47692 22 12C22 17.5231 17.5231 22 12 22C6.47692 22 2 17.5231 2 12ZM15.7026 10.1395C15.7641 10.0575 15.8086 9.96402 15.8335 9.86456C15.8584 9.76511 15.8632 9.66168 15.8475 9.56036C15.8319 9.45904 15.7962 9.36187 15.7424 9.27456C15.6887 9.18725 15.618 9.11157 15.5346 9.05195C15.4512 8.99233 15.3567 8.94999 15.2567 8.92741C15.1567 8.90484 15.0532 8.90248 14.9523 8.92047C14.8514 8.93847 14.755 8.97646 14.669 9.03222C14.583 9.08797 14.5089 9.16036 14.4513 9.24513L11.1323 13.8913L9.46667 12.2256C9.32085 12.0898 9.12798 12.0158 8.9287 12.0193C8.72941 12.0228 8.53927 12.1036 8.39834 12.2445C8.2574 12.3854 8.17667 12.5756 8.17315 12.7748C8.16964 12.9741 8.24361 13.167 8.37949 13.3128L10.6872 15.6205C10.7661 15.6994 10.8613 15.7602 10.9661 15.7986C11.071 15.837 11.1829 15.8522 11.2941 15.843C11.4054 15.8338 11.5133 15.8006 11.6104 15.7455C11.7075 15.6904 11.7914 15.6149 11.8564 15.5241L15.7026 10.1395Z" fill="#FF7100"></path>
                </svg>
              </div>
              <span>Join public room</span>
            </li>
            <li class="flex gap-4">
              <div class="w-6 h-6">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.47692 6.47692 2 12 2C17.5231 2 22 6.47692 22 12C22 17.5231 17.5231 22 12 22C6.47692 22 2 17.5231 2 12ZM15.7026 10.1395C15.7641 10.0575 15.8086 9.96402 15.8335 9.86456C15.8584 9.76511 15.8632 9.66168 15.8475 9.56036C15.8319 9.45904 15.7962 9.36187 15.7424 9.27456C15.6887 9.18725 15.618 9.11157 15.5346 9.05195C15.4512 8.99233 15.3567 8.94999 15.2567 8.92741C15.1567 8.90484 15.0532 8.90248 14.9523 8.92047C14.8514 8.93847 14.755 8.97646 14.669 9.03222C14.583 9.08797 14.5089 9.16036 14.4513 9.24513L11.1323 13.8913L9.46667 12.2256C9.32085 12.0898 9.12798 12.0158 8.9287 12.0193C8.72941 12.0228 8.53927 12.1036 8.39834 12.2445C8.2574 12.3854 8.17667 12.5756 8.17315 12.7748C8.16964 12.9741 8.24361 13.167 8.37949 13.3128L10.6872 15.6205C10.7661 15.6994 10.8613 15.7602 10.9661 15.7986C11.071 15.837 11.1829 15.8522 11.2941 15.843C11.4054 15.8338 11.5133 15.8006 11.6104 15.7455C11.7075 15.6904 11.7914 15.6149 11.8564 15.5241L15.7026 10.1395Z" fill="#FF7100"></path>
                </svg>
              </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 #543

Tailwind CSS

Solstice

<section class="overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="relative transform -translate-y-18">
      <div class="hidden md:block absolute top-0 left-0">
        <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500" fill="none">
          <path d="M0.5 498.311V304.054C0.5 136.406 136.406 0.5 304.054 0.5H498.311C498.967 0.5 499.5 1.03289 499.5 1.68919V136.561C499.5 137.217 498.967 137.75 498.311 137.75H342.061C290.59 137.75 239.516 163.123 201.319 201.319C163.123 239.516 137.75 290.59 137.75 342.061V498.311C137.75 498.967 137.217 499.5 136.561 499.5H1.68919C1.03249 499.5 0.5 498.967 0.5 498.311Z" fill="url(#paint0_linear_216_33149)" stroke="#F0F0F0"></path>
          <defs><linearGradient id="paint0_linear_216_33149" x1="0" y1="500" x2="500" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#F8F8F8"><stop offset="1" stop-color="#F8F8F8" stop-opacity="0"></stop></stop></linearGradient></defs>
        </svg>
      </div>
      <div class="hidden md:block absolute top-0 right-0">
        <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500" fill="none">
          <path d="M499.5 1.68919V195.946C499.5 363.594 363.594 499.5 195.946 499.5H1.68919C1.03289 499.5 0.5 498.967 0.5 498.311V363.439C0.5 362.783 1.03289 362.25 1.68919 362.25H157.939C209.41 362.25 260.484 336.877 298.681 298.681C336.877 260.484 362.25 209.41 362.25 157.939V1.68919C362.25 1.03289 362.783 0.5 363.439 0.5H498.311C498.967 0.5 499.5 1.03289 499.5 1.68919Z" fill="url(#paint0_linear_216_33148)" stroke="#F0F0F0"></path>
          <defs><linearGradient id="paint0_linear_216_33148" x1="499.998" y1="2.85805e-05" x2="8.49831" y2="500" gradientUnits="userSpaceOnUse"><stop stop-color="#F8F8F8"><stop offset="1" stop-color="#F8F8F8" stop-opacity="0"></stop></stop></linearGradient></defs>
        </svg>
      </div>
    </div>
    <div class="py-20 max-w-3xl mx-auto relative z-10">
      <h1 class="mb-4 text-center text-3xl lg:text-5xl font-bold font-heading">Contact us</h1>
      <p class="text-center text-gray-600 mb-12">Submit your info and we’ll get back to you as soon as possible.</p>
      <form action="">
        <div class="p-8 rounded-3xl border border-gray-100 bg-white max-w-xl mx-auto">
          <div class="flex flex-wrap -mx-4">
            <div class="w-full lg:w-1/2 p-4">
              <label class="text-sm font-medium mb-2 block" for="textInput1">First name</label>

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

Tailwind CSS

Solstice

<section class="overflow-hidden">
  <div class="container mx-auto px-4 relative">
    <div class="hidden md:block absolute top-0 left-0">
      <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500" fill="none">
        <path d="M0.5 498.311V304.054C0.5 136.406 136.406 0.5 304.054 0.5H498.311C498.967 0.5 499.5 1.03289 499.5 1.68919V136.561C499.5 137.217 498.967 137.75 498.311 137.75H342.061C290.59 137.75 239.516 163.123 201.319 201.319C163.123 239.516 137.75 290.59 137.75 342.061V498.311C137.75 498.967 137.217 499.5 136.561 499.5H1.68919C1.03249 499.5 0.5 498.967 0.5 498.311Z" fill="url(#paint0_linear_170_13470)" stroke="#F0F0F0"></path>
        <defs><linearGradient id="paint0_linear_170_13470" x1="0" y1="500" x2="500" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#F8F8F8"><stop offset="1" stop-color="#F8F8F8" stop-opacity="0"></stop></stop></linearGradient></defs>
      </svg>
    </div>
    <div class="hidden md:block absolute top-0 right-0">
      <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500" fill="none">
        <path d="M499.5 1.68919V195.946C499.5 363.594 363.594 499.5 195.946 499.5H1.68919C1.03289 499.5 0.5 498.967 0.5 498.311V363.439C0.5 362.783 1.03289 362.25 1.68919 362.25H157.939C209.41 362.25 260.484 336.877 298.681 298.681C336.877 260.484 362.25 209.41 362.25 157.939V1.68919C362.25 1.03289 362.783 0.5 363.439 0.5H498.311C498.967 0.5 499.5 1.03289 499.5 1.68919Z" fill="url(#paint0_linear_170_13469)" stroke="#F0F0F0"></path>
        <defs><linearGradient id="paint0_linear_170_13469" x1="499.998" y1="2.85805e-05" x2="8.49831" y2="500" gradientUnits="userSpaceOnUse"><stop stop-color="#F8F8F8"><stop offset="1" stop-color="#F8F8F8" stop-opacity="0"></stop></stop></linearGradient></defs>
      </svg>
    </div>
    <div class="py-32 relative z-10">
      <h1 class="text-center text-4xl lg:text-5xl font-bold font-heading mb-4 max-w-md lg:max-w-xl mx-auto">
        <span>Join a</span>
        <span></span>
        <span class="text-orange-500">vibrant</span>
        <span></span>
        <span>community of learners.</span>
      </h1>
      <p class="text-gray-500 text-center mb-10">Fuel your curiosity by joining a vibrant community of learners.</p>
      <div class="flex justify-center flex-wrap gap-4">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Call to action Component Generator

Tailwind Component #545

Tailwind CSS

Solstice

<section class="py-16">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center justify-between -mx-4">
      <div class="w-full lg:w-1/3 p-4">
        <p class="text-gray-500 text-lg font-semibold">As seen in</p>
      </div>
      <div class="w-full lg:w-2/3 p-4">
        <div class="flex flex-wrap items-center -mx-4">
          <div class="w-full md:w-1/2 xl:w-1/4 p-4">
            <img src="solstice-assets/images/logos/placeholder-logo1.png" alt="">
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 p-4">
            <img src="solstice-assets/images/logos/placeholder-logo2.png" alt="">
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 p-4">
            <img src="solstice-assets/images/logos/placeholder-logo3.png" alt="">
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 p-4">
            <img src="solstice-assets/images/logos/placeholder-logo4.png" alt="">
          </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 Logo clouds Component Generator

Tailwind Component #546

Tailwind CSS

Solstice

<section class="overflow-hidden px-10 pb-10 bg-orange-50">
  <div class="container mx-auto px-4 relative">
    <div class="flex justify-center gap-6 mb-6">
      <div class="hidden xl:block w-80 h-80 rounded-3xl" style="background: linear-gradient(180deg, rgba(255, 234, 194, 0.00) 0%, #FFEAC2 100%);"></div>
      <div class="hidden xl:block w-80 h-80 rounded-3xl" style="background: linear-gradient(180deg, rgba(255, 234, 194, 0.00) 0%, #FFEAC2 100%);"></div>
      <div class="hidden sm:block w-80 h-80 rounded-3xl" style="background: linear-gradient(180deg, rgba(255, 234, 194, 0.00) 0%, #FFEAC2 100%);"></div>
      <div class="w-80 h-80 rounded-3xl" style="background: linear-gradient(180deg, rgba(255, 234, 194, 0.00) 0%, #FFEAC2 100%);"></div>
    </div>
    <div class="flex justify-center gap-6">
      <div class="w-80 h-80 rounded-3xl bg-orange-100 bg-opacity-50"></div>
      <div class="hidden xl:block w-80 h-80 rounded-3xl border border-orange-100"></div>
      <div class="hidden xl:block w-80 h-80 rounded-3xl border border-orange-100"></div>
      <div class="hidden sm:block w-80 h-80 rounded-3xl bg-orange-100 bg-opacity-50"></div>
    </div>
    <div class="absolute bottom-14 left-1/2 transform -translate-x-1/2 w-full">
      <h1 class="text-center text-4xl lg:text-5xl font-bold font-heading mb-6">Oops. Page not found.</h1>
      <p class="text-center text-gray-500 text-lg mb-10 max-w-lg mx-auto">The page you are looking for was moved, removed, renamed or might have never existed!</p>
      <div class="flex justify-center"><a class="w-full sm:w-auto text-center h-14 inline-flex items-center justify-center py-4 px-6 rounded-full bg-orange-500 border border-orange-600 shadow text-sm font-semibold text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">Back to Home</a></div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI HTTP codes Component Generator

Tailwind Component #547

Tailwind CSS

Solstice

<section class="py-16">
  <div class="container px-4 mx-auto">
    <div class="flex items-center flex-wrap mb-32 mt-14 -mx-8">
      <div class="w-full lg:w-1/2 p-8">
        <img class="rounded-3xl w-full" src="solstice-assets/images/about/picture4.png" alt="">
      </div>
      <div class="w-full lg:w-1/2 p-8">
        <div class="py-1 px-3 rounded-lg border border-orange-100 bg-orange-50 inline-flex items-center gap-2 mb-6 mt-12">
          <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none"><circle cx="4" cy="4" r="3" fill="#FF7100"></circle></svg>
          <span class="text-orange-500 text-sm font-medium">About Us</span>
        </div>
        <h1 class="text-5xl lg:text-6xl font-bold font-heading mb-6 max-w-md lg:max-w-2xl">On a mission to make learning fun</h1>
        <p class="text-gray-600 text-lg mb-12">We are driven to transform the landscape of learning into a captivating journey of excitement and discovery. Our aim is to infuse every educational experience with the essence of joy, making learning an immersive adventure that fuels curiosity and fosters growth.</p>
      </div>
    </div>
    <h2 class="text-4xl font-bold font-heading text-center mb-9">Our investors</h2>
    <div class="border border-gray-200 rounded-3xl py-8 flex flex-wrap mb-32">
      <div class="w-full md:w-1/2 lg:w-1/4 py-8 px-16 flex justify-center items-center">
        <img src="solstice-assets/images/logos/placeholder-logo1.png" alt="">
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 py-8 px-16 flex justify-center items-center">
        <img src="solstice-assets/images/logos/placeholder-logo2.png" alt="">
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 py-8 px-16 flex justify-center 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 About Component Generator

Tailwind Component #548

Tailwind CSS

Solstice

<div class="fixed bottom-0 left-0 z-30 w-full p-6" :class="{ 'hidden': !open }" x-data="{ open: true }">
  <div class="container mx-auto px-4">
    <div class="relative z-10">
      <div class="bg-white rounded-5xl border-2 border-orange-500 shadow-sm py-6 px-10 flex items-center justify-between flex-wrap gap-4">
        <p class="max-w-xl">We use technologies such as cookies, to process information about you and your devices to operate, analyze, and improve this site.</p>
        <a x-on:click.prevent="open = false" class="w-full sm:w-auto text-center h-14 inline-flex items-center justify-center py-4 px-6 rounded-full border border-gray-200 shadow font-bold font-heading hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Good to know</a>
      </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 #549

Tailwind CSS

Solstice

<section class="overflow-hidden" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between py-6">
      <a href="#">
        <img src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
      </a>
      <ul class="hidden lg:flex items-center gap-8">
        <li>
          <a class="flex items-center flex-wrap gap-2 group" href="#">
            <span class="group-hover:text-opacity-70 transition duration-200">Platform</span>
            <div class="group-hover:text-opacity-70 transition duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
        </li>
        <li class="hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
        <li class="hover:text-opacity-70 transition duration-200"><a href="#">Community</a></li>
        <li>
          <a class="flex items-center flex-wrap gap-2 group" href="#">
            <span class="group-hover:text-opacity-70 transition duration-200">Resources</span>
            <div class="group-hover:text-opacity-70 transition duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">

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

Tailwind CSS

Solstice

<section class="py-24">
  <div class="container mx-auto px-4">
    <h1 class="text-center text-3xl lg:text-5xl font-bold font-heading mb-4">How it works</h1>
    <p class="text-center text-gray-600 mb-20">What steps do I need to take to join?</p>
    <div class="bg-orange-50 overflow-hidden rounded-3xl pt-12 pl-6">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 p-4">
          <div class="pb-6 pr-6 lg:pr-20">
            <a href="#">
              <div class="p-6 border-b border-orange-100 hover:border-orange-500 transition duration-200">
                <div class="flex gap-3 flex-wrap">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17Z" fill="#FF7100"></path>
                    <path d="M12 7V17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7Z" fill="#FF7100"></path>
                  </svg>
                  <div class="flex-1">
                    <h2 class="font-bold font-heading mb-3">Join or Create Room</h2>
                    <p class="text-gray-600 text-sm">Join ongoing rooms for focus and connection or create your study space.</p>
                  </div>
                </div>
              </div>
            </a>
            <a href="#">
              <div class="p-6 border-b border-orange-500">

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 How it works Component Generator

Tailwind Component #551

Tailwind CSS

Solstice

<section class="py-24 xl:py-36 overflow-hidden" x-data="{ slide: 0 }">
  <div class="container mx-auto px-4">
    <div class="border border-orange-100 rounded-3xl p-8 lg:p-16 relative">
      <div class="lg:max-w-md xl:max-w-2xl">
        <h1 :class="{ 'hidden': slide != 0 }" class="text-3xl lg:text-4xl font-semibold mb-16 max-w-lg">“I just wanted to say that Solstice alone is a real lifesaver, but the platform is really next level!”</h1>
        <h1 :class="{ 'hidden': slide != 1 }" class="hidden text-3xl lg:text-4xl font-semibold mb-16 max-w-lg">“Solstice on its own is an absolute game-changer, but the platform takes things to a whole new level!”</h1>
        <h1 :class="{ 'hidden': slide != 2 }" class="hidden text-3xl lg:text-4xl font-semibold mb-16 max-w-lg">“Solstice by itself is incredibly helpful, but the platform truly elevates the experience to the next level!”</h1>
        <div class="flex items-center justify-between flex-wrap gap-4">
          <div :class="{ 'hidden': slide != 0 }">
            <h2 class="text-lg font-semibold mb-1">Hanna Stanton</h2>
            <p class="text-gray-500">Student</p>
          </div>
          <div :class="{ 'hidden': slide != 1 }" class="hidden">
            <h2 class="text-lg font-semibold mb-1">Olivia Martinez</h2>
            <p class="text-gray-500">Student</p>
          </div>
          <div :class="{ 'hidden': slide != 2 }" class="hidden">
            <h2 class="text-lg font-semibold mb-1">Ethan Thompson</h2>
            <p class="text-gray-500">Student</p>
          </div>
          <div class="flex items-center gap-3">
            <a x-on:click.prevent="slide = 0" class="text-gray-100 hover:text-orange-500 transition duration-200" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"><circle cx="5" cy="5" r="5" fill="currentColor"></circle></svg>
            </a>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Testimonials Component Generator

Tailwind Component #552

Tailwind CSS

Solstice

<section class="overflow-hidden">
  <div class="container mx-auto px-4 relative">
    <div class="hidden md:block absolute top-0 left-0">
      <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500" fill="none">
        <path d="M0.5 498.311V304.054C0.5 136.406 136.406 0.5 304.054 0.5H498.311C498.967 0.5 499.5 1.03289 499.5 1.68919V136.561C499.5 137.217 498.967 137.75 498.311 137.75H342.061C290.59 137.75 239.516 163.123 201.319 201.319C163.123 239.516 137.75 290.59 137.75 342.061V498.311C137.75 498.967 137.217 499.5 136.561 499.5H1.68919C1.03249 499.5 0.5 498.967 0.5 498.311Z" fill="url(#paint0_linear_191_13323)" stroke="#F0F0F0"></path>
        <defs><linearGradient id="paint0_linear_191_13323" x1="0" y1="500" x2="500" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#F8F8F8"><stop offset="1" stop-color="#F8F8F8" stop-opacity="0"></stop></stop></linearGradient></defs>
      </svg>
    </div>
    <div class="hidden md:block absolute top-0 right-0">
      <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500" fill="none">
        <path d="M499.5 1.68919V195.946C499.5 363.594 363.594 499.5 195.946 499.5H1.68919C1.03289 499.5 0.5 498.967 0.5 498.311V363.439C0.5 362.783 1.03289 362.25 1.68919 362.25H157.939C209.41 362.25 260.484 336.877 298.681 298.681C336.877 260.484 362.25 209.41 362.25 157.939V1.68919C362.25 1.03289 362.783 0.5 363.439 0.5H498.311C498.967 0.5 499.5 1.03289 499.5 1.68919Z" fill="url(#paint0_linear_191_13322)" stroke="#F0F0F0"></path>
        <defs><linearGradient id="paint0_linear_191_13322" x1="499.998" y1="2.85805e-05" x2="8.49831" y2="500" gradientUnits="userSpaceOnUse"><stop stop-color="#F8F8F8"><stop offset="1" stop-color="#F8F8F8" stop-opacity="0"></stop></stop></linearGradient></defs>
      </svg>
    </div>
    <div class="relative z-10 py-24">
      <h1 class="text-center text-4xl lg:text-5xl font-bold font-heading mb-4 max-w-sm lg:max-w-lg mx-auto">Join 14K people embrace fun learning</h1>
      <p class="text-center text-gray-500 mb-10">Fuel your curiosity by joining a vibrant community of learners.</p>
      <form action="">
        <div class="flex flex-wrap gap-4 max-w-lg mx-auto mb-6">
          <input class="flex-1 rounded-full p-4 outline-none border border-orange-100 shadow placeholder-gray-500 focus:ring focus:ring-orange-200 transition duration-200" type="text" placeholder="Email address">
          <button class="w-full sm:w-auto h-14 py-4 px-6 rounded-full bg-orange-500 border border-orange-600 shadow hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200 flex items-center justify-center gap-2" type="submit">
            <span class="text-white font-bold font-heading">Subscribe</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
              <path d="M4.99996 10H15.4166M15.4166 10L10.4166 5M15.4166 10L10.4166 15" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Newsletter Component Generator

Tailwind Component #553

Tailwind CSS

Solstice

<section class="py-24">
  <div class="container mx-auto px-4">
    <div class="flex items-end justify-between flex-wrap gap-4 mb-16">
      <div>
        <p class="uppercase text-orange-500 text-sm font-bold font-heading mb-6">FEATURES</p>
        <h1 class="text-4xl lg:text-5xl font-bold font-heading mb-6">Study room. Personal or group.</h1>
        <p class="text-gray-600 text-lg max-w-2xl">Optimize your study environment with a personalized room, tailored to enhance your focus and accommodate group study sessions.</p>
      </div>
      <a class="h-14 inline-flex items-center justify-center w-full sm:w-auto text-center whitespace-nowrap py-4 px-6 rounded-full border border-gray-200 shadow font-bold font-heading bg-white hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Learn More</a>
    </div>
    <img class="w-full" src="solstice-assets/images/features/platform-secondary.png" alt="">
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Features Component Generator

Tailwind Component #554

Tailwind CSS

Solstice

<section class="py-24">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="bg-orange-50 rounded-2xl py-6 px-4 h-full flex flex-col justify-center">
          <h2 class="text-orange-500 text-5xl lg:text-6xl font-bold font-heading text-center mb-4">101K+</h2>
          <p class="font-medium text-center">Time reduced for searching files</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div class="bg-orange-50 rounded-2xl py-6 px-4 mb-6">
          <h2 class="text-orange-500 text-5xl lg:text-6xl font-bold font-heading text-center mb-4">2M+</h2>
          <p class="font-medium text-center">Happy users and keep growing</p>
        </div>
        <div class="bg-orange-50 rounded-2xl py-6 px-4">
          <h2 class="text-orange-500 text-5xl lg:text-6xl font-bold font-heading text-center mb-4">94K</h2>
          <p class="font-medium text-center">Supported file extensions</p>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Stats Component Generator

Tailwind Component #555

Tailwind CSS

Solstice

<section class="py-16">
  <div class="container px-4 mx-auto">
    <h1 class="text-5xl lg:text-7xl font-semibold mb-6 mt-14 max-w-lg lg:max-w-3xl">On a mission to make learning fun</h1>
    <p class="text-gray-600 text-lg mb-48 lg:mb-32 max-w-xl">Our aim is to infuse every educational experience with the essence of joy, making learning an immersive adventure that fuels curiosity and fosters growth.</p>
    <div class="relative mb-32" style="height:800px;">
      <div class="absolute z-10 transform translate-x-1/2 md:translate-x-0 right-1/2 md:right-24 -top-32 bg-white rounded-3xl border-2 border-orange-500 shadow-md p-8 w-3/4 md:max-w-md">
        <p class="text-base lg:text-lg font-semibold mb-12">“They shipping a platform that took learning to the next level. I can invite my friend to study in specific topic together in just two-click.”</p>
        <div class="flex items-center flex-wrap gap-4">
          <div class="relative bg-orange-300 rounded-full w-12 h-12 overflow-hidden">
            <img class="absolute bottom-0 right-0" src="solstice-assets/images/about/avatar-picture.png" alt="">
          </div>
          <div>
            <p class="font-semibold mb-1">Rob Schapiro</p>
            <p class="text-gray-500 text-sm">Student</p>
          </div>
        </div>
      </div>
      <div class="w-full h-full absolute top-0 right-0 rounded-5xl bg-orange-50"></div>
      <div class="w-full h-full absolute md:top-5 md:right-5 rounded-5xl bg-purple-900"></div>
      <img class="w-full h-full absolute md:top-12 md:right-12 rounded-5xl object-cover" src="solstice-assets/images/about/picture6.png" alt="">
    </div>
    <div class="flex flex-wrap mb-16 -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <h2 class="text-5xl font-semibold max-w-sm lg:max-w-lg">A company with values</h2>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI About Component Generator

Tailwind Component #556

Tailwind CSS

Solstice

<section class="py-24">
  <div class="container mx-auto px-4">
    <div class="flex justify-center mb-4">
      <div class="inline-block px-3 py-1 rounded-lg border border-orange-100 bg-orange-50 text-orange-500 text-sm font-medium">PRICING</div>
    </div>
    <h1 class="text-center text-4xl lg:text-5xl font-bold font-heading mb-6 max-w-xl mx-auto">One plan for the price of a cup of coffee</h1>
    <p class="text-gray-600 text-center text-lg mb-24 max-w-4xl mx-auto">We offer a transparent monthly payment that covers everything our learning platform has to offer, with no hidden costs or transaction fees.</p>
    <div class="bg-orange-500 rounded-4xl px-5 lg:px-10 pt-6 lg:pt-12 max-w-4xl mx-auto mb-6">
      <div class="bg-purple-900 rounded-t-3xl pt-10">
        <div class="py-12 px-10 border-b border-orange-500">
          <div class="flex items-center justify-between flex-wrap gap-4 mb-6">
            <h2 class="text-white text-4xl lg:text-6xl font-bold font-heading">$4/month</h2>
            <a class="w-full sm:w-auto text-center h-14 py-4 px-6 rounded-full bg-white border border-gray-200 shadow hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200 flex items-center justify-center gap-2" href="#">
              <span class="text-sm font-semibold ">Sign up today</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
                <path d="M5.50002 10H15.9167M15.9167 10L10.9167 5M15.9167 10L10.9167 15" stroke="#282828" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
          <p class="text-white text-lg">Join over 350 hundreds users who have signed up for Solstice.</p>
        </div>
        <div class="px-10 pt-12 pb-32">
          <h2 class="text-white text-lg font-bold font-heading mb-4">What you’ll get</h2>
          <ul class="flex flex-col gap-4">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Pricing Component Generator

Tailwind Component #557

Tailwind CSS

Solstice

<section class="overflow-hidden py-24 pl-8 lg:pl-20 pr-8 lg:pr-40">
  <div class="flex flex-wrap -mx-4">
    <div class="w-full lg:w-1/3 xl:w-1/6 p-4">
      <p class="font-semibold mb-6 lg:mt-20">TABLE OF CONTENTS</p>
      <div class="pl-6 flex flex-col gap-5"><a class="inline-block text-purple-500 text-lg font-semibold" href="#">The Essence of Design Development</a><a class="inline-block text-gray-500 hover:text-purple-500 transition duration-200 text-lg font-semibold" href="#">The Collaborative Symphony</a><a class="inline-block text-gray-500 hover:text-purple-500 transition duration-200 text-lg font-semibold" href="#">From Pixels to Interactions</a><a class="inline-block text-gray-500 hover:text-purple-500 transition duration-200 text-lg font-semibold" href="#">Conclusion</a></div>
    </div>
    <div class="w-full lg:w-2/3 xl:w-5/6 p-4">
      <div class="container">
        <a class=" text-gray-500 group mb-12 inline-flex items-center gap-2 flex-wrap" href="#">
          <div class="group-hover:text-gray-600 transition duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
              <path d="M15.4167 10H5M5 10L10 5M5 10L10 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <span class="group-hover:text-gray-600 transition duration-200 font-bold">Back to Blog</span>
        </a>
        <img class="w-full rounded-2xl mb-16" src="solstice-assets/images/blog/post-picture.png" alt="">
        <div class="flex items-center gap-3 flex-wrap mb-4">
          <div class="flex items-center gap-3 flex-wrap">
            <div class="rounded-md border border-gray-100 py-0.5 px-2">
              <span class="text-gray-700 text-xs font-medium">Product</span>
            </div>
            <div class="rounded-md border border-gray-100 py-0.5 px-2">
              <span class="text-gray-700 text-xs font-medium">Development</span>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Content Component Generator

Tailwind Component #558

Tailwind CSS

Solstice

<section class="py-24">
  <div class="container mx-auto px-4">
    <h1 class="text-center text-4xl lg:text-5xl font-bold font-heading mb-4">Discover features</h1>
    <p class="text-center text-gray-600 mb-28">Innovative features tailored to enhance your learning experience.</p>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="rounded-full w-12 h-12 flex items-center justify-center bg-orange-500 mb-4 ml-4">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M8.25 2V22H7.81C4.17 22 2 19.83 2 16.19V7.81C2 4.17 4.17 2 7.81 2H8.25Z" fill="white"></path>
            <path d="M21.5 7.81V10.75H10.25V2.5H16.19C17.9106 2.5 19.2238 3.01093 20.1064 3.89355C20.9891 4.77618 21.5 6.08944 21.5 7.81Z" fill="white" stroke="white"></path>
            <path d="M22 12.75V16.19C22 19.83 19.83 22 16.19 22H9.75V12.75H22Z" fill="white"></path>
          </svg>
        </div>
        <div class="relative pl-4">
          <div class="absolute top-0 left-0 bg-orange-500 w-0.5 h-6"></div>
          <h2 class="text-lg font-bold font-heading mb-4">Study room. Personal or group.</h2>
          <p class="text-gray-600">Optimize study environment with a personalized room, enhance focus and accommodate group study sessions.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="rounded-full w-12 h-12 flex items-center justify-center bg-orange-500 mb-4 ml-4">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M12.6778 19.957C12.9525 20.0209 12.9777 20.3808 12.7101 20.47L11.1301 20.99C7.1601 22.27 5.0701 21.2 3.7801 17.23L2.5001 13.28C1.2201 9.30998 2.2801 7.20998 6.2501 5.92998L6.77409 5.75645C7.17696 5.62304 7.56902 6.0271 7.45463 6.43577C7.39793 6.63834 7.34338 6.84975 7.2901 7.06998L6.3101 11.26C5.2101 15.97 6.8201 18.57 11.5301 19.69L12.6778 19.957Z" fill="white"></path>
            <path d="M15.3848 3.30658L15.3862 3.30691L17.0561 3.69687C17.0561 3.69688 17.0562 3.69689 17.0562 3.69691C19.103 4.17564 20.3117 4.89396 20.9288 5.88861C21.5459 6.88329 21.6519 8.28397 21.1731 10.3259L20.1931 14.5059L20.1929 14.5067C19.7831 16.2682 19.1919 17.4136 18.3998 18.0914C17.6247 18.7547 16.5808 19.0339 15.1078 18.8923L15.1078 18.8922L15.0998 18.8916C14.6302 18.854 14.1164 18.7689 13.5573 18.634L13.5557 18.6336L11.8757 18.2336L11.8754 18.2335C9.83814 17.7499 8.63095 17.0317 8.01343 16.0375C7.39626 15.0438 7.28815 13.6454 7.76674 11.6041L7.7668 11.6039L8.74664 7.41453C8.74667 7.4144 8.7467 7.41427 8.74673 7.41415C8.94185 6.585 9.17125 5.88463 9.44861 5.32067L9.44862 5.32067L9.45009 5.31764C9.99063 4.1996 10.6904 3.54259 11.5993 3.2289C12.5315 2.90719 13.7555 2.92119 15.3848 3.30658ZM15.7733 13.458L15.7733 13.458L15.775 13.4513C15.9411 12.7868 15.5425 12.1026 14.8611 11.9349L11.9532 11.1954L11.9512 11.1949C11.2895 11.0295 10.6034 11.4247 10.4349 12.0987C10.2695 12.7602 10.6643 13.4459 11.3377 13.6148C11.338 13.6149 11.3383 13.615 11.3387 13.6151L14.2467 14.3546L14.2727 14.3612L14.2992 14.365C14.3053 14.3659 14.3123 14.3669 14.3199 14.368C14.3752 14.3762 14.4677 14.39 14.5599 14.39C15.1202 14.39 15.6235 14.0236 15.7733 13.458ZM18.7033 10.078L18.7034 10.078L18.7057 10.0685C18.8673 9.40584 18.4816 8.71142 17.786 8.55361L12.9428 7.32535L12.9412 7.32494C12.2795 7.1595 11.5934 7.55473 11.4249 8.22874C11.2595 8.89019 11.6543 9.57598 12.3278 9.74486C12.3281 9.74493 12.3284 9.74501 12.3287 9.74508L17.177 10.9747L17.2028 10.9812L17.2292 10.985C17.2353 10.9859 17.2423 10.9869 17.2499 10.988C17.3052 10.9963 17.3977 11.01 17.4899 11.01C18.0501 11.01 18.5535 10.6436 18.7033 10.078Z" fill="white" stroke="white"></path>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Features Component Generator

Tailwind Component #559

Tailwind CSS

Solstice

<section class="py-24 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex items-end justify-between flex-wrap gap-4 mb-24">
      <div>
        <h1 class="text-4xl lg:text-5xl font-bold font-heading mb-4">Join our events</h1>
        <p class="text-gray-600 text-lg max-w-lg">Engage in our weekly online events featuring mindfulness sessions, journaling, and fireside chats.</p>
      </div>
      <a class="w-full sm:w-auto text-center h-14 inline-flex items-center justify-center py-4 px-6 rounded-full bg-orange-500 border border-orange-600 shadow font-bold font-heading text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">Sign up now</a>
    </div>
    <div class="relative mb-24" style="height:480px;">
      <div class="absolute top-0 left-0 bg-orange-500 rounded-2xl w-full h-full"></div>
      <div class="absolute top-0 left-0 w-full z-10 px-4 pt-4">
        <div class="bg-white rounded-3xl pt-6 px-6">
          <div class="flex items-center justify-between flex-wrap gap-4 mb-4">
            <div class="flex items-center gap-2 flex-wrap">
              <p class="font-bold font-heading">August</p>
              <p class="text-gray-500 font-medium">2023</p>
              <a class="text-gray-400 hover:text-gray-600 transition duration-200" href="#">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
            <div class="flex flex-wrap gap-2">

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 Events Component Generator

Tailwind Component #560

Tailwind CSS

Solstice

<section class="overflow-hidden py-12 bg-white">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-2/3 p-4">
        <div class="bg-purple-900 rounded-3xl pt-8 pl-8 h-full">
          <div class="flex flex-col justify-between h-full">
            <h2 class="text-white text-2xl font-semibold mb-8">Study room. Personal or group.</h2>
            <div class="bg-white rounded-tl-2xl pt-4 pl-4">
              <div class="mb-4 relative">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
                  <rect width="32" height="32" rx="8" fill="#FF7100"></rect>
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M28 14L28 9C28 8.44772 27.5523 8 27 8L24 8C23.4477 8 23 8.44772 23 9L23 13C23 16.3137 20.3137 19 17 19L13 19C12.4477 19 12 19.4477 12 20L12 23C12 23.5523 12.4477 24 13 24L18 24C23.5228 24 28 19.5228 28 14Z" fill="white"></path>
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M4 18L4 23C4 23.5523 4.44772 24 5 24L8 24C8.55228 24 9 23.5523 9 23L9 19C9 15.6863 11.6863 13 15 13L19 13C19.5523 13 20 12.5523 20 12L20 9C20 8.44771 19.5523 8 19 8L14 8C8.47715 8 4 12.4772 4 18Z" fill="white"></path>
                </svg>
                <div class="absolute top-1 left-1/2 transform -translate-x-1/2">
                  <div class="flex items-center gap-2">
                    <p class="font-medium whitespace-nowrap">Study Session</p>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                      <path d="M8 11.5666C8.60015 11.5666 9.08666 11.0801 9.08666 10.48C9.08666 9.87983 8.60015 9.39331 8 9.39331C7.39985 9.39331 6.91333 9.87983 6.91333 10.48C6.91333 11.0801 7.39985 11.5666 8 11.5666Z" fill="#B8B8B8"></path>
                      <path d="M11.2533 6.79998H11.7289L12.1246 6.84945C12.985 6.95699 13.4425 7.21317 13.716 7.60689C14.0111 8.03173 14.1666 8.71786 14.1666 9.85998V11.1C14.1666 12.4491 13.9528 13.1567 13.5548 13.5548C13.1567 13.9528 12.4491 14.1666 11.1 14.1666H4.89998C3.55091 14.1666 2.84324 13.9528 2.4452 13.5548C2.04716 13.1567 1.83331 12.4491 1.83331 11.1V9.85998C1.83331 8.71786 1.98886 8.03173 2.28397 7.60689C2.55745 7.21317 3.01501 6.95699 3.87533 6.84945L4.31331 6.7947V6.79331H4.39998V6.79998H4.89998H11.1H11.1003H11.1006H11.1009H11.1012H11.1015H11.1019H11.1022H11.1025H11.1028H11.1031H11.1034H11.1037H11.104H11.1043H11.1047H11.105H11.1053H11.1056H11.1059H11.1062H11.1065H11.1068H11.1071H11.1074H11.1077H11.1081H11.1084H11.1087H11.109H11.1093H11.1096H11.1099H11.1102H11.1105H11.1108H11.1111H11.1114H11.1117H11.1121H11.1124H11.1127H11.113H11.1133H11.1136H11.1139H11.1142H11.1145H11.1148H11.1151H11.1154H11.1157H11.116H11.1163H11.1166H11.117H11.1173H11.1176H11.1179H11.1182H11.1185H11.1188H11.1191H11.1194H11.1197H11.12H11.1203H11.1206H11.1209H11.1212H11.1215H11.1218H11.1221H11.1224H11.1227H11.123H11.1233H11.1236H11.1239H11.1242H11.1245H11.1248H11.1251H11.1254H11.1257H11.1261H11.1264H11.1267H11.127H11.1273H11.1276H11.1279H11.1282H11.1285H11.1288H11.1291H11.1294H11.1297H11.13H11.1303H11.1306H11.1309H11.1312H11.1315H11.1318H11.1321H11.1324H11.1327H11.133H11.1333H11.1336H11.1339H11.1342H11.1345H11.1348H11.1351H11.1354H11.1357H11.136H11.1363H11.1366H11.1369H11.1371H11.1374H11.1377H11.138H11.1383H11.1386H11.1389H11.1392H11.1395H11.1398H11.1401H11.1404H11.1407H11.141H11.1413H11.1416H11.1419H11.1422H11.1425H11.1428H11.1431H11.1434H11.1437H11.144H11.1443H11.1446H11.1449H11.1452H11.1455H11.1458H11.1461H11.1464H11.1467H11.147H11.1473H11.1475H11.1478H11.1481H11.1484H11.1487H11.149H11.1493H11.1496H11.1499H11.1502H11.1505H11.1508H11.1511H11.1514H11.1517H11.152H11.1523H11.1526H11.1529H11.1532H11.1535H11.1537H11.154H11.1543H11.1546H11.1549H11.1552H11.1555H11.1558H11.1561H11.1564H11.1567H11.157H11.1573H11.1576H11.1579H11.1582H11.1585H11.1588H11.159H11.1593H11.1596H11.1599H11.1602H11.1605H11.1608H11.1611H11.1614H11.1617H11.162H11.1623H11.1626H11.1629H11.1632H11.1635H11.1637H11.164H11.1643H11.1646H11.1649H11.1652H11.1655H11.1658H11.1661H11.1664H11.1667H11.167H11.1673H11.1676H11.1679H11.1681H11.1684H11.1687H11.169H11.1693H11.1696H11.1699H11.1702H11.1705H11.1708H11.1711H11.1714H11.1717H11.172H11.1723H11.1725H11.1728H11.1731H11.1734H11.1737H11.174H11.1743H11.1746H11.1749H11.1752H11.1755H11.1758H11.1761H11.1764H11.1766H11.1769H11.1772H11.1775H11.1778H11.1781H11.1784H11.1787H11.179H11.1793H11.1796H11.1799H11.1802H11.1805H11.1807H11.181H11.1813H11.1816H11.1819H11.1822H11.1825H11.1828H11.1831H11.1834H11.1837H11.184H11.1843H11.1846H11.1849H11.1851H11.1854H11.1857H11.186H11.1863H11.1866H11.1869H11.1872H11.1875H11.1878H11.1881H11.1884H11.1887H11.189H11.1893H11.1895H11.1898H11.1901H11.1904H11.1907H11.191H11.1913H11.1916H11.1919H11.1922H11.1925H11.1928H11.1931H11.1934H11.1937H11.194H11.1942H11.1945H11.1948H11.1951H11.1954H11.1957H11.196H11.1963H11.1966H11.1969H11.1972H11.1975H11.1978H11.1981H11.1984H11.1987H11.199H11.1993H11.1995H11.1998H11.2001H11.2004H11.2007H11.201H11.2013H11.2016H11.2019H11.2022H11.2025H11.2028H11.2031H11.2034H11.2037H11.204H11.2043H11.2046H11.2049H11.2052H11.2055H11.2057H11.206H11.2063H11.2066H11.2069H11.2072H11.2075H11.2078H11.2081H11.2084H11.2087H11.209H11.2093H11.2096H11.2099H11.2102H11.2105H11.2108H11.2111H11.2114H11.2117H11.212H11.2123H11.2126H11.2129H11.2132H11.2135H11.2138H11.2141H11.2144H11.2147H11.215H11.2152H11.2155H11.2158H11.2161H11.2164H11.2167H11.217H11.2173H11.2176H11.2179H11.2182H11.2185H11.2188H11.2191H11.2194H11.2197H11.22H11.2203H11.2206H11.2209H11.2212H11.2215H11.2218H11.2221H11.2224H11.2227H11.223H11.2233H11.2236H11.2239H11.2242H11.2245H11.2248H11.2251H11.2254H11.2257H11.226H11.2263H11.2266H11.2269H11.2272H11.2275H11.2278H11.2281H11.2284H11.2288H11.2291H11.2294H11.2297H11.23H11.2303H11.2306H11.2309H11.2312H11.2315H11.2318H11.2321H11.2324H11.2327H11.233H11.2333H11.2336H11.2339H11.2342H11.2345H11.2348H11.2351H11.2354H11.2357H11.236H11.2363H11.2366H11.2369H11.2373H11.2376H11.2379H11.2382H11.2385H11.2388H11.2391H11.2394H11.2397H11.24H11.2403H11.2406H11.2409H11.2412H11.2415H11.2418H11.2422H11.2425H11.2428H11.2431H11.2434H11.2437H11.244H11.2443H11.2446H11.2449H11.2452H11.2455H11.2459H11.2462H11.2465H11.2468H11.2471H11.2474H11.2477H11.248H11.2483H11.2486H11.249H11.2493H11.2496H11.2499H11.2502H11.2505H11.2508H11.2511H11.2514H11.2518H11.2521H11.2524H11.2527H11.253H11.2533ZM5.48665 10.48C5.48665 11.8617 6.60943 12.9933 7.99998 12.9933C9.38946 12.9933 10.5133 11.8695 10.5133 10.48C10.5133 9.09717 9.38279 7.96665 7.99998 7.96665C6.61825 7.96665 5.48665 9.08943 5.48665 10.48Z" fill="#B8B8B8" stroke="#B8B8B8"></path>
                    </svg>
                  </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 Utilities 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 #541

Get the code for 13,400+ components

Tailwind Component #542

Get the code for 13,400+ components

Tailwind Component #543

Get the code for 13,400+ components

Tailwind Component #544

Get the code for 13,400+ components

Tailwind Component #545

Get the code for 13,400+ components

Tailwind Component #546

Get the code for 13,400+ components

Tailwind Component #547

Get the code for 13,400+ components

Tailwind Component #548

Get the code for 13,400+ components

Tailwind Component #549

Get the code for 13,400+ components

Tailwind Component #550

Get the code for 13,400+ components

Tailwind Component #551

Get the code for 13,400+ components

Tailwind Component #552

Get the code for 13,400+ components

Tailwind Component #553

Get the code for 13,400+ components

Tailwind Component #554

Get the code for 13,400+ components

Tailwind Component #555

Get the code for 13,400+ components

Tailwind Component #556

Get the code for 13,400+ components

Tailwind Component #557

Get the code for 13,400+ components

Tailwind Component #558

Get the code for 13,400+ components

Tailwind Component #559

Get the code for 13,400+ components

Tailwind Component #560

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