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

Tailwind CSS

Solstice

<section class="overflow-hidden pt-10 lg:pb-24 bg-black">
  <div class="container mx-auto px-4 relative" style="height:600px;">
    <div class="flex justify-center md:justify-between">
      <div class="hidden lg:block">
        <div class="w-80 h-80 rounded-3xl bg-white bg-opacity-10 relative z-10"></div>
        <div class="w-80 h-80 rounded-3xl relative z-10" style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.20) 100%);"></div>
      </div>
      <div class="hidden lg:block">
        <div class="w-80 h-80 rounded-3xl bg-white bg-opacity-10 relative z-10"></div>
        <div class="w-80 h-80 rounded-3xl relative z-10" style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.20) 100%);"></div>
      </div>
    </div>
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full">
      <div class="flex flex-col justify-center h-full py-12 px-8 relative">
        <div class="absolute top-0 left-1/2 transform -translate-x-1/2">
          <div class="flex justify-center gap-6">
            <div class="bg-black bg-opacity-60 w-60 h-60"></div>
            <div class="bg-black bg-opacity-60 w-60 h-60"></div>
          </div>
        </div>
        <h1 class="text-center text-white text-8xl sm:text-9xl font-bold font-heading mb-2">404</h1>
        <div class="relative z-20">
          <p class="text-center text-gray-200 text-lg mb-10 max-w-lg mx-auto">The page you are looking for was moved, removed, renamed or might have never existed!</p>
          <div class="flex justify-center"><a class="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>

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

Tailwind CSS

Solstice

<section class="py-24 bg-orange-50">
  <div class="bg-orange-100 border-t border-b border-orange-200">
    <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="lg:pr-12 pb-6 lg:pb-0 border-b lg:border-b-0 lg:border-r border-orange-200">
            <h2 class="text-purple-900 text-center text-6xl font-bold font-heading mb-2">94K</h2>
            <p class="text-purple-900 text-center font-medium">ACTIVE LEARNERS</p>
          </div>
        </div>
        <div class="w-full lg:w-1/3 p-4">
          <div class="lg:pr-12 pb-6 lg:pb-0 border-b lg:border-b-0 lg:border-r border-orange-200">
            <h2 class="text-purple-900 text-center text-6xl font-bold font-heading mb-2">352K</h2>
            <p class="text-purple-900 text-center font-medium">REGISTERED USERS</p>
          </div>
        </div>
        <div class="w-full lg:w-1/3 p-4">
          <div class="lg:pl-12">
            <h2 class="text-purple-900 text-center text-6xl font-bold font-heading mb-2">352K</h2>
            <p class="text-purple-900 text-center font-medium">REGISTERED USERS</p>
          </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 Stats Component Generator

Tailwind Component #803

Tailwind CSS

Solstice

<section class="overflow-hidden bg-orange-100">
  <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-3xl lg:text-5xl font-bold font-heading mb-4 max-w-xs lg:max-w-md">How can we help you today?</h1>
          <p class="text-gray-600 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-500 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.7083H1.66666C1.32499 17.7083 1.04166 17.9916 1.04166 18.3333C1.04166 18.675 1.32499 18.9583 1.66666 18.9583H18.3333C18.675 18.9583 18.9583 18.675 18.9583 18.3333C18.9583 17.9916 18.675 17.7083 18.3333 17.7083Z" fill="white"></path>
                <path d="M14.1667 1.66669H5.83333C3.33333 1.66669 2.5 3.15835 2.5 5.00002V18.3334H17.5V5.00002C17.5 3.15835 16.6667 1.66669 14.1667 1.66669ZM8.33333 14.375H5.83333C5.49167 14.375 5.20833 14.0917 5.20833 13.75C5.20833 13.4084 5.49167 13.125 5.83333 13.125H8.33333C8.675 13.125 8.95833 13.4084 8.95833 13.75C8.95833 14.0917 8.675 14.375 8.33333 14.375ZM8.33333 10.625H5.83333C5.49167 10.625 5.20833 10.3417 5.20833 10C5.20833 9.65835 5.49167 9.37502 5.83333 9.37502H8.33333C8.675 9.37502 8.95833 9.65835 8.95833 10C8.95833 10.3417 8.675 10.625 8.33333 10.625ZM8.33333 6.87502H5.83333C5.49167 6.87502 5.20833 6.59169 5.20833 6.25002C5.20833 5.90835 5.49167 5.62502 5.83333 5.62502H8.33333C8.675 5.62502 8.95833 5.90835 8.95833 6.25002C8.95833 6.59169 8.675 6.87502 8.33333 6.87502ZM14.1667 14.375H11.6667C11.325 14.375 11.0417 14.0917 11.0417 13.75C11.0417 13.4084 11.325 13.125 11.6667 13.125H14.1667C14.5083 13.125 14.7917 13.4084 14.7917 13.75C14.7917 14.0917 14.5083 14.375 14.1667 14.375ZM14.1667 10.625H11.6667C11.325 10.625 11.0417 10.3417 11.0417 10C11.0417 9.65835 11.325 9.37502 11.6667 9.37502H14.1667C14.5083 9.37502 14.7917 9.65835 14.7917 10C14.7917 10.3417 14.5083 10.625 14.1667 10.625ZM14.1667 6.87502H11.6667C11.325 6.87502 11.0417 6.59169 11.0417 6.25002C11.0417 5.90835 11.325 5.62502 11.6667 5.62502H14.1667C14.5083 5.62502 14.7917 5.90835 14.7917 6.25002C14.7917 6.59169 14.5083 6.87502 14.1667 6.87502Z" fill="white"></path>
              </svg>
            </div>
            <h2 class="text-xl font-bold font-heading">Company HQ</h2>
          </div>
          <p class="text-gray-600 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 #804

Tailwind CSS

Solstice

<section class="py-24 bg-orange-100">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <p class="text-purple-900 text-lg font-bold font-heading">Backed by leading education companies</p>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div class="flex flex-wrap items-center">
          <div class="w-full md:w-1/2 xl:w-1/4 py-6 px-3">
            <img src="solstice-assets/images/logos/placeholder-logo-secondary1.png" alt="">
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 py-6 px-3">
            <img src="solstice-assets/images/logos/placeholder-logo-secondary2.png" alt="">
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 py-6 px-3">
            <img src="solstice-assets/images/logos/placeholder-logo-secondary3.png" alt="">
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 py-6 px-3">
            <img src="solstice-assets/images/logos/placeholder-logo-secondary4.png" alt="">
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 py-6 px-3">
            <img src="solstice-assets/images/logos/placeholder-logo-secondary5.png" alt="">
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 py-6 px-3">

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

Tailwind CSS

Solstice

<section class="py-24 bg-orange-100">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="flex items-center flex-wrap gap-4 mb-10">
          <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="#530031" stroke-width="3" stroke-miterlimit="10"></path>
            <path d="M7.41943 26C7.41943 21.0563 9.37703 16.3151 12.8616 12.8194C16.3461 9.32367 21.0722 7.3598 26.0001 7.3598C30.928 7.3598 35.654 9.32367 39.1386 12.8194C42.6231 16.3151 44.5807 21.0563 44.5807 26" stroke="#FF7100" stroke-width="3" stroke-miterlimit="10"></path>
            <path d="M12.6006 26C12.6006 22.4463 14.0123 19.038 16.5252 16.5251C19.0381 14.0123 22.4463 12.6005 26.0001 12.6005C29.5539 12.6005 32.9621 14.0123 35.475 16.5251C37.9879 19.038 39.3996 22.4463 39.3996 26" stroke="#FFC96D" stroke-width="3" stroke-miterlimit="10"></path>
          </svg>
          <p class="text-lg font-medium">What are you waiting for?</p>
        </div>
        <div class="bg-white rounded-2xl border border-orange-50 flex flex-col p-2 lg:max-w-md">
          <div class="bg-purple-900 rounded-xl px-6 pt-4 mr-auto mb-2">
            <img src="solstice-assets/images/cta/men-picture1.png" alt="">
          </div>
          <div class="bg-orange-300 rounded-xl px-6 pt-4 ml-auto">
            <img src="solstice-assets/images/cta/woman-picture1.png" alt="">
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <h1 class="text-4xl lg:text-5xl mb-6 font-bold font-heading max-w-xs lg:max-w-sm">Join now and learn together!</h1>
        <p class="text-gray-600 mb-10 max-w-sm">Embark on an exciting learning adventure together - Join now!</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 Call to action Component Generator

Tailwind Component #806

Tailwind CSS

Solstice

<section class="pt-24 bg-orange-100">
  <div class="container mx-auto px-4">
    <div class="bg-orange-50 rounded-t-3xl pt-10 pb-36 px-10">
      <div class="flex justify-between flex-wrap gap-8">
        <div>
          <a href="#">
            <img class="mb-6" src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
          </a>
          <p class="text-gray-700 text-sm">© 2023 Solstice. All rights reserved.</p>
        </div>
        <div class="flex flex-wrap gap-8 -mx-4">
          <ul class="flex flex-col gap-6 p-4">
            <li class="text-black font-medium">Platform</li>
            <li><a class="text-gray-700 hover:text-black transition duration-200" href="#">Features</a></li>
            <li><a class="text-gray-700 hover:text-black transition duration-200" href="#">How it works</a></li>
            <li><a class="text-gray-700 hover:text-black transition duration-200" href="#">Pricing</a></li>
            <li><a class="text-gray-700 hover:text-black transition duration-200" href="#">Events</a></li>
          </ul>
          <ul class="flex flex-col gap-6 p-4">
            <li class="text-black font-medium">Company</li>
            <li><a class="text-gray-700 hover:text-black transition duration-200" href="#">About</a></li>
            <li><a class="text-gray-700 hover:text-black transition duration-200" href="#">Our Mission</a></li>
            <li class="flex items-center flex-wrap gap-2">
              <a class="text-gray-700 hover:text-black transition duration-200" href="#">Careers</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 #807

Tailwind CSS

Solstice

<section class="py-24 overflow-hidden bg-orange-100" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <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="max-w-xs">
          <h1 class="text-4xl lg:text-5xl font-bold font-heading mb-6">What our users say</h1>
          <p class="text-gray-600 mb-10">Hundreds of companies and thousands of happy users</p>
        </div>
        <div class="flex flex-wrap gap-6 mb-16">
          <a x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="rounded-full border border-gray-200 bg-white hover:bg-gray-50 p-3 focus:ring focus:ring-orange-200 transition duration-200 shadow" 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 x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="rounded-full border border-gray-200 bg-white hover:bg-gray-50 p-3 focus:ring focus:ring-orange-200 transition duration-200 shadow" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
              <path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="#282828" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="w-full lg:w-2/3 p-4 relative h-96">
        <div class="lg:absolute lg:top-0 lg:transform lg:-right-3/4">
          <div class="hidden lg:block relative mb-16 w-80 lg:w-128 mx-auto lg:mx-0">

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

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="bg-white rounded-5xl border-2 border-gray-100 shadow-sm p-6 flex items-center justify-between flex-wrap gap-4">
      <div class="flex items-center gap-6 flex-wrap">
        <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34" fill="none">
          <path d="M14.5002 13.6667C15.1946 13.6667 15.7852 13.4233 16.2718 12.9367C16.7585 12.45 17.0013 11.86 17.0002 11.1667C17.0002 10.4722 16.7568 9.88166 16.2702 9.39499C15.7835 8.90833 15.1935 8.66555 14.5002 8.66666C13.8057 8.66666 13.2152 8.91 12.7285 9.39666C12.2418 9.88333 11.9991 10.4733 12.0002 11.1667C12.0002 11.8611 12.2435 12.4517 12.7302 12.9383C13.2168 13.425 13.8068 13.6678 14.5002 13.6667ZM11.1668 22C11.8613 22 12.4518 21.7567 12.9385 21.27C13.4252 20.7833 13.6679 20.1933 13.6668 19.5C13.6668 18.8056 13.4235 18.215 12.9368 17.7283C12.4502 17.2417 11.8602 16.9989 11.1668 17C10.4724 17 9.88183 17.2433 9.39516 17.73C8.9085 18.2167 8.66572 18.8067 8.66683 19.5C8.66683 20.1944 8.91016 20.785 9.39683 21.2717C9.8835 21.7583 10.4735 22.0011 11.1668 22ZM22.0002 23.6667C22.4724 23.6667 22.8685 23.5067 23.1885 23.1867C23.5085 22.8667 23.6679 22.4711 23.6668 22C23.6668 21.5278 23.5068 21.1317 23.1868 20.8117C22.8668 20.4917 22.4713 20.3322 22.0002 20.3333C21.5279 20.3333 21.1318 20.4933 20.8118 20.8133C20.4918 21.1333 20.3324 21.5289 20.3335 22C20.3335 22.4722 20.4935 22.8683 20.8135 23.1883C21.1335 23.5083 21.5291 23.6678 22.0002 23.6667ZM17.0002 33.6667C14.6946 33.6667 12.5279 33.2289 10.5002 32.3533C8.47239 31.4778 6.7085 30.2906 5.2085 28.7917C3.7085 27.2917 2.52127 25.5278 1.64683 23.5C0.772385 21.4722 0.334607 19.3056 0.333496 17C0.333496 14.6667 0.833496 12.3889 1.8335 10.1667C2.8335 7.94444 4.22961 6.02777 6.02183 4.41666C7.81183 2.80555 9.93572 1.62499 12.3935 0.874994C14.8513 0.124994 17.5391 0.0555499 20.4568 0.666661C20.2068 1.91666 20.2902 3.09055 20.7068 4.18833C21.1235 5.28611 21.7485 6.20944 22.5818 6.95833C23.4152 7.70833 24.4013 8.22222 25.5402 8.5C26.6791 8.77777 27.8735 8.70833 29.1235 8.29166C28.2624 10.2083 28.4152 11.8472 29.5818 13.2083C30.7485 14.5694 32.0824 15.2778 33.5835 15.3333C33.8335 17.8056 33.5696 20.1528 32.7918 22.375C32.0141 24.5972 30.8679 26.5417 29.3535 28.2083C27.8402 29.875 26.0207 31.2017 23.8952 32.1883C21.7696 33.175 19.4713 33.6678 17.0002 33.6667Z" fill="#FF7100"></path>
        </svg>
        <p class="max-w-2xl">By clicking “Accept Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.</p>
      </div>
      <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 bg-orange-500 border border-orange-600 shadow font-bold font-heading text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">Accept Cookies</a>
    </div>
  </div>
</div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Cookies Component Generator

Tailwind Component #809

Tailwind CSS

Solstice

<section class="py-24 bg-orange-100">
  <div class="container mx-auto px-4 relative">
    <div class="flex justify-center">
      <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>
    </div>
    <h1 class="text-center text-4xl lg:text-5xl font-bold font-heading mb-20 max-w-sm lg:max-w-lg mx-auto">Join 14K people embrace fun learning</h1>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="bg-orange-500 rounded-3xl flex flex-wrap items-start p-4 h-full">
          <div class="bg-orange-100 rounded-xl px-8 pt-5 mb-4">
            <img src="solstice-assets/images/newsletter/man-picture.png" alt="">
          </div>
          <div class="bg-orange-300 rounded-xl px-8 pt-5 mt-auto ml-auto">
            <img src="solstice-assets/images/newsletter/woman-picture.png" alt="">
          </div>
        </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 Newsletter Component Generator

Tailwind Component #810

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="relative w-full max-w-xl mx-auto" style="height:600px;">
          <div class="hidden md:block lg:hidden xl:block absolute inset-0 rounded-full bg-orange-400"></div>
          <div class="hidden sm:block absolute rounded-full left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-orange-300" style="width:450px;height:450px;"></div>
          <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full sm:w-96 h-96">
            <div class="bg-white rounded-2xl pl-4 h-full flex flex-col">
              <div class="py-4">
                <div class="relative">
                  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
                    <rect width="32" height="32" rx="8" fill="#FF7100"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M28 14L28 9C28 8.44772 27.5523 8 27 8L24 8C23.4477 8 23 8.44772 23 9L23 13C23 16.3137 20.3137 19 17 19L13 19C12.4477 19 12 19.4477 12 20L12 23C12 23.5523 12.4477 24 13 24L18 24C23.5228 24 28 19.5228 28 14Z" fill="white"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M4 18L4 23C4 23.5523 4.44772 24 5 24L8 24C8.55228 24 9 23.5523 9 23L9 19C9 15.6863 11.6863 13 15 13L19 13C19.5523 13 20 12.5523 20 12L20 9C20 8.44771 19.5523 8 19 8L14 8C8.47715 8 4 12.4772 4 18Z" fill="white"></path>
                  </svg>
                  <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
                    <div class="flex items-center gap-2">
                      <h2 class="font-medium whitespace-nowrap">Study Session</h2>
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M8 11.5667C8.60015 11.5667 9.08666 11.0802 9.08666 10.48C9.08666 9.87986 8.60015 9.39334 8 9.39334C7.39985 9.39334 6.91333 9.87986 6.91333 10.48C6.91333 11.0802 7.39985 11.5667 8 11.5667Z" fill="#B8B8B8"></path>
                        <path d="M11.2534 6.80001H11.7289L12.1247 6.84948C12.985 6.95702 13.4426 7.2132 13.7161 7.60692C14.0112 8.03176 14.1667 8.71789 14.1667 9.86001V11.1C14.1667 12.4491 13.9529 13.1568 13.5548 13.5548C13.1568 13.9528 12.4491 14.1667 11.1 14.1667H4.90004C3.55097 14.1667 2.8433 13.9528 2.44526 13.5548C2.04722 13.1568 1.83337 12.4491 1.83337 11.1V9.86001C1.83337 8.71789 1.98893 8.03176 2.28403 7.60692C2.55751 7.2132 3.01507 6.95702 3.87539 6.84948L4.31337 6.79473V6.79334H4.40004V6.80001H4.90004H11.1H11.1004H11.1007H11.101H11.1013H11.1016H11.1019H11.1022H11.1025H11.1028H11.1032H11.1035H11.1038H11.1041H11.1044H11.1047H11.105H11.1053H11.1056H11.106H11.1063H11.1066H11.1069H11.1072H11.1075H11.1078H11.1081H11.1084H11.1087H11.109H11.1093H11.1097H11.11H11.1103H11.1106H11.1109H11.1112H11.1115H11.1118H11.1121H11.1124H11.1127H11.113H11.1133H11.1137H11.114H11.1143H11.1146H11.1149H11.1152H11.1155H11.1158H11.1161H11.1164H11.1167H11.117H11.1173H11.1176H11.1179H11.1182H11.1185H11.1188H11.1191H11.1194H11.1198H11.1201H11.1204H11.1207H11.121H11.1213H11.1216H11.1219H11.1222H11.1225H11.1228H11.1231H11.1234H11.1237H11.124H11.1243H11.1246H11.1249H11.1252H11.1255H11.1258H11.1261H11.1264H11.1267H11.127H11.1273H11.1276H11.1279H11.1282H11.1285H11.1288H11.1291H11.1294H11.1297H11.13H11.1303H11.1306H11.1309H11.1312H11.1315H11.1318H11.1321H11.1324H11.1327H11.133H11.1333H11.1336H11.1339H11.1342H11.1345H11.1348H11.1351H11.1354H11.1357H11.136H11.1363H11.1366H11.1369H11.1372H11.1375H11.1378H11.1381H11.1384H11.1387H11.139H11.1393H11.1396H11.1399H11.1402H11.1405H11.1408H11.1411H11.1414H11.1417H11.142H11.1423H11.1426H11.1429H11.1432H11.1435H11.1438H11.1441H11.1443H11.1446H11.1449H11.1452H11.1455H11.1458H11.1461H11.1464H11.1467H11.147H11.1473H11.1476H11.1479H11.1482H11.1485H11.1488H11.1491H11.1494H11.1497H11.15H11.1503H11.1506H11.1509H11.1512H11.1514H11.1517H11.152H11.1523H11.1526H11.1529H11.1532H11.1535H11.1538H11.1541H11.1544H11.1547H11.155H11.1553H11.1556H11.1559H11.1562H11.1565H11.1568H11.157H11.1573H11.1576H11.1579H11.1582H11.1585H11.1588H11.1591H11.1594H11.1597H11.16H11.1603H11.1606H11.1609H11.1612H11.1615H11.1618H11.162H11.1623H11.1626H11.1629H11.1632H11.1635H11.1638H11.1641H11.1644H11.1647H11.165H11.1653H11.1656H11.1659H11.1662H11.1664H11.1667H11.167H11.1673H11.1676H11.1679H11.1682H11.1685H11.1688H11.1691H11.1694H11.1697H11.17H11.1703H11.1706H11.1708H11.1711H11.1714H11.1717H11.172H11.1723H11.1726H11.1729H11.1732H11.1735H11.1738H11.1741H11.1744H11.1747H11.1749H11.1752H11.1755H11.1758H11.1761H11.1764H11.1767H11.177H11.1773H11.1776H11.1779H11.1782H11.1785H11.1788H11.1791H11.1793H11.1796H11.1799H11.1802H11.1805H11.1808H11.1811H11.1814H11.1817H11.182H11.1823H11.1826H11.1829H11.1832H11.1834H11.1837H11.184H11.1843H11.1846H11.1849H11.1852H11.1855H11.1858H11.1861H11.1864H11.1867H11.187H11.1873H11.1876H11.1878H11.1881H11.1884H11.1887H11.189H11.1893H11.1896H11.1899H11.1902H11.1905H11.1908H11.1911H11.1914H11.1917H11.192H11.1922H11.1925H11.1928H11.1931H11.1934H11.1937H11.194H11.1943H11.1946H11.1949H11.1952H11.1955H11.1958H11.1961H11.1964H11.1967H11.197H11.1972H11.1975H11.1978H11.1981H11.1984H11.1987H11.199H11.1993H11.1996H11.1999H11.2002H11.2005H11.2008H11.2011H11.2014H11.2017H11.202H11.2023H11.2026H11.2029H11.2031H11.2034H11.2037H11.204H11.2043H11.2046H11.2049H11.2052H11.2055H11.2058H11.2061H11.2064H11.2067H11.207H11.2073H11.2076H11.2079H11.2082H11.2085H11.2088H11.2091H11.2094H11.2097H11.21H11.2103H11.2106H11.2108H11.2111H11.2114H11.2117H11.212H11.2123H11.2126H11.2129H11.2132H11.2135H11.2138H11.2141H11.2144H11.2147H11.215H11.2153H11.2156H11.2159H11.2162H11.2165H11.2168H11.2171H11.2174H11.2177H11.218H11.2183H11.2186H11.2189H11.2192H11.2195H11.2198H11.2201H11.2204H11.2207H11.221H11.2213H11.2216H11.2219H11.2222H11.2225H11.2228H11.2231H11.2234H11.2237H11.224H11.2243H11.2246H11.2249H11.2252H11.2255H11.2258H11.2261H11.2264H11.2267H11.227H11.2273H11.2276H11.2279H11.2282H11.2285H11.2288H11.2291H11.2294H11.2297H11.23H11.2303H11.2306H11.2309H11.2312H11.2315H11.2318H11.2321H11.2324H11.2327H11.2331H11.2334H11.2337H11.234H11.2343H11.2346H11.2349H11.2352H11.2355H11.2358H11.2361H11.2364H11.2367H11.237H11.2373H11.2376H11.2379H11.2382H11.2385H11.2388H11.2392H11.2395H11.2398H11.2401H11.2404H11.2407H11.241H11.2413H11.2416H11.2419H11.2422H11.2425H11.2428H11.2431H11.2434H11.2438H11.2441H11.2444H11.2447H11.245H11.2453H11.2456H11.2459H11.2462H11.2465H11.2468H11.2472H11.2475H11.2478H11.2481H11.2484H11.2487H11.249H11.2493H11.2496H11.2499H11.2503H11.2506H11.2509H11.2512H11.2515H11.2518H11.2521H11.2524H11.2527H11.2531H11.2534ZM5.48671 10.48C5.48671 11.8617 6.60949 12.9933 8.00004 12.9933C9.38952 12.9933 10.5134 11.8695 10.5134 10.48C10.5134 9.0972 9.38285 7.96668 8.00004 7.96668C6.61831 7.96668 5.48671 9.08946 5.48671 10.48Z" fill="#B8B8B8" stroke="#B8B8B8"></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 Newsletter Component Generator

Tailwind Component #811

Tailwind CSS

Solstice

<section class="py-24 bg-orange-500" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container mx-auto px-4">
    <h1 class="uppercase text-white text-4xl lg:text-6xl font-bold font-heading text-center mb-4">FAQ</h1>
    <p class="text-center text-lg text-white mb-16">Here you will find the answers to the frequently asked questions.</p>
    <div class="flex justify-center flex-wrap gap-6 mb-10">
      <a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" :class="{ 'bg-orange-500 border border-white text-white hover:bg-orange-400 focus:ring focus:ring-orange-200': tab == $refs.tab1.textContent, 'bg-white border border-gray-200 hover:bg-gray-50 focus:ring focus:ring-orange-200': tab != $refs.tab1.textContent }" 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-white shadow font-bold font-heading text-white hover:bg-orange-400 focus:ring focus:ring-orange-200 transition duration-200" href="#">General</a>
      <a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" :class="{ 'bg-orange-500 border border-white text-white hover:bg-orange-400 focus:ring focus:ring-orange-200': tab == $refs.tab2.textContent, 'bg-white border border-gray-200 hover:bg-gray-50 focus:ring focus:ring-orange-200': tab != $refs.tab2.textContent }" class="h-14 inline-flex items-center justify-center w-full sm:w-auto text-center py-4 px-6 rounded-full bg-white border border-white shadow font-bold font-heading text-black hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Community</a>
      <a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" :class="{ 'bg-orange-500 border border-white text-white hover:bg-orange-400 focus:ring focus:ring-orange-200': tab == $refs.tab3.textContent, 'bg-white border border-gray-200 hover:bg-gray-50 focus:ring focus:ring-orange-200': tab != $refs.tab3.textContent }" class="h-14 inline-flex items-center justify-center w-full sm:w-auto text-center py-4 px-6 rounded-full bg-white border border-white shadow font-bold font-heading text-black hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Pricing</a>
    </div>
    <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="border border-orange-400 rounded-3xl mb-3 p-6 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="text-orange-50 hover:text-orange-100 transition duration-200 w-8 h-8" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M16 2.66669C8.63586 2.66669 2.66663 8.63592 2.66663 16C2.66663 23.3641 8.63586 29.3334 16 29.3334C23.3641 29.3334 29.3333 23.3641 29.3333 16C29.3333 8.63592 23.3641 2.66669 16 2.66669ZM17.0256 11.8975C17.0256 11.6254 16.9175 11.3646 16.7252 11.1722C16.5329 10.9799 16.272 10.8718 16 10.8718C15.7279 10.8718 15.4671 10.9799 15.2747 11.1722C15.0824 11.3646 14.9743 11.6254 14.9743 11.8975V14.9744H11.8974C11.6254 14.9744 11.3645 15.0824 11.1722 15.2748C10.9798 15.4671 10.8718 15.728 10.8718 16C10.8718 16.272 10.9798 16.5329 11.1722 16.7253C11.3645 16.9176 11.6254 17.0257 11.8974 17.0257H14.9743V20.1026C14.9743 20.3746 15.0824 20.6355 15.2747 20.8278C15.4671 21.0202 15.7279 21.1282 16 21.1282C16.272 21.1282 16.5329 21.0202 16.7252 20.8278C16.9175 20.6355 17.0256 20.3746 17.0256 20.1026V17.0257H20.1025C20.3745 17.0257 20.6354 16.9176 20.8278 16.7253C21.0201 16.5329 21.1282 16.272 21.1282 16C21.1282 15.728 21.0201 15.4671 20.8278 15.2748C20.6354 15.0824 20.3745 14.9744 20.1025 14.9744H17.0256V11.8975Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
      <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
        <p class="mt-2 text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et tincidunt est. Duis odio eros, mattis id elit vitae, molestie tempus massa. Vestibulum varius risus quis erat egestas, et tincidunt metus vestibulum.</p>
      </div>
    </div>
    <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="border border-orange-400 rounded-3xl mb-3 p-6 cursor-pointer">
      <div class="flex items-center justify-between gap-6">

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

Tailwind CSS

Solstice

<section class="py-24 bg-orange-500">
  <div class="container mx-auto px-4">
    <h1 class="text-center text-white text-5xl lg:text-6xl font-bold font-heading mb-6">Pricing</h1>
    <p class="text-white text-lg text-center mb-10 max-w-lg mx-auto">Simple pricing that fits for everyone for the price of a cup of coffee.Start for free, no credit card required.</p>
    <div class="flex flex-wrap justify-center gap-4 mb-16">
      <div class="flex flex-wrap items-center gap-4">
        <p class="text-white text-lg font-bold font-heading">Monthly</p>
        <div class="p-1 w-14 h-8 bg-purple-900 rounded-full">
          <div class="relative">
            <input class="custom-switch-1 opacity-0 absolute z-10 h-8 w-14 top-0 left-0" type="checkbox">
            <div class="absolute left-0 transform w-6 h-6 bg-white rounded-full"></div>
          </div>
        </div>
        <p class="text-white text-lg font-bold font-heading">Annually</p>
      </div>
      <div class="inline-block px-4 py-2 rounded-full bg-orange-50 text-orange-700">SAVE 15% with annual billing</div>
    </div>
    <div class="flex flex-wrap mb-24 -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="border border-gray-200 bg-white rounded-3xl px-8 lg:px-10 pb-14 pt-10 h-full">
          <h2 class="text-3xl font-bold font-heading mb-6">Free</h2>
          <div class="flex items-center gap-4 flex-wrap mb-6">
            <h2 class="text-6xl font-bold font-heading">$0</h2>
            <p class="text-xl font-medium">per month</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 Pricing Component Generator

Tailwind Component #813

Tailwind CSS

Solstice

<section class="bg-orange-500 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="relative mb-32">
      <div class="hidden lg:block absolute top-0 left-12">
        <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_243_16525)" stroke="#FF8A0A"></path>
          <defs><linearGradient id="paint0_linear_243_16525" 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 lg:block absolute top-0 right-12">
        <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_243_16524)" stroke="#FF8A0A"></path>
          <defs><linearGradient id="paint0_linear_243_16524" 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">
        <h1 class="text-white text-center text-5xl lg:text-7xl font-bold font-heading max-w-lg lg:max-w-3xl mx-auto pt-14 pb-32">On a mission to make learning fun</h1>
        <div class="border border-orange-100 bg-orange-50 rounded-3xl flex flex-wrap">
          <div class="w-full md:w-1/2 lg:w-1/4 py-8">
            <div class="md:border-r border-orange-100 px-12">
              <p class="text-gray-600 mb-2 text-center">Founded</p>
              <h2 class="text-4xl lg:text-5xl font-semibold text-center">2023</h2>
            </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 About Component Generator

Tailwind Component #814

Tailwind CSS

Solstice

<section class="py-24 relative overflow-hidden bg-orange-500" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 5 }">
  <div class="container mx-auto px-4">
    <h1 class="text-white text-4xl lg:text-5xl text-center font-bold font-heading max-w-md lg:max-w-xl mx-auto mb-24">For those seeking an enjoyable way to learn</h1>
    <div class="h-96 mb-32 lg:mb-16">
      <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -mx-4">
        <div x-ref="slide1" class="flex-shrink-0 w-full max-w-sm px-4">
          <div class="bg-white border border-gray-100 shadow rounded-3xl p-8">
            <div class="flex items-center flex-wrap gap-4 mb-20">
              <div class="bg-orange-50 rounded-xl overflow-hidden">
                <img src="solstice-assets/images/testimonials/man-avatar3.png" alt="">
              </div>
              <div class="p-2 rounded-lg bg-gray-50 bg-opacity-50">
                <p>
                  <span class="font-bold font-heading">Ethan Maynard,</span>
                  <span></span>
                  <span class="text-gray-400">Student</span>
                </p>
              </div>
            </div>
            <p class="text-gray-700 text-lg">“Yesterday I had my first day to study. What a great experience learning something so useful in simple ways!.”</p>
          </div>
        </div>
        <div x-ref="slide2" class="flex-shrink-0 w-full max-w-sm px-4">
          <div class="bg-white border border-gray-100 shadow rounded-3xl p-8">

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

Tailwind CSS

Solstice

<section class="py-24 bg-orange-500">
  <div class="container mx-auto px-4">
    <div class="inline-block py-1 px-2 rounded-md bg-orange-400 text-white text-sm font-medium mb-4">Events</div>
    <h1 class="text-white text-4xl lg:text-5xl font-bold font-heading mb-18 max-w-lg">Engage in our weekly online events</h1>
    <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 #816

Tailwind CSS

Solstice

<section class="overflow-hidden">
  <div class="bg-orange-200 pt-20 pb-80 px-10 relative">
    <div class="absolute left-1/2 top-0 transform -translate-x-1/2 flex gap-6">
      <div class="mt-20 rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(255, 224, 165, 0.00) 0%, rgba(255, 224, 165, 0.50) 100%);"></div>
      <div class="rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(255, 224, 165, 0.00) 0%, rgba(255, 224, 165, 0.50) 100%);"></div>
      <div class="rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(255, 224, 165, 0.00) 0%, rgba(255, 224, 165, 0.50) 100%);"></div>
      <div class="mt-20 rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(255, 224, 165, 0.00) 0%, rgba(255, 224, 165, 0.50) 100%);"></div>
    </div>
    <div class="relative z-10">
      <p class="uppercase text-center font-bold font-heading text-sm text-orange-500 mb-6">Blog</p>
      <h1 class="text-center font-bold font-heading text-4xl lg:text-6xl max-w-md lg:max-w-4xl mx-auto pb-32 lg:pb-0">Discover the latest news, stories &amp; insights</h1>
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <a class="bg-white border border-gray-100 hover:border-orange-500 transition duration-200 shadow rounded-3xl transform -translate-y-1/2 flex flex-wrap" href="#">
      <div class="w-full lg:w-1/2 px-8 lg:px-16 py-8">
        <div class="flex flex-col justify-center items-start h-full">
          <div class="py-1 px-3 rounded-md border border-gray-100 mb-4 text-sm font-medium text-gray-700">Productivity</div>
          <h2 class="text-2xl lg:text-3xl font-bold font-heading mb-4 max-w-sm">How to Learn Anything Faster and Master It</h2>
          <div class="flex flex-wrap items-center gap-3">
            <p class="text-gray-500 text-sm">20 Jul 2023</p>
            <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none"><circle cx="2" cy="2" r="2" fill="#B8B8B8"></circle></svg>
            <p class="text-gray-500 text-sm">4 min read</p>
          </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 Blog Component Generator

Tailwind Component #817

Tailwind CSS

Solstice

<section class="overflow-hidden py-24 relative">
  <div class="absolute top-0 left-0 w-full bg-orange-500 pb-48">
    <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, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
      <div class="rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
      <div class="rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
      <div class="hidden lg:block mt-20 rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
    </div>
  </div>
  <div class="relative z-10">
    <div class="container mx-auto px-4">
      <div class="flex items-center gap-3 flex-wrap mb-4">
        <span class="text-white">17 Jul 2023</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="4" height="5" viewBox="0 0 4 5" fill="none"><circle cx="2" cy="2.66669" r="2" fill="white"></circle></svg>
        <span class="text-white">4 min read</span>
      </div>
      <h1 class="text-3xl lg:text-5xl font-bold mb-8 max-w-xl lg:max-w-3xl text-white">The Art and Science of Design Development: Crafting Digital Experiences</h1>
      <div class="flex -mx-4 gap-8 mb-8">
        <div class="flex-shrink-0 p-4">
          <img class="rounded-2xl object-cover" style="width:480px;height:720px;" src="solstice-assets/images/blog/post-picture2.png" alt="">
        </div>
        <div class="flex-shrink-0 p-4">
          <img class="rounded-2xl object-cover" style="width:720px;height:480px;" src="solstice-assets/images/blog/post-picture3.png" alt="">
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Content Component Generator

Tailwind Component #818

Tailwind CSS

Solstice

<section class="bg-orange-500 pb-32">
  <div class="border-b border-orange-300 pb-16 pt-24">
    <div class="container mx-auto px-4">
      <div class="rounded-md bg-orange-50 border border-orange-100 px-2 py-1 uppercase text-orange-500 text-sm font-medium inline-block mb-4">CAREERS</div>
      <h1 class="text-white text-3xl lg:text-5xl font-bold font-heading">Careers at Solstice</h1>
    </div>
  </div>
  <div class="container mx-auto px-4">
    <h2 class="text-white text-3xl font-bold font-heading mb-4 mt-16">What we’re building</h2>
    <div class="flex flex-wrap mb-16 -mx-4">
      <div class="w-full lg:w-2/3 p-4">
        <p class="text-orange-50">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>
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <p class="text-orange-50">By bringing structure, access, and efficiency to teamwork. 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>
      </div>
    </div>
    <div class="flex flex-wrap mb-4 -mx-4">
      <div class="w-full lg:w-2/3 p-4">
        <img class="w-full object-cover rounded-3xl" src="solstice-assets/images/careers/picture1-large.png" alt="">
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <img class="w-full object-cover rounded-3xl" style="height:550px;" src="solstice-assets/images/careers/picture1.png" alt="">
      </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Careers Component Generator

Tailwind Component #819

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-24">Discover our features</h1>
    <div class="flex flex-wrap justify-center -mx-4">
      <div class="w-full sm:w-auto p-4">
        <img src="solstice-assets/images/features/feature1-light.png" alt="">
      </div>
      <div class="w-full sm:w-auto p-4">
        <img src="solstice-assets/images/features/feature2-secondary.png" alt="">
      </div>
    </div>
    <div class="flex flex-wrap justify-center -mx-4">
      <div class="w-full sm:w-auto p-4">
        <img src="solstice-assets/images/features/feature3-primary3.png" alt="">
      </div>
      <div class="w-full sm:w-auto p-4">
        <img src="solstice-assets/images/features/feature4-light.png" alt="">
      </div>
      <div class="w-full sm:w-auto p-4">
        <img src="solstice-assets/images/features/feature5-light.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 #820

Tailwind CSS

Solstice

<section class="py-24 bg-orange-500">
  <div class="container mx-auto px-4">
    <p class="text-center uppercase 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="px-4 lg:px-16 rounded-2xl bg-no-repeat bg-cover" style="background-image:url('solstice-assets/images/how-it-works/picture1.png')">
      <div class="w-full lg:w-1/3 rounded-b-2xl bg-white bg-opacity-30 h-6"></div>
      <div class="py-4">
        <div class="w-full lg:w-1/3 bg-white p-6 rounded-2xl mb-4">
          <div class="flex items-center gap-4 flex-wrap">
            <div class="w-10 h-10 rounded-full bg-purple-900 flex items-center justify-center">
              <span class="text-lg text-white font-bold font-heading">1</span>
            </div>
            <h2 class="text-xl font-bold font-heading">Create Account</h2>
          </div>
        </div>
        <div class="w-full lg:w-1/3 bg-white p-6 rounded-2xl mx-auto mb-4">
          <div class="flex items-center gap-4 flex-wrap">
            <div class="w-10 h-10 rounded-full bg-orange-50 flex items-center justify-center">
              <span class="text-lg font-bold font-heading">2</span>
            </div>
            <h2 class="text-xl font-bold font-heading">Join or Create Room</h2>
          </div>
        </div>
        <div class="w-full lg:w-1/3 bg-white p-6 rounded-2xl ml-auto mb-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 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 #801

Get the code for 13,400+ components

Tailwind Component #802

Get the code for 13,400+ components

Tailwind Component #803

Get the code for 13,400+ components

Tailwind Component #804

Get the code for 13,400+ components

Tailwind Component #805

Get the code for 13,400+ components

Tailwind Component #806

Get the code for 13,400+ components

Tailwind Component #807

Get the code for 13,400+ components

Tailwind Component #808

Get the code for 13,400+ components

Tailwind Component #809

Get the code for 13,400+ components

Tailwind Component #810

Get the code for 13,400+ components

Tailwind Component #811

Get the code for 13,400+ components

Tailwind Component #812

Get the code for 13,400+ components

Tailwind Component #813

Get the code for 13,400+ components

Tailwind Component #814

Get the code for 13,400+ components

Tailwind Component #815

Get the code for 13,400+ components

Tailwind Component #816

Get the code for 13,400+ components

Tailwind Component #817

Get the code for 13,400+ components

Tailwind Component #818

Get the code for 13,400+ components

Tailwind Component #819

Get the code for 13,400+ components

Tailwind Component #820

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