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

Tailwind CSS

Solstice

<section class="py-24 lg:py-56 bg-black">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap">
      <div class="w-full lg:w-2/3 p-4">
        <div class="border border-gray-800 rounded-5xl py-24 px-6 lg:px-12 h-full flex flex-col justify-center">
          <h1 class="text-gray-700 text-center text-8xl sm:text-9xl lg:text-10xl font-bold font-heading">404</h1>
        </div>
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <div class="rounded-5xl bg-gray-800 bg-opacity-50 px-10 py-18">
          <p class="text-white text-2xl font-bold font-heading mb-4">Sorry, that page could not be found.</p>
          <p class="text-gray-400 mb-10">The page you are looking for was moved, removed, renamed or might have never existed!</p>
          <div class="flex flex-wrap items-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>
      </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 #842

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="flex flex-col items-start justify-center h-full lg:pl-8 lg:pr-16 max-w-md mx-auto">
          <form action="">
            <div class="border border-orange-100 rounded-md bg-orange-50 px-2 py-1 inline-flex items-center gap-2 mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                <path d="M8.62293 3.37707C8.567 3.32115 8.50813 3.21714 8.50077 3.02581C8.62835 3.19081 8.77541 3.3237 8.91729 3.42581C8.95382 3.45211 8.99065 3.47685 9.02752 3.5H9.015C8.79742 3.5 8.68271 3.43685 8.62293 3.37707ZM10.485 3.5H10.469C10.508 3.47551 10.547 3.44928 10.5856 3.42134C10.7259 3.31979 10.8723 3.18774 10.9993 3.02426C10.9922 3.21658 10.9331 3.321 10.8771 3.37707C10.8173 3.43685 10.7026 3.5 10.485 3.5Z" fill="#FF7100" stroke="#FF7100"></path>
                <path d="M9.015 4.75C8.04 4.75 7.25 3.96 7.25 2.985V1.5C7.25 1.225 7.025 1 6.75 1H3.5C2.12 1 1 2.115 1 3.49V6.975C1 8.355 2.12 9.475 3.5 9.475H4.25C4.39 9.475 4.57 9.565 4.65 9.675L5.4 10.67C5.73 11.11 6.27 11.11 6.6 10.67L7.35 9.675C7.445 9.55 7.595 9.475 7.75 9.475H8.505C9.885 9.475 11 8.36 11 6.98V5.25C11 4.975 10.775 4.75 10.5 4.75H9.015ZM4 6C3.72 6 3.5 5.775 3.5 5.5C3.5 5.225 3.72 5 4 5C4.275 5 4.5 5.225 4.5 5.5C4.5 5.775 4.28 6 4 6ZM6 6C5.72 6 5.5 5.775 5.5 5.5C5.5 5.225 5.72 5 6 5C6.275 5 6.5 5.225 6.5 5.5C6.5 5.775 6.28 6 6 6Z" fill="#FF7100"></path>
              </svg>
              <span class="text-orange-500 text-sm font-medium">Newsletter</span>
            </div>
            <h2 class="text-white text-5xl font-bold font-heading mb-6">Subscribe</h2>
            <p class="text-orange-50 mb-10">Fuel your curiosity by joining a vibrant community of learners.</p>
            <input class="w-full rounded-full p-4 outline-none border border-orange-100 shadow placeholder-gray-500 focus:ring focus:ring-orange-200 transition duration-200 mb-4" type="text" placeholder="Email address">
            <button class="py-4 px-6 rounded-full h-14 bg-purple-900 w-full 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>
              </svg>
            </button>
          </form>
        </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 Newsletter Component Generator

Tailwind Component #843

Tailwind CSS

Solstice

<section class="pt-24 pb-14 bg-orange-500">
  <div class="container mx-auto px-4">
    <div class="flex items-start justify-between flex-wrap gap-8 mb-40">
      <a href="#">
        <img src="solstice-assets/images/logos/solstice-logo-light.svg" alt="">
      </a>
      <div class="flex flex-wrap gap-4 -mx-4">
        <ul class="flex flex-col gap-6 p-4">
          <li class="text-white font-medium">Platform</li>
          <li><a class="text-white hover:text-opacity-70 transition duration-200" href="#">Features</a></li>
          <li><a class="text-white hover:text-opacity-70 transition duration-200" href="#">How it works</a></li>
          <li><a class="text-white hover:text-opacity-70 transition duration-200" href="#">Pricing</a></li>
          <li><a class="text-white hover:text-opacity-70 transition duration-200" href="#">Events</a></li>
        </ul>
        <ul class="flex flex-col gap-6 p-4">
          <li class="text-white font-medium">Company</li>
          <li><a class="text-white hover:text-opacity-70 transition duration-200" href="#">About</a></li>
          <li><a class="text-white hover:text-opacity-70 transition duration-200" href="#">Our Mission</a></li>
          <li class="flex items-center flex-wrap gap-2">
            <a class="text-white hover:text-opacity-70 transition duration-200" href="#">Careers</a>
            <div class="bg-orange-50 border border-orange-100 py-1 px-2 rounded-md text-orange-500 text-xs font-bold font-heading uppercase">HIRING</div>
          </li>
          <li><a class="text-white hover:text-opacity-70 transition duration-200" href="#">Contact</a></li>
        </ul>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Footers Component Generator

Tailwind Component #844

Tailwind CSS

Solstice

<section class="py-24 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/2 p-4">
        <p class="text-white text-lg font-semibold">Backed by leading education companies</p>
      </div>
      <div class="w-full lg:w-1/2 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 #845

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="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 p-4">
        <div class="bg-purple-900 rounded-3xl px-4 lg:px-10 py-6 lg:py-12 relative overflow-hidden h-full max-w-md mx-auto">
          <div class="py-1 px-2 rounded-lg bg-orange-500 inline-flex items-center gap-2 mb-6">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M11.2 1.33331H9.46667C7.33333 1.33331 6 2.66665 6 4.79998V7.49998H8.96L7.58 6.11998C7.48 6.01998 7.43333 5.89331 7.43333 5.76665C7.43333 5.63998 7.48 5.51331 7.58 5.41331C7.77333 5.21998 8.09333 5.21998 8.28667 5.41331L10.52 7.64665C10.7133 7.83998 10.7133 8.15998 10.52 8.35331L8.28667 10.5866C8.09333 10.78 7.77333 10.78 7.58 10.5866C7.38667 10.3933 7.38667 10.0733 7.58 9.87998L8.96 8.49998H6V11.2C6 13.3333 7.33333 14.6666 9.46667 14.6666H11.1933C13.3267 14.6666 14.66 13.3333 14.66 11.2V4.79998C14.6667 2.66665 13.3333 1.33331 11.2 1.33331Z" fill="white"></path>
              <path d="M1.83337 7.5C1.56004 7.5 1.33337 7.72667 1.33337 8C1.33337 8.27333 1.56004 8.5 1.83337 8.5H6.00004V7.5H1.83337Z" fill="white"></path>
            </svg>
            <span class="text-white text-sm font-medium">Step I</span>
          </div>
          <h2 class="text-white text-3xl font-bold font-heading mb-6">Create Account</h2>
          <p class="text-purple-200 pb-40">Click "Sign Up," enter your name, email, a secure password, and hit "Create Account."</p>
          <div class="absolute -bottom-6 right-4">
            <div class="flex justify-end gap-4 mb-4">
              <div class="w-16 h-16 rounded-xl bg-purple-700"></div>
              <div class="w-16 h-16 rounded-xl bg-purple-700 bg-opacity-50"></div>
              <div class="w-16 h-16 rounded-xl bg-purple-700 bg-opacity-50"></div>
            </div>
            <div class="flex gap-4">
              <div class="w-16 h-16 rounded-xl bg-purple-700 bg-opacity-50"></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

Tailwind Component #846

Tailwind CSS

Solstice

<section class="py-24">
  <div class="container mx-auto px-4">
    <p class="uppercase text-center text-orange-500 text-sm font-bold font-heading mb-4">FEATURES</p>
    <h1 class="text-center text-4xl lg:text-5xl font-bold font-heading mb-24">Discover our features</h1>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="flex flex-col justify-center items-start h-full">
          <h2 class="text-4xl font-bold font-heading mb-6 max-w-sm">Summarize your learning</h2>
          <p class="text-gray-600 text-lg mb-10 max-w-lg">Summarize your learning effortlessly with in-platform note. Condense key takeaways and insights from any topic you've explored.</p>
          <a class="w-full sm:w-auto h-14 inline-flex items-center justify-center text-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="#">Learn more</a>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <img class="lg:ml-auto" src="solstice-assets/images/features/platform-half-primary.png" alt="">
      </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 Features Component Generator

Tailwind Component #847

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">Contact us</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="flex items-center flex-wrap gap-3 mb-4">
            <div class="bg-orange-50 rounded-xl p-2">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M18.3333 17.7085H1.66666C1.32499 17.7085 1.04166 17.9918 1.04166 18.3335C1.04166 18.6752 1.32499 18.9585 1.66666 18.9585H18.3333C18.675 18.9585 18.9583 18.6752 18.9583 18.3335C18.9583 17.9918 18.675 17.7085 18.3333 17.7085Z" fill="#530031"></path>
                <path d="M14.1667 1.6665H5.83333C3.33333 1.6665 2.5 3.15817 2.5 4.99984V18.3332H17.5V4.99984C17.5 3.15817 16.6667 1.6665 14.1667 1.6665ZM8.33333 14.3748H5.83333C5.49167 14.3748 5.20833 14.0915 5.20833 13.7498C5.20833 13.4082 5.49167 13.1248 5.83333 13.1248H8.33333C8.675 13.1248 8.95833 13.4082 8.95833 13.7498C8.95833 14.0915 8.675 14.3748 8.33333 14.3748ZM8.33333 10.6248H5.83333C5.49167 10.6248 5.20833 10.3415 5.20833 9.99984C5.20833 9.65817 5.49167 9.37484 5.83333 9.37484H8.33333C8.675 9.37484 8.95833 9.65817 8.95833 9.99984C8.95833 10.3415 8.675 10.6248 8.33333 10.6248ZM8.33333 6.87484H5.83333C5.49167 6.87484 5.20833 6.5915 5.20833 6.24984C5.20833 5.90817 5.49167 5.62484 5.83333 5.62484H8.33333C8.675 5.62484 8.95833 5.90817 8.95833 6.24984C8.95833 6.5915 8.675 6.87484 8.33333 6.87484ZM14.1667 14.3748H11.6667C11.325 14.3748 11.0417 14.0915 11.0417 13.7498C11.0417 13.4082 11.325 13.1248 11.6667 13.1248H14.1667C14.5083 13.1248 14.7917 13.4082 14.7917 13.7498C14.7917 14.0915 14.5083 14.3748 14.1667 14.3748ZM14.1667 10.6248H11.6667C11.325 10.6248 11.0417 10.3415 11.0417 9.99984C11.0417 9.65817 11.325 9.37484 11.6667 9.37484H14.1667C14.5083 9.37484 14.7917 9.65817 14.7917 9.99984C14.7917 10.3415 14.5083 10.6248 14.1667 10.6248ZM14.1667 6.87484H11.6667C11.325 6.87484 11.0417 6.5915 11.0417 6.24984C11.0417 5.90817 11.325 5.62484 11.6667 5.62484H14.1667C14.5083 5.62484 14.7917 5.90817 14.7917 6.24984C14.7917 6.5915 14.5083 6.87484 14.1667 6.87484Z" fill="#530031"></path>
              </svg>
            </div>
            <h2 class="text-white text-xl font-bold font-heading">Company HQ</h2>
          </div>
          <p class="text-orange-50 mb-10">4140 Parker Rd. Allentown, New Mexico 31134</p>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Contact Component Generator

Tailwind Component #848

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/3 p-4">
        <div class="bg-purple-900 rounded-2xl py-6 px-4">
          <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">Users studying around the globe</p>
        </div>
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <div class="bg-purple-900 rounded-2xl py-6 px-4">
          <h2 class="text-orange-50 text-5xl lg:text-6xl font-bold font-heading text-center mb-4">352K</h2>
          <p class="text-white font-medium text-center">Registered Users</p>
        </div>
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <div class="bg-purple-900 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">Registered Users</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 #849

Tailwind CSS

Solstice

<section class="py-24 bg-orange-500">
  <div class="container mx-auto px-4">
    <div class="flex items-center flex-wrap">
      <div class="w-full md:w-2/3 p-4">
        <div class="flex items-center flex-wrap gap-4 mb-6">
          <svg xmlns="http://www.w3.org/2000/svg" width="52" height="26" viewBox="0 0 52 26" fill="none">
            <path d="M2 26C1.99983 22.8482 2.62048 19.7273 3.8265 16.8154C5.03252 13.9035 6.80029 11.2577 9.02887 9.02906C11.2575 6.80042 13.9032 5.0326 16.815 3.82654C19.7268 2.62049 22.8477 1.99983 25.9994 2C39.2544 2 50 12.7446 50 26" stroke="#FFC96D" stroke-width="3" stroke-miterlimit="10"></path>
            <path d="M7.41928 26.0001C7.41928 21.0564 9.37688 16.3152 12.8614 12.8195C16.346 9.32374 21.072 7.35986 25.9999 7.35986C30.9278 7.35986 35.6539 9.32374 39.1384 12.8195C42.623 16.3152 44.5806 21.0564 44.5806 26.0001" stroke="#FFF2D6" stroke-width="3" stroke-miterlimit="10"></path>
            <path d="M12.6004 26.0001C12.6004 22.4463 14.0122 19.0381 16.5251 16.5252C19.038 14.0123 22.4462 12.6006 25.9999 12.6006C29.5537 12.6006 32.9619 14.0123 35.4748 16.5252C37.9877 19.0381 39.3994 22.4463 39.3994 26.0001" stroke="#530031" stroke-width="3" stroke-miterlimit="10"></path>
          </svg>
          <p class="text-white text-lg font-medium">What are you waiting for?</p>
        </div>
        <h1 class="text-white text-4xl lg:text-5xl font-bold font-heading mb-10 max-w-md">Join now and learn together!</h1>
        <a class="w-full sm:w-auto text-center py-5 px-8 mb-8 h-16 inline-flex items-center justify-center 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="#">Sign Up Now</a>
      </div>
      <div class="w-full md:w-1/3 p-4">
        <div class="flex flex-col">
          <div class="bg-purple-900 rounded-xl px-6 pt-4 relative mb-28 ml-auto">
            <div class="absolute left-2 bottom-2 bg-white p-2 rounded-md">
              <p class="text-sm text-black font-semibold">Sophie</p>
            </div>
            <img src="solstice-assets/images/cta/woman-picture1.png" alt="">
          </div>
          <div class="bg-orange-50 rounded-xl px-6 pt-4 relative mr-auto">

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

Tailwind CSS

Solstice

<section class="overflow-hidden">
  <div class="bg-orange-200">
    <div class="container px-4 mx-auto">
      <h1 class="text-4xl lg:text-6xl font-bold font-heading text-center mb-6 pt-16">Blog</h1>
      <p class="text-gray-700 text-xl text-center mb-20">Discover the latest news, tips and user stories insights from Solstice.</p>
      <div class="pb-20 mb-20 border-b border-gray-200">
        <a href="#">
          <div class="hover:bg-white border border-transparent hover:border-orange-500 transition duration-200 rounded-2xl h-full p-3 flex flex-wrap group">
            <div class="w-full lg:w-1/2 p-4">
              <div class="relative" style="height: 364px;">
                <div class="absolute top-0 left-0 z-10">
                  <svg class="rounded-tl-3xl" xmlns="http://www.w3.org/2000/svg" width="155" height="154" viewBox="0 0 155 154" fill="none">
                    <path d="M-34 79.9324V153.361C-34 153.714 -33.7141 154 -33.3615 154H17.62C17.9724 154 18.2585 153.714 18.2585 153.361V94.299C18.2585 55.5087 56.5087 17.2585 95.299 17.2585H154.361C154.714 17.2585 155 16.9724 155 16.62V-34.3615C155 -34.7139 154.714 -35 154.361 -35H80.9324C17.4572 -35 -34 16.4572 -34 79.9324Z" fill="#FF7100"></path>
                  </svg>
                </div>
                <div class="absolute bottom-0 right-0 z-10">
                  <svg class="rounded-br-3xl" xmlns="http://www.w3.org/2000/svg" width="154" height="158" viewBox="0 0 154 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="#FF7100"></path>
                  </svg>
                </div>
                <img class="absolute inset-0 w-full h-full object-cover rounded-3xl" src="solstice-assets/images/blog/picture-large.png" alt="">
              </div>
            </div>
            <div class="w-full lg:w-1/2 p-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 Blog Component Generator

Tailwind Component #851

Tailwind CSS

Solstice

<section class="py-24 bg-orange-500">
  <div class="container mx-auto px-4">
    <div class="bg-purple-900 rounded-5xl inline-flex items-center justify-center mb-16">
      <svg xmlns="http://www.w3.org/2000/svg" width="176" height="176" viewBox="0 0 176 176" fill="none">
        <path d="M154 77V49.5C154 46.4624 151.538 44 148.5 44L132 44C128.963 44 126.5 46.4624 126.5 49.5V71.5C126.5 89.7254 111.726 104.5 93.5003 104.5L71.5003 104.5C68.4627 104.5 66.0003 106.962 66.0003 110V126.5C66.0003 129.538 68.4627 132 71.5003 132L99.0003 132C129.376 132 154 107.376 154 77Z" fill="white"></path>
        <path d="M22 99L22 126.5C22 129.538 24.4624 132 27.5 132H44C47.0376 132 49.5 129.538 49.5 126.5V104.5C49.5 86.2746 64.2746 71.5 82.5 71.5H104.5C107.538 71.5 110 69.0376 110 66V49.5C110 46.4624 107.538 44 104.5 44L77 44C46.6243 44 22 68.6243 22 99Z" fill="white"></path>
      </svg>
    </div>
    <h1 class="text-white text-3xl lg:text-5xl font-bold font-heading mb-10">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>
    <div class="flex flex-wrap mb-16 -mx-4">
      <div class="w-full lg:w-1/2 p-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 Careers Component Generator

Tailwind Component #852

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">Join our events</h1>
    <p class="text-center text-orange-50 text-lg mb-20">Engage in our weekly online events featuring mindfulness sessions, journaling, and fireside chats.</p>
    <div class="border border-orange-400 bg-white rounded-3xl pt-6 px-6 mb-12">
      <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">
          <a class="py-2 px-4 rounded-full border border-gray-200 shadow text-sm font-semibold hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Today</a>
          <a class="p-2 rounded-full border border-gray-200 shadow hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
              <path d="M13.125 16.25L6.875 10L13.125 3.75" stroke="#282828" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <a class="p-2 rounded-full border border-gray-200 shadow hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" 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 Events Component Generator

Tailwind Component #853

Tailwind CSS

Solstice

<div class="flex flex-wrap py-12">
  <div class="w-full lg:w-1/2 p-4">
    <div class="flex flex-col justify-center max-w-md mx-auto h-full">
      <form action="">
        <h1 class="text-3xl font-bold font-heading mb-4">Login</h1>
        <a class="inline-block text-gray-500 hover: transition duration-200 mb-8" href="#">
          <span>New to Solstice?</span>
          <span></span>
          <span class="font-bold font-heading">Create new account</span>
        </a>
        <label class="block text-sm font-medium mb-2" for="textInput1">Email</label>
        <input class="w-full rounded-full p-4 outline-none border border-gray-100 shadow placeholder-gray-500 focus:ring focus:ring-orange-200 transition duration-200 mb-4" id="textInput1" type="text" placeholder="john@email.com">
        <label class="block text-sm font-medium mb-2" for="textInput2">Password</label>
        <div class="flex items-center gap-1 w-full rounded-full p-4 border border-gray-100 shadow mb-3">
          <input class="outline-none flex-1 placeholder-gray-500 " id="textInput2" type="password" placeholder="Enter password">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M21.25 9.15C18.94 5.52 15.56 3.43 12 3.43C10.22 3.43 8.49 3.95 6.91 4.92C5.33 5.9 3.91 7.33 2.75 9.15C1.75 10.72 1.75 13.27 2.75 14.84C5.06 18.48 8.44 20.56 12 20.56C13.78 20.56 15.51 20.04 17.09 19.07C18.67 18.09 20.09 16.66 21.25 14.84C22.25 13.28 22.25 10.72 21.25 9.15ZM12 16.04C9.76 16.04 7.96 14.23 7.96 12C7.96 9.77 9.76 7.96 12 7.96C14.24 7.96 16.04 9.77 16.04 12C16.04 14.23 14.24 16.04 12 16.04Z" fill="#A3A3A3"></path>
            <path d="M12.0004 9.14C10.4304 9.14 9.15039 10.42 9.15039 12C9.15039 13.57 10.4304 14.85 12.0004 14.85C13.5704 14.85 14.8604 13.57 14.8604 12C14.8604 10.43 13.5704 9.14 12.0004 9.14Z" fill="#A3A3A3"></path>
          </svg>
        </div>
        <div class="mb-8 flex justify-end"><a class="inline-block text-orange-500 hover:text-orange-600 transition duration-200 text-sm font-semibold" href="#">Forgot Password?</a></div>
        <button class="h-14 inline-flex items-center justify-center py-4 px-6 text-white font-bold font-heading rounded-full bg-orange-500 w-full text-center border border-orange-600 shadow hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200 mb-8" type="submit">Login</button>
        <button class="h-14 inline-flex items-center justify-center gap-2 py-4 px-6 rounded-full bg-white w-full text-center border border-gray-100 shadow hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" type="submit">
          <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" 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 Sign in / Sign up Component Generator

Tailwind Component #854

Tailwind CSS

Solstice

<section class="py-24 bg-orange-500">
  <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-white text-4xl lg:text-5xl font-bold font-heading mb-4">One plan that fits</h2>
          <p class="text-white 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-white 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-white 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="white"></path>
                </svg>
              </div>
              <span class="text-white">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="white"></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 #855

Tailwind CSS

Solstice

<section class="overflow-hidden py-24 relative">
  <div class="absolute top-0 left-0 w-full bg-orange-50 pb-40 md:pb-24">
    <div class="flex justify-center gap-6">
      <div class="hidden lg:block mt-20 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-20 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="container mx-auto px-4">
      <div class="flex justify-center">
        <a class=" group mb-12 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>
      <h1 class="text-center text-black text-3xl lg:text-5xl font-bold mb-12 max-w-xl lg:max-w-3xl mx-auto">The Art and Science of Design Development: Crafting Digital Experiences</h1>
      <img class="w-full rounded-2xl mb-12" src="solstice-assets/images/blog/post-picture.png" alt="">
      <div class="px-8 lg:px-24">

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

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/3 p-4">
        <h1 class="text-white text-4xl lg:text-5xl font-bold font-heading mb-6">FAQ</h1>
        <p class="text-white mb-6 max-w-xs">Still have more questions? Talk to our customer happiness team</p>
        <a class="w-full sm:w-auto py-3 px-5 h-12 rounded-full bg-white border border-gray-200 hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200 inline-flex items-center justify-center gap-2" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M13.3333 1.66663H6.66663C3.33329 1.66663 1.66663 3.33329 1.66663 6.66663V17.5C1.66663 17.9583 2.04163 18.3333 2.49996 18.3333H13.3333C16.6666 18.3333 18.3333 16.6666 18.3333 13.3333V6.66663C18.3333 3.33329 16.6666 1.66663 13.3333 1.66663ZM11.6666 12.7083H5.83329C5.49163 12.7083 5.20829 12.425 5.20829 12.0833C5.20829 11.7416 5.49163 11.4583 5.83329 11.4583H11.6666C12.0083 11.4583 12.2916 11.7416 12.2916 12.0833C12.2916 12.425 12.0083 12.7083 11.6666 12.7083ZM14.1666 8.54163H5.83329C5.49163 8.54163 5.20829 8.25829 5.20829 7.91663C5.20829 7.57496 5.49163 7.29163 5.83329 7.29163H14.1666C14.5083 7.29163 14.7916 7.57496 14.7916 7.91663C14.7916 8.25829 14.5083 8.54163 14.1666 8.54163Z" fill="#A3A3A3"></path>
          </svg>
          <span class="text-sm font-semibold ">Talk to us</span>
        </a>
      </div>
      <div class="w-full lg:w-2/3 p-4">
        <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="mb-3 p-6 border-b border-orange-300 cursor-pointer">
          <div class="flex items-center justify-between gap-6">
            <h2 class="text-lg font-semibold text-white">What is Solstice? What is it for?</h2>
            <a :class="{ 'rotate-180': accordion, 'rotate-0': !accordion }" class="transform text-white hover:text-opacity-70 transition duration-200 w-6 h-6" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
          <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-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 FAQ Component Generator

Tailwind Component #857

Tailwind CSS

Solstice

<div class="flex flex-wrap py-12">
  <div class="w-full lg:w-1/2 p-4">
    <div class="flex flex-col justify-center max-w-md mx-auto h-full">
      <form action="">
        <h1 class="text-3xl font-bold font-heading mb-4">Sign up</h1>
        <a class="inline-block text-gray-500 hover: transition duration-200 mb-8" href="#">
          <span>Already have an account?</span>
          <span></span>
          <span class="font-bold font-heading">Login</span>
        </a>
        <label class="block text-sm font-medium mb-2" for="textInput1">Email</label>
        <input class="w-full rounded-full p-4 outline-none border border-gray-100 shadow placeholder-gray-500 focus:ring focus:ring-orange-200 transition duration-200 mb-4" id="textInput1" type="text" placeholder="john@email.com">
        <label class="block text-sm font-medium mb-2" for="textInput2">Password</label>
        <div class="flex items-center gap-1 w-full rounded-full p-4 border border-gray-100 shadow mb-8">
          <input class="outline-none flex-1 placeholder-gray-500 " id="textInput2" type="password" placeholder="Enter password">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M21.25 9.15C18.94 5.52 15.56 3.43 12 3.43C10.22 3.43 8.49 3.95 6.91 4.92C5.33 5.9 3.91 7.33 2.75 9.15C1.75 10.72 1.75 13.27 2.75 14.84C5.06 18.48 8.44 20.56 12 20.56C13.78 20.56 15.51 20.04 17.09 19.07C18.67 18.09 20.09 16.66 21.25 14.84C22.25 13.28 22.25 10.72 21.25 9.15ZM12 16.04C9.76 16.04 7.96 14.23 7.96 12C7.96 9.77 9.76 7.96 12 7.96C14.24 7.96 16.04 9.77 16.04 12C16.04 14.23 14.24 16.04 12 16.04Z" fill="#A3A3A3"></path>
            <path d="M12.0004 9.14C10.4304 9.14 9.15039 10.42 9.15039 12C9.15039 13.57 10.4304 14.85 12.0004 14.85C13.5704 14.85 14.8604 13.57 14.8604 12C14.8604 10.43 13.5704 9.14 12.0004 9.14Z" fill="#A3A3A3"></path>
          </svg>
        </div>
        <button class="h-14 inline-flex items-center justify-center py-4 px-6 text-white font-bold font-heading rounded-full bg-orange-500 w-full text-center border border-orange-600 shadow hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200 mb-8" type="submit">Sign Up</button>
        <button class="h-14 inline-flex items-center justify-center gap-2 py-4 px-6 rounded-full bg-white w-full text-center border border-gray-100 shadow hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" type="submit">
          <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
            <path d="M10.5003 1.91667C12.5358 1.91667 14.3903 2.67493 15.8117 3.91839L13.8037 5.92643C12.9021 5.19326 11.7542 4.75001 10.5003 4.75001C7.601 4.75001 5.25033 7.10068 5.25033 10C5.25033 12.8993 7.601 15.25 10.5003 15.25C12.7863 15.25 14.7244 13.7867 15.4456 11.7501L15.5636 11.4167H15.2099H10.7503V8.58334H17.7503V8.61792H18.0003H18.4637C18.5415 9.06752 18.5837 9.52907 18.5837 10C18.5837 14.464 14.9643 18.0833 10.5003 18.0833C6.03631 18.0833 2.41699 14.464 2.41699 10C2.41699 5.53599 6.03631 1.91667 10.5003 1.91667Z" fill="#FFC107" stroke="#FFC107" stroke-width="0.5"></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 Sign in / Sign up Component Generator

Tailwind Component #858

Tailwind CSS

Solstice

<section class="bg-orange-500 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-white 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-orange-50 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-white text-4xl font-bold font-heading text-center mb-9">Our investors</h2>
    <div class="border border-orange-300 bg-orange-400 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-logo-light1.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-logo-light2.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 #859

Tailwind CSS

Solstice

<section class="bg-white p-6">
  <div class="bg-orange-500 pt-24 pb-8">
    <div class="container mx-auto px-4">
      <div class="flex justify-between flex-wrap gap-8 mb-36 h-full">
        <div class="flex flex-col justify-between">
          <a class="mb-8" href="#">
            <img src="solstice-assets/images/logos/solstice-logo-light.svg" alt="">
          </a>
          <div class="flex items-center gap-6 flex-wrap">
            <a class="text-white hover:text-opacity-70 transition duration-200" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M22.46 6C21.69 6.35 20.86 6.58 20 6.69C20.88 6.16 21.56 5.32 21.88 4.31C21.05 4.81 20.13 5.16 19.16 5.36C18.37 4.5 17.26 4 16 4C13.65 4 11.73 5.92 11.73 8.29C11.73 8.63 11.77 8.96 11.84 9.27C8.28001 9.09 5.11001 7.38 3.00001 4.79C2.63001 5.42 2.42001 6.16 2.42001 6.94C2.42001 8.43 3.17001 9.75 4.33001 10.5C3.62001 10.5 2.96001 10.3 2.38001 10V10.03C2.38001 12.11 3.86001 13.85 5.82001 14.24C5.19074 14.4122 4.5301 14.4362 3.89001 14.31C4.16162 15.1625 4.69355 15.9084 5.41103 16.4429C6.1285 16.9775 6.99546 17.2737 7.89001 17.29C6.37364 18.4904 4.494 19.1393 2.56001 19.13C2.22001 19.13 1.88001 19.11 1.54001 19.07C3.44001 20.29 5.70001 21 8.12001 21C16 21 20.33 14.46 20.33 8.79C20.33 8.6 20.33 8.42 20.32 8.23C21.16 7.63 21.88 6.87 22.46 6Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="text-white hover:text-opacity-70 transition duration-200" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M19 3C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19ZM18.5 18.5V13.2C18.5 12.3354 18.1565 11.5062 17.5452 10.8948C16.9338 10.2835 16.1046 9.94 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17C14.6813 12.17 15.0374 12.3175 15.2999 12.5801C15.5625 12.8426 15.71 13.1987 15.71 13.57V18.5H18.5ZM6.88 8.56C7.32556 8.56 7.75288 8.383 8.06794 8.06794C8.383 7.75288 8.56 7.32556 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19C6.43178 5.19 6.00193 5.36805 5.68499 5.68499C5.36805 6.00193 5.19 6.43178 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56ZM8.27 18.5V10.13H5.5V18.5H8.27Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="text-white hover:text-opacity-70 transition duration-200" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M7.8 2H16.2C19.4 2 22 4.6 22 7.8V16.2C22 17.7383 21.3889 19.2135 20.3012 20.3012C19.2135 21.3889 17.7383 22 16.2 22H7.8C4.6 22 2 19.4 2 16.2V7.8C2 6.26174 2.61107 4.78649 3.69878 3.69878C4.78649 2.61107 6.26174 2 7.8 2ZM7.6 4C6.64522 4 5.72955 4.37928 5.05442 5.05442C4.37928 5.72955 4 6.64522 4 7.6V16.4C4 18.39 5.61 20 7.6 20H16.4C17.3548 20 18.2705 19.6207 18.9456 18.9456C19.6207 18.2705 20 17.3548 20 16.4V7.6C20 5.61 18.39 4 16.4 4H7.6ZM17.25 5.5C17.5815 5.5 17.8995 5.6317 18.1339 5.86612C18.3683 6.10054 18.5 6.41848 18.5 6.75C18.5 7.08152 18.3683 7.39946 18.1339 7.63388C17.8995 7.8683 17.5815 8 17.25 8C16.9185 8 16.6005 7.8683 16.3661 7.63388C16.1317 7.39946 16 7.08152 16 6.75C16 6.41848 16.1317 6.10054 16.3661 5.86612C16.6005 5.6317 16.9185 5.5 17.25 5.5ZM12 7C13.3261 7 14.5979 7.52678 15.5355 8.46447C16.4732 9.40215 17 10.6739 17 12C17 13.3261 16.4732 14.5979 15.5355 15.5355C14.5979 16.4732 13.3261 17 12 17C10.6739 17 9.40215 16.4732 8.46447 15.5355C7.52678 14.5979 7 13.3261 7 12C7 10.6739 7.52678 9.40215 8.46447 8.46447C9.40215 7.52678 10.6739 7 12 7ZM12 9C11.2044 9 10.4413 9.31607 9.87868 9.87868C9.31607 10.4413 9 11.2044 9 12C9 12.7956 9.31607 13.5587 9.87868 14.1213C10.4413 14.6839 11.2044 15 12 15C12.7956 15 13.5587 14.6839 14.1213 14.1213C14.6839 13.5587 15 12.7956 15 12C15 11.2044 14.6839 10.4413 14.1213 9.87868C13.5587 9.31607 12.7956 9 12 9Z" fill="currentColor"></path>
              </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 Footers Component Generator

Tailwind Component #860

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">Summarize your learning</h1>
        <p class="text-gray-600 text-lg max-w-2xl">Summarize your learning effortlessly with in-platform note. Condense key takeaways and insights from any topic you've explored.</p>
      </div>
      <a class="w-full sm:w-auto h-14 inline-flex items-center justify-center text-center 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-primary2.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

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

Get the code for 13,400+ components

Tailwind Component #842

Get the code for 13,400+ components

Tailwind Component #843

Get the code for 13,400+ components

Tailwind Component #844

Get the code for 13,400+ components

Tailwind Component #845

Get the code for 13,400+ components

Tailwind Component #846

Get the code for 13,400+ components

Tailwind Component #847

Get the code for 13,400+ components

Tailwind Component #848

Get the code for 13,400+ components

Tailwind Component #849

Get the code for 13,400+ components

Tailwind Component #850

Get the code for 13,400+ components

Tailwind Component #851

Get the code for 13,400+ components

Tailwind Component #852

Get the code for 13,400+ components

Tailwind Component #853

Get the code for 13,400+ components

Tailwind Component #854

Get the code for 13,400+ components

Tailwind Component #855

Get the code for 13,400+ components

Tailwind Component #856

Get the code for 13,400+ components

Tailwind Component #857

Get the code for 13,400+ components

Tailwind Component #858

Get the code for 13,400+ components

Tailwind Component #859

Get the code for 13,400+ components

Tailwind Component #860

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