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

Tailwind CSS

Solstice

<section class="overflow-hidden bg-purple-900">
  <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 max-w-xs lg:max-w-md">How can we help you today?</h1>
          <p class="text-purple-200 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-white text-xl font-bold font-heading">Company HQ</h2>
          </div>
          <p class="text-purple-200 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 #702

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-orange-400 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 #703

Tailwind CSS

Solstice

<section class="py-24 overflow-hidden bg-purple-900" 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-white text-4xl lg:text-5xl font-bold font-heading mb-6">What our users say</h1>
          <p class="text-white 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-purple-700 bg-purple-900 hover:bg-purple-800 p-3 focus:ring focus:ring-purple-800 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="white" 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-purple-700 bg-purple-900 hover:bg-purple-800 p-3 focus:ring focus:ring-purple-800 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="white" 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 #704

Tailwind CSS

Solstice

<section class="py-24 bg-purple-900">
  <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 text-white 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-200 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 #705

Tailwind CSS

Solstice

<section class="py-24 bg-purple-900">
  <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="#FFF2D6" stroke-width="3" stroke-miterlimit="10"></path>
            <path d="M7.41943 26.0001C7.41943 21.0564 9.37703 16.3152 12.8616 12.8195C16.3461 9.32374 21.0722 7.35986 26.0001 7.35986C30.928 7.35986 35.654 9.32374 39.1386 12.8195C42.6231 16.3152 44.5807 21.0564 44.5807 26.0001" stroke="#FF7100" stroke-width="3" stroke-miterlimit="10"></path>
            <path d="M12.6006 26.0001C12.6006 22.4463 14.0123 19.0381 16.5252 16.5252C19.0381 14.0123 22.4463 12.6006 26.0001 12.6006C29.5539 12.6006 32.9621 14.0123 35.475 16.5252C37.9879 19.0381 39.3996 22.4463 39.3996 26.0001" stroke="#FFC96D" stroke-width="3" stroke-miterlimit="10"></path>
          </svg>
          <p class="text-white 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-orange-100 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-white 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-purple-200 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 #706

Tailwind CSS

Solstice

<section class="py-24 bg-purple-900">
  <div class="bg-purple-800 border-t border-b border-purple-700">
    <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-purple-700">
            <h2 class="text-white text-center text-6xl font-bold font-heading mb-2">94K</h2>
            <p class="text-gray-50 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-purple-700">
            <h2 class="text-white text-center text-6xl font-bold font-heading mb-2">352K</h2>
            <p class="text-gray-50 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-white text-center text-6xl font-bold font-heading mb-2">352K</h2>
            <p class="text-gray-50 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 #707

Tailwind CSS

Solstice

<section class="py-24 relative overflow-hidden bg-orange-100" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 5 }">
  <div class="container mx-auto px-4">
    <h1 class="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 #708

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">
        <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-200"></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 #709

Tailwind CSS

Solstice

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Content Component Generator

Tailwind Component #710

Tailwind CSS

Solstice

<section class="overflow-hidden">
  <div class="bg-purple-900 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(111, 11, 69, 0.00) 0%, #6F0B45 100%);"></div>
      <div class="rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(111, 11, 69, 0.00) 0%, #6F0B45 100%);"></div>
      <div class="rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(111, 11, 69, 0.00) 0%, #6F0B45 100%);"></div>
      <div class="mt-20 rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(111, 11, 69, 0.00) 0%, #6F0B45 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 text-white 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 #711

Tailwind CSS

Solstice

<section class="py-24 bg-orange-100" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container mx-auto px-4">
    <h1 class="uppercase text-4xl lg:text-6xl font-bold font-heading text-center mb-4">FAQ</h1>
    <p class="text-center text-lg text-gray-600 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-orange-600 text-white hover:bg-orange-600 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-orange-600 shadow font-bold font-heading text-white hover:bg-orange-600 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-orange-600 text-white hover:bg-orange-600 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-gray-200 shadow font-bold font-heading 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-orange-600 text-white hover:bg-orange-600 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-gray-200 shadow font-bold font-heading 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-200 rounded-3xl mb-3 p-6 cursor-pointer">
      <div class="flex items-center justify-between gap-6">
        <h2 class="text-lg font-semibold">What is Solstice? What is it for?</h2>
        <a class="text-orange-500 hover:text-orange-600 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">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-200 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 #712

Tailwind CSS

Solstice

<section class="bg-orange-100 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-500 px-2 py-1 uppercase text-white text-sm font-medium inline-block mb-4">CAREERS</div>
      <h1 class="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-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-gray-600">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-gray-600">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 #713

Tailwind CSS

Solstice

<section class="py-24 bg-orange-50">
  <div class="container mx-auto px-4">
    <h1 class="text-center text-5xl lg:text-6xl font-bold font-heading mb-6">Pricing</h1>
    <p class="text-gray-600 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-lg font-bold font-heading">Monthly</p>
        <div class="p-1 w-14 h-8 bg-orange-500 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-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 #714

Tailwind CSS

Solstice

<section class="overflow-hidden py-12 bg-white">
  <div class="container mx-auto px-4">
    <div class="bg-orange-500 rounded-3xl relative overflow-hidden" style="height:420px;">
      <div class="hidden md:block absolute top-10 left-1/2 transform -translate-x-1/2 z-10">
        <div class="flex gap-3"><a class="py-3 px-5 rounded-full text-center bg-white border border-orange-100 shadow text-sm font-semibold hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Create room</a><a class="py-3 px-5 rounded-full text-center bg-white border border-orange-100 shadow text-sm font-semibold hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Join group</a></div>
      </div>
      <div class="absolute top-0 left-1/2 transform -translate-x-1/2">
        <svg xmlns="http://www.w3.org/2000/svg" width="242" height="132" viewBox="0 0 242 132" fill="none">
          <path d="M1 132V91.7175C1 78.4627 11.7452 67.7175 25 67.7175H217C230.255 67.7175 241 56.9723 241 43.7175V0" stroke="#FFC96D" stroke-width="1.5"></path>
        </svg>
      </div>
      <div class="absolute bottom-0 right-0 left-0 md:left-24 md:top-32 z-20 h-full md:h-auto">
        <div class="bg-white rounded-tl-3xl pl-4 pt-6 w-full h-full lg:h-auto">
          <div class="flex items-center flex-wrap gap-4 mb-6">
            <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>
            <h2 class="font-medium">Study Room</h2>
          </div>
          <div class="bg-orange-50 rounded-tl-3xl pt-3 pl-3 pb-4 md:pb-16 pr-8 overflow-hidden h-full">
            <div class="flex items-start flex-wrap gap-8">
              <div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Utilities Component Generator

Tailwind Component #715

Tailwind CSS

Solstice

<section class="bg-orange-100 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_13383)" stroke="#FFE0A5"></path>
          <defs><linearGradient id="paint0_linear_243_13383" x1="0" y1="500" x2="500" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC96D"><stop offset="1" stop-color="#FFC96D" 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_13382)" stroke="#FFC96D"></path>
          <defs><linearGradient id="paint0_linear_243_13382" x1="499.998" y1="2.85805e-05" x2="8.49831" y2="500" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC96D"><stop offset="1" stop-color="#FFC96D" stop-opacity="0"></stop></stop></linearGradient></defs>
        </svg>
      </div>
      <div class="relative z-10">
        <h1 class="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 #716

Tailwind CSS

Solstice

<section class="py-24 bg-orange-100">
  <div class="container mx-auto px-4">
    <div class="inline-block py-1 px-2 rounded-md bg-orange-50 border border-orange-100 text-orange-500 text-sm font-medium mb-4">Events</div>
    <h1 class="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-gray-100 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 #717

Tailwind CSS

Solstice

<section class="py-24 lg:py-56 bg-orange-500">
  <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-orange-200 rounded-5xl py-24 px-6 lg:px-12 h-full flex flex-col justify-center">
          <h1 class="text-orange-100 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-white px-10 py-18">
          <p class="text-2xl font-bold font-heading mb-4">Sorry, that page could not be found.</p>
          <p class="text-gray-500 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 #718

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="flex flex-col justify-between h-full max-w-xl mx-auto">
          <div>
            <div class="px-2 py-1 rounded-md border border-orange-200 bg-orange-50 inline-flex items-center gap-2 mb-6">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                <path d="M8.5 1.215H3.5C2 1.215 1 2.215 1 3.715V6.715C1 8.215 2 9.215 3.5 9.215H5.5L7.725 10.695C8.055 10.915 8.5 10.68 8.5 10.28V9.215C10 9.215 11 8.215 11 6.715V3.715C11 2.215 10 1.215 8.5 1.215ZM7.75 5.625H4.25C4.045 5.625 3.875 5.455 3.875 5.25C3.875 5.045 4.045 4.875 4.25 4.875H7.75C7.955 4.875 8.125 5.045 8.125 5.25C8.125 5.455 7.955 5.625 7.75 5.625Z" fill="#FF7100"></path>
              </svg>
              <span class="text-orange-500 text-sm font-medium">Contact Support</span>
            </div>
            <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-200 mb-6">Submit your info and we’ll get back to you as soon as possible.</p>
          </div>
          <div class="bg-purple-900 rounded-3xl p-8">
            <h2 class="text-white text-2xl font-semibold mb-6 max-w-xs">Click here to report an incident</h2>
            <a class="w-full sm:w-auto h-12 inline-flex items-center justify-center gap-2 py-3 px-5 rounded-full bg-white border border-purple-700 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="M10.9261 14.2967L10.9457 14.2791L10.9633 14.2596C11.0647 14.1469 11.1612 14.0141 11.2308 13.8361C11.2923 13.6864 11.3333 13.515 11.3333 13.3334C11.3333 13.1492 11.2911 12.9756 11.2282 12.8244C11.164 12.6705 11.0747 12.5311 10.9633 12.4073L10.9457 12.3877L10.9261 12.3701C10.8023 12.2587 10.6629 12.1694 10.5089 12.1052C10.1859 11.9706 9.81406 11.9706 9.49099 12.1052C9.33705 12.1694 9.19764 12.2587 9.07381 12.3701L9.05425 12.3877L9.03665 12.4073C8.9252 12.5311 8.8359 12.6705 8.77175 12.8244C8.70878 12.9756 8.66663 13.1492 8.66663 13.3334C8.66663 13.5151 8.70762 13.6864 8.76915 13.8361C8.83871 14.0141 8.93524 14.1469 9.03665 14.2596L9.05425 14.2791L9.07381 14.2967C9.19763 14.4082 9.33704 14.4975 9.49099 14.5616C9.64213 14.6246 9.81578 14.6667 9.99996 14.6667C10.1841 14.6667 10.3578 14.6246 10.5089 14.5616C10.6629 14.4975 10.8023 14.4082 10.9261 14.2967ZM2.16663 10.0001C2.16663 5.68456 5.68443 2.16675 9.99996 2.16675C14.3155 2.16675 17.8333 5.68456 17.8333 10.0001C17.8333 14.3156 14.3155 17.8334 9.99996 17.8334C5.68443 17.8334 2.16663 14.3156 2.16663 10.0001ZM9.99996 5.54175C9.38215 5.54175 8.87496 6.04894 8.87496 6.66675V10.8334C8.87496 11.4512 9.38215 11.9584 9.99996 11.9584C10.6178 11.9584 11.125 11.4512 11.125 10.8334V6.66675C11.125 6.04894 10.6178 5.54175 9.99996 5.54175Z" fill="#530031" stroke="#530031"></path>
              </svg>
              <span class="text-purple-900 text-sm font-semibold">Report</span>
            </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 Contact Component Generator

Tailwind Component #719

Tailwind CSS

Solstice

<section class="py-12 bg-orange-100">
  <div class="container mx-auto px-4">
    <div class="py-28 relative">
      <div class="hidden sm:block absolute top-6 left-0 bg-orange-600 rounded-xl px-6 pt-4">
        <img class="h-16 sm:h-20 md:h-auto" src="solstice-assets/images/cta/men-picture1.png" alt="">
      </div>
      <div class="absolute top-0 right-0 bg-purple-900 rounded-xl px-6 pt-4">
        <img class="h-16 sm:h-24 md:h-auto" src="solstice-assets/images/cta/woman-picture1.png" alt="">
      </div>
      <div class="absolute bottom-0 left-0 sm:left-24 bg-orange-300 rounded-xl px-6 pt-4">
        <img class="h-16 sm:h-24 md:h-auto" src="solstice-assets/images/cta/woman-picture2.png" alt="">
      </div>
      <div class="hidden sm:block absolute bottom-0 right-0 sm:right-24 bg-orange-200 rounded-xl px-6 pt-4">
        <img class="h-16 sm:h-20 md:h-auto" src="solstice-assets/images/cta/men-picture2.png" alt="">
      </div>
      <div class="relative z-10">
        <div class="flex justify-center mb-6">
          <svg xmlns="http://www.w3.org/2000/svg" width="68" height="34" viewBox="0 0 68 34" fill="none">
            <path d="M2 34C1.99977 29.7976 2.8273 25.6364 4.43533 21.7539C6.04336 17.8713 8.40039 14.3436 11.3718 11.3721C14.3433 8.40056 17.8709 6.04346 21.7533 4.43539C25.6358 2.82732 29.7969 1.99977 33.9991 2C51.6726 2 66 16.3261 66 34" stroke="#530031" stroke-width="4" stroke-miterlimit="10"></path>
            <path d="M9.22571 34.0001C9.22571 27.4085 11.8358 21.0869 16.4819 16.4259C21.128 11.765 27.4294 9.14648 33.9999 9.14648C40.5704 9.14648 46.8718 11.765 51.5179 16.4259C56.164 21.0869 58.7741 27.4085 58.7741 34.0001" stroke="#FF7100" stroke-width="4" stroke-miterlimit="10"></path>
            <path d="M16.1339 34C16.1339 29.2617 18.0162 24.7174 21.3667 21.3669C24.7173 18.0163 29.2616 16.134 33.9999 16.134C38.7383 16.134 43.2826 18.0163 46.6331 21.3669C49.9836 24.7174 51.8659 29.2617 51.8659 34" stroke="#FFC96D" stroke-width="4" stroke-miterlimit="10"></path>
          </svg>
        </div>
        <h1 class="text-4xl lg:text-5xl mb-10 font-bold font-heading text-center max-w-lg lg:max-w-3xl mx-auto">What are you waiting for?Join now and learn together!</h1>

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

Tailwind CSS

Solstice

<section class="py-24 overflow-hidden relative bg-orange-100">
  <p class="text-center text-lg font-medium text-purple-900 mb-10">Backed by leading education companies</p>
  <div class="h-28 mb-4 transform -translate-x-24">
    <div class="absolute left-1/2 transform -translate-x-1/2 flex gap-4">
      <div class="w-80 h-28 bg-white py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo-secondary1.png" alt="">
      </div>
      <div class="w-80 h-28 bg-white py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo-secondary2.png" alt="">
      </div>
      <div class="w-80 h-28 bg-white py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo-secondary3.png" alt="">
      </div>
      <div class="w-80 h-28 bg-white py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo-secondary4.png" alt="">
      </div>
      <div class="w-80 h-28 bg-white py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo-secondary5.png" alt="">
      </div>
    </div>
  </div>
  <div class="h-28 transform translate-x-24">
    <div class="absolute left-1/2 transform -translate-x-1/2 flex gap-4">
      <div class="w-80 h-28 bg-white py-8 px-10 flex items-center justify-center rounded-2xl">

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

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

Get the code for 13,400+ components

Tailwind Component #702

Get the code for 13,400+ components

Tailwind Component #703

Get the code for 13,400+ components

Tailwind Component #704

Get the code for 13,400+ components

Tailwind Component #705

Get the code for 13,400+ components

Tailwind Component #706

Get the code for 13,400+ components

Tailwind Component #707

Get the code for 13,400+ components

Tailwind Component #708

Get the code for 13,400+ components

Tailwind Component #709

Get the code for 13,400+ components

Tailwind Component #710

Get the code for 13,400+ components

Tailwind Component #711

Get the code for 13,400+ components

Tailwind Component #712

Get the code for 13,400+ components

Tailwind Component #713

Get the code for 13,400+ components

Tailwind Component #714

Get the code for 13,400+ components

Tailwind Component #715

Get the code for 13,400+ components

Tailwind Component #716

Get the code for 13,400+ components

Tailwind Component #717

Get the code for 13,400+ components

Tailwind Component #718

Get the code for 13,400+ components

Tailwind Component #719

Get the code for 13,400+ components

Tailwind Component #720

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