Tailwind CSS Components

Framework

UI Library

Lifetime Access

Full Shuffle access forever for $249

Pay once, ship unlimited projects. No subscription, no renewals, all future updates included.

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

Tailwind CSS

Solstice

<section class="py-24 bg-orange-500">
  <div class="container mx-auto px-4">
    <h1 class="text-center text-white text-3xl lg:text-5xl font-bold font-heading mb-4">How it works</h1>
    <p class="text-center text-orange-50 mb-20">What steps do I need to take to join?</p>
    <div class="bg-purple-900 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-purple-700 hover:border-orange-200 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="#FFC96D"></path>
                    <path d="M12 7V17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7Z" fill="#FFC96D"></path>
                  </svg>
                  <div class="flex-1">
                    <h2 class="text-white font-bold font-heading mb-3">Join or Create Room</h2>
                    <p class="text-purple-200 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-200">

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

Tailwind CSS

Solstice

<section class="py-24 xl:py-36 bg-orange-500 overflow-hidden" x-data="{ slide: 0 }">
  <div class="container mx-auto px-4">
    <div class="border border-orange-200 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-white 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-white 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-white 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-white text-lg font-semibold mb-1">Hanna Stanton</h2>
            <p class="text-orange-50">Student</p>
          </div>
          <div :class="{ 'hidden': slide != 1 }" class="hidden">
            <h2 class="text-white text-lg font-semibold mb-1">Olivia Martinez</h2>
            <p class="text-orange-50">Student</p>
          </div>
          <div :class="{ 'hidden': slide != 2 }" class="hidden">
            <h2 class="text-white text-lg font-semibold mb-1">Ethan Thompson</h2>
            <p class="text-orange-50">Student</p>
          </div>
          <div class="flex items-center gap-3">
            <a x-on:click.prevent="slide = 0" class="text-orange-300 hover:text-white 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 #863

Tailwind CSS

Solstice

<section class="py-16 bg-orange-500">
  <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-white 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-logo-light1.png" alt="">
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 p-4">
            <img src="solstice-assets/images/logos/placeholder-logo-light2.png" alt="">
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 p-4">
            <img src="solstice-assets/images/logos/placeholder-logo-light3.png" alt="">
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 p-4">
            <img src="solstice-assets/images/logos/placeholder-logo-light4.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 #864

Tailwind CSS

Solstice

<section class="overflow-hidden bg-orange-500">
  <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_12192)" stroke="#FF8A0A"></path>
        <defs><linearGradient id="paint0_linear_191_12192" x1="0" y1="500" x2="500" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#FF8A0A"><stop offset="1" stop-color="#FF8A0A" 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_12191)" stroke="#FF8A0A"></path>
        <defs><linearGradient id="paint0_linear_191_12191" x1="499.998" y1="2.85805e-05" x2="8.49831" y2="500" gradientUnits="userSpaceOnUse"><stop stop-color="#FF8A0A"><stop offset="1" stop-color="#FF8A0A" stop-opacity="0"></stop></stop></linearGradient></defs>
      </svg>
    </div>
    <div class="py-32 relative z-10">
      <h1 class="text-white 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-50">vibrant</span>
        <span></span>
        <span>community of learners.</span>
      </h1>
      <p class="text-white 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 #865

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-400 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 py-4 px-6 h-14 inline-flex items-center justify-center 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 #866

Tailwind CSS

Solstice

<section class="overflow-hidden bg-orange-500">
  <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_13438)" stroke="#FF8A0A"></path>
        <defs><linearGradient id="paint0_linear_191_13438" x1="0" y1="500" x2="500" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#FF8A0A"><stop offset="1" stop-color="#FF8A0A" 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_13437)" stroke="#FF8A0A"></path>
        <defs><linearGradient id="paint0_linear_191_13437" x1="499.998" y1="2.85805e-05" x2="8.49831" y2="500" gradientUnits="userSpaceOnUse"><stop stop-color="#FF8A0A"><stop offset="1" stop-color="#FF8A0A" 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 text-white 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-white 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-purple-900 border border-purple-700 shadow hover:bg-purple-800 focus:ring focus:ring-purple-800 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 #867

Tailwind CSS

Solstice

<section class="overflow-hidden bg-orange-500">
  <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_254_11540)" stroke="#FF8A0A"></path>
          <defs><linearGradient id="paint0_linear_254_11540" x1="0" y1="500" x2="500" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#FF8A0A"><stop offset="1" stop-color="#FF8A0A" 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_254_11539)" stroke="#FF8A0A"></path>
          <defs><linearGradient id="paint0_linear_254_11539" x1="499.998" y1="2.85805e-05" x2="8.49831" y2="500" gradientUnits="userSpaceOnUse"><stop stop-color="#FF8A0A"><stop offset="1" stop-color="#FF8A0A" 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-white text-3xl lg:text-5xl font-bold font-heading">Contact us</h1>
      <p class="text-center text-orange-50 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 #868

Tailwind CSS

Solstice

<section class="pt-24 pb-11 overflow-hidden bg-black">
  <div class="container mx-auto px-4">
    <h1 class="text-center text-white text-4xl lg:text-5xl font-bold font-heading mb-10">Oops. Page not found.</h1>
    <div class="flex justify-center mb-20"><a class="h-14 inline-flex items-center justify-center w-full sm:w-auto text-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 class="flex items-center justify-center gap-4 sm:gap-8 lg:gap-16">
      <div>
        <div class="bg-gray-900 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24 mx-auto"></div>
        <div class="flex justify-between mb-2">
          <div class="bg-gray-900 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></div>
          <div class="bg-gray-900 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></div>
        </div>
        <div class="flex gap-1 lg:gap-2 mb-2">
          <div class="bg-gray-900 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></div>
          <div class="bg-gray-900 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></div>
          <div class="bg-gray-900 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></div>
        </div>
        <div class="bg-gray-900 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24 ml-auto"></div>
      </div>
      <div>
        <div class="flex gap-1 lg:gap-2 mb-2">
          <div class="bg-gray-900 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></div>
          <div class="bg-gray-900 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></div>
          <div class="bg-gray-900 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></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 HTTP codes Component Generator

Tailwind Component #869

Tailwind CSS

Solstice

<section class="py-24 bg-orange-500">
  <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-purple-800 rounded-2xl py-6 px-4 h-full flex flex-col justify-center">
          <h2 class="text-orange-50 text-5xl lg:text-6xl font-bold font-heading text-center mb-4">101K+</h2>
          <p class="text-white 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-purple-800 rounded-2xl py-6 px-4 mb-6">
          <h2 class="text-orange-50 text-5xl lg:text-6xl font-bold font-heading text-center mb-4">2M+</h2>
          <p class="text-white font-medium text-center">Happy users and keep growing</p>
        </div>
        <div class="bg-purple-800 rounded-2xl py-6 px-4">
          <h2 class="text-orange-50 text-5xl lg:text-6xl font-bold font-heading text-center mb-4">94K</h2>
          <p class="text-white 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 #870

Tailwind CSS

Solstice

<section class="overflow-hidden" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="bg-orange-200">
    <div class="container px-4 mx-auto">
      <h1 class="text-4xl lg:text-5xl font-bold font-heading text-center mb-6 pt-16">Latest articles and releases</h1>
      <p class="text-gray-700 text-center mb-20">Discover the latest news, tips and user stories insights from Solstice.</p>
      <div class="flex justify-center flex-wrap gap-2 mb-16">
        <a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" :class="{ 'border border-purple-700 bg-purple-900 hover:bg-purple-800 focus:ring focus:ring-purple-800 text-white': tab == $refs.tab1.textContent, 'border border-gray-200 bg-white hover:bg-gray-50 focus:ring focus:ring-orange-200': tab != $refs.tab1.textContent }" class="h-10 inline-flex items-center justify-center w-full sm:w-auto text-center py-3 px-4 rounded-full bg-purple-900 border border-purple-700 hover:bg-purple-800 focus:ring focus:ring-purple-800 text-white text-sm font-semibold transition duration-200" href="#">All Articles</a>
        <a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" :class="{ 'border border-purple-700 bg-purple-900 hover:bg-purple-800 focus:ring focus:ring-purple-800 text-white': tab == $refs.tab2.textContent, 'border border-gray-200 bg-white hover:bg-gray-50 focus:ring focus:ring-orange-200': tab != $refs.tab2.textContent }" class="h-10 inline-flex items-center justify-center w-full sm:w-auto text-center py-3 px-5 rounded-full bg-white border border-gray-200 text-sm font-semibold hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Getting Started</a>
        <a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" :class="{ 'border border-purple-700 bg-purple-900 hover:bg-purple-800 focus:ring focus:ring-purple-800 text-white': tab == $refs.tab3.textContent, 'border border-gray-200 bg-white hover:bg-gray-50 focus:ring focus:ring-orange-200': tab != $refs.tab3.textContent }" class="h-10 inline-flex items-center justify-center w-full sm:w-auto text-center py-3 px-5 rounded-full bg-white border border-gray-200 text-sm font-semibold hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Learning Resources</a>
        <a x-ref="tab4" x-on:click.prevent="tab = $refs.tab4.textContent" :class="{ 'border border-purple-700 bg-purple-900 hover:bg-purple-800 focus:ring focus:ring-purple-800 text-white': tab == $refs.tab4.textContent, 'border border-gray-200 bg-white hover:bg-gray-50 focus:ring focus:ring-orange-200': tab != $refs.tab4.textContent }" class="h-10 inline-flex items-center justify-center w-full sm:w-auto text-center py-3 px-5 rounded-full bg-white border border-gray-200 text-sm font-semibold hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Stories</a>
      </div>
      <div class="flex flex-wrap mb-8 pb-8 border-b border-gray-200 -mx-4">
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <a href="#">
            <div class="hover:bg-white border border-transparent hover:border-orange-500 transition duration-200 rounded-2xl h-full p-3">
              <div class="relative" style="height: 240px;">
                <div class="absolute top-0 left-0 z-10">
                  <svg class="rounded-tl-2xl" xmlns="http://www.w3.org/2000/svg" width="159" height="156" viewBox="0 0 159 156" fill="none">
                    <path d="M-30 81.9324V155.361C-30 155.714 -29.7141 156 -29.3615 156H21.62C21.9724 156 22.2585 155.714 22.2585 155.361V96.299C22.2585 57.5087 60.5087 19.2585 99.299 19.2585H158.361C158.714 19.2585 159 18.9724 159 18.62V-32.3615C159 -32.7139 158.714 -33 158.361 -33H84.9324C21.4572 -33 -30 18.4572 -30 81.9324Z" fill="#FFF2D6"></path>
                  </svg>
                </div>
                <div class="absolute bottom-0 right-0 z-10">
                  <svg class="rounded-br-2xl" xmlns="http://www.w3.org/2000/svg" width="150" height="158" viewBox="0 0 150 158" fill="none">
                    <path d="M189 74.0676V0.638514C189 0.286054 188.714 0 188.361 0H137.38C137.028 0 136.742 0.286054 136.742 0.638514V59.701C136.742 98.4913 98.4914 136.742 59.701 136.742H0.638514C0.286054 136.742 0 137.028 0 137.38V188.361C0 188.714 0.286054 189 0.638514 189H74.0676C137.543 189 189 137.543 189 74.0676Z" fill="#FFF2D6"></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 Blog Component Generator

Tailwind Component #871

Tailwind CSS

Solstice

<section class="py-24 bg-orange-500">
  <div class="container mx-auto px-4">
    <h1 class="text-white text-3xl lg:text-5xl font-bold font-heading mb-4 text-center">Careers at Solstice</h1>
    <div class="p-6 rounded-2xl border border-orange-500 bg-white mb-24">
      <p class="flex gap-2 flex-wrap">
        <span>Check out our</span>
        <span class="flex items-center gap-1">
          <span class="text-orange-500 font-bold font-heading">Open Roles</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M2.16663 10C2.16663 5.67616 5.6761 2.16669 9.99996 2.16669C14.3238 2.16669 17.8333 5.67616 17.8333 10C17.8333 14.3239 14.3238 17.8334 9.99996 17.8334C5.6761 17.8334 2.16663 14.3239 2.16663 10ZM10.7952 13.7119L13.2952 11.2119C13.7321 10.775 13.7321 10.0584 13.2952 9.62147C12.8583 9.18454 12.1417 9.18454 11.7047 9.62147L11.125 10.2012V7.08335C11.125 6.46554 10.6178 5.95835 9.99996 5.95835C9.38215 5.95835 8.87496 6.46554 8.87496 7.08335V10.2012L8.29518 9.62147C7.85825 9.18454 7.14167 9.18454 6.70474 9.62147C6.26781 10.0584 6.26781 10.775 6.70474 11.2119L9.20474 13.7119C9.42845 13.9356 9.71617 14.0417 9.99996 14.0417C10.2837 14.0417 10.5715 13.9356 10.7952 13.7119Z" fill="#FF7100" stroke="#FF7100"></path>
          </svg>
        </span>
        <span>at the bottom of the page</span>
      </p>
    </div>
    <h2 class="text-white text-3xl font-bold font-heading mb-4">What we’re building</h2>
    <p class="text-orange-50 mb-8">People are shifting to a new form of collaboration in distributed teams and are wasting too much effort connecting the dots between different work streams to understand the bigger picture. Solstice is building a work hub that gives people a radically simpler way to coordinate work across teams and get context on what’s happening.</p>
    <p class="text-orange-50 mb-24">By bringing structure, access, and efficiency to teamwork, Solstice makes it easier for businesses to scale their operations. Backed by Atomico, Salesforce Ventures, and Mosaic, we’re on a mission to unlock the collective potential of teams and would love for you to join us!</p>
    <h2 class="text-white text-3xl font-bold font-heading mb-4">Benefits</h2>
    <p class="text-orange-50 mb-16">We help our employees thrive</p>
    <div class="flex flex-wrap mb-24 -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="ml-8 w-12 h-12 rounded-full bg-purple-700 flex items-center justify-center mb-4">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" 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 Careers Component Generator

Tailwind Component #872

Tailwind CSS

Solstice

<section class="overflow-hidden py-24 pl-8 lg:pl-20 pr-8 lg:pr-40 relative">
  <div class="absolute top-0 left-0 w-full bg-orange-50 pb-48 xl:pb-24">
    <div class="flex justify-center gap-6">
      <div class="hidden lg:block mt-12 rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(255, 234, 194, 0.00) 0%, #FFEAC2 100%);"></div>
      <div class="rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(255, 234, 194, 0.00) 0%, rgba(255, 234, 194, 0.50) 100%);"></div>
      <div class="rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(255, 234, 194, 0.00) 0%, rgba(255, 234, 194, 0.50) 100%);"></div>
      <div class="hidden lg:block mt-12 rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(255, 234, 194, 0.00) 0%, #FFEAC2 100%);"></div>
    </div>
  </div>
  <div class="relative z-10">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 xl:w-1/6 p-4">
        <a class="group inline-flex items-center gap-2 flex-wrap" href="#">
          <div class="text-black group-hover:text-opacity-80 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="text-black group-hover:text-opacity-80 transition duration-200 font-bold">Back to Blog</span>
        </a>
      </div>
      <div class="w-full lg:w-2/3 xl:w-5/6 p-4">
        <div class="flex items-center gap-3 flex-wrap mb-4">
          <span class="text-black">17 Jul 2023</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 #873

Tailwind CSS

Solstice

<section class="py-24 bg-orange-500">
  <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-white 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-white 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-50 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-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" href="#">
              <span class="text-sm font-semibold text-white">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="white" 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 #874

Tailwind CSS

Solstice

<section class="py-24 bg-orange-500">
  <div class="container mx-auto px-4">
    <h1 class="text-center text-white text-4xl lg:text-5xl font-bold font-heading mb-4">Discover features</h1>
    <p class="text-center text-orange-50 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-purple-900 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-50 w-0.5 h-6"></div>
          <h2 class="text-white text-lg font-bold font-heading mb-4">Study room. Personal or group.</h2>
          <p class="text-orange-50">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-purple-900 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 #875

Tailwind CSS

Solstice

<section class="bg-orange-500 py-16">
  <div class="container px-4 mx-auto">
    <h1 class="text-white 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-orange-50 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-purple-900"></div>
      <div class="w-full h-full absolute md:top-5 md:right-5 rounded-5xl bg-orange-200"></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-white 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 #876

Tailwind CSS

Solstice

<section class="py-24 overflow-hidden bg-orange-500">
  <div class="container mx-auto px-4">
    <div class="flex items-end justify-between flex-wrap gap-4 mb-24">
      <div>
        <h1 class="text-white text-4xl lg:text-5xl font-bold font-heading mb-4">Join our events</h1>
        <p class="text-orange-50 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-white border border-gray-200 shadow font-bold font-heading hover:bg-gray-50 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-purple-900 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 #877

Tailwind CSS

Solstice

<section class="pt-40 pb-24">
  <div class="container mx-auto px-4">
    <h1 class="text-gray-50 text-center text-8xl sm:text-9xl lg:text-10xl font-bold font-heading mb-2">404</h1>
    <p class="text-center text-2xl font-bold font-heading mb-4">Sorry, that page could not be found.</p>
    <p class="text-gray-500 text-center mb-10 max-w-xl mx-auto">The page you are looking for was moved, removed, renamed or might have never existed!</p>
    <div class="flex flex-wrap items-center justify-center gap-6"><a class="inline-block text-orange-500 text-sm font-semibold hover:text-orange-600 transition duration-200" href="#">Back to Home</a><a class="inline-block text-orange-500 text-sm font-semibold hover:text-orange-600 transition duration-200" href="#">Support</a></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 #878

Tailwind CSS

Solstice

<section class="py-24 bg-orange-500">
  <div class="container mx-auto px-4">
    <div class="border-t border-b border-purple-700">
      <div class="max-w-2xl mx-auto bg-purple-800 rounded-3xl py-16 px-4">
        <h2 class="text-white text-2xl font-bold font-heading text-center mb-6">Total monthly learners</h2>
        <h1 class="text-orange-50 text-center text-5xl lg:text-7xl font-bold font-heading mb-6">160,320</h1>
        <p class="text-white font-semibold text-center">and we’re just getting started.</p>
      </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 #879

Tailwind CSS

Solstice

<section class="overflow-hidden bg-orange-500">
  <div class="container px-4 mx-auto pt-16 pb-20">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="max-w-xl mx-auto">
          <h1 class="text-white text-3xl lg:text-5xl font-bold font-heading mb-4">Get in touch</h1>
          <p class="text-orange-50 mb-10">Submit your info and we’ll get back to you as soon as possible.</p>
          <div class="mb-10 flex items-center gap-1">
            <div class="bg-orange-200 rounded-3xl h-px w-3"></div>
            <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" viewBox="0 0 3 3" fill="none"><circle cx="1.5" cy="1.5" r="1.5" fill="#FFA632"></circle></svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" viewBox="0 0 3 3" fill="none"><circle cx="1.5" cy="1.5" r="1.5" fill="#FFA632"></circle></svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" viewBox="0 0 3 3" fill="none"><circle cx="1.5" cy="1.5" r="1.5" fill="#FFA632"></circle></svg>
            <div class="bg-orange-200 rounded-3xl h-px w-3"></div>
          </div>
          <div class="rounded-3xl border border-purple-700 bg-purple-900 shadow-sm py-8">
            <div class="relative">
              <div class="absolute top-0 left-0 bg-orange-50 w-1 h-8"></div>
              <div class="px-8">
                <h2 class="text-white text-xl font-bold font-heading mb-6">Technical Help desk</h2>
                <a class="w-full sm:w-auto py-3 px-5 h-12 rounded-full bg-white border border-gray-200 shadow text-sm font-semibold hover:bg-gray-50 focus:ring focus:ring-orange-300 transition duration-200 inline-flex items-center justify-center gap-2" href="#">
                  <span class="text-purple-900 text-sm font-semibold">Visit FAQ Center</span>
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M5 10H15.4167M15.4167 10L10.4167 5M15.4167 10L10.4167 15" stroke="#530031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Contact Component Generator

Tailwind Component #880

Tailwind CSS

Solstice

<section class="py-24 bg-orange-500">
  <div class="container mx-auto px-4">
    <p class="text-center text-orange-200 text-sm font-bold font-heading mb-6">HOW IT WORKS</p>
    <h1 class="text-center text-white text-3xl lg:text-5xl font-bold font-heading mb-24 max-w-sm lg:max-w-xl mx-auto">What steps do I need to take to join?</h1>
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-2/3 p-4">
        <img class="w-full" src="solstice-assets/images/how-it-works/picture-full-secondary.png" alt="">
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <a href="#">
          <div class="bg-orange-400 rounded-2xl py-6 pr-10 mb-3 group hover:bg-white transition duration-200">
            <div class="border-l-4 border-transparent group-hover:border-purple-900 transition duration-200 pl-10">
              <h2 class="text-white text-lg font-bold font-heading mb-2 group-hover: transition duration-200">Step 1</h2>
              <p class="text-orange-100 group-hover:text-gray-600 transition duration-200">Click "Sign Up," enter your name, email, a secure password, and hit "Create Account."</p>
            </div>
          </div>
        </a>
        <a href="#">
          <div class="bg-white rounded-2xl py-6 pr-10 mb-3">
            <div class="border-l-4 border-purple-900 pl-10">
              <h2 class="text-lg font-bold font-heading mb-2">Step 2</h2>
              <p class="text-gray-600">Join ongoing rooms for focus and connection or create your study space.</p>
            </div>
          </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI How it works 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 #861

Get the code for 13,400+ components

Tailwind Component #862

Get the code for 13,400+ components

Tailwind Component #863

Get the code for 13,400+ components

Tailwind Component #864

Get the code for 13,400+ components

Tailwind Component #865

Get the code for 13,400+ components

Tailwind Component #866

Get the code for 13,400+ components

Tailwind Component #867

Get the code for 13,400+ components

Tailwind Component #868

Get the code for 13,400+ components

Tailwind Component #869

Get the code for 13,400+ components

Tailwind Component #870

Get the code for 13,400+ components

Tailwind Component #871

Get the code for 13,400+ components

Tailwind Component #872

Get the code for 13,400+ components

Tailwind Component #873

Get the code for 13,400+ components

Tailwind Component #874

Get the code for 13,400+ components

Tailwind Component #875

Get the code for 13,400+ components

Tailwind Component #876

Get the code for 13,400+ components

Tailwind Component #877

Get the code for 13,400+ components

Tailwind Component #878

Get the code for 13,400+ components

Tailwind Component #879

Get the code for 13,400+ components

Tailwind Component #880

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