UI Components in Solstice library

Framework

UI Library

Components

Tailwind Component #61

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="40" height="40" viewBox="0 0 40 40" fill="none">
          <path d="M17.5 16.6667C18.1945 16.6667 18.785 16.4233 19.2717 15.9367C19.7583 15.45 20.0011 14.86 20 14.1667C20 13.4722 19.7567 12.8817 19.27 12.395C18.7833 11.9083 18.1933 11.6656 17.5 11.6667C16.8056 11.6667 16.215 11.91 15.7283 12.3967C15.2417 12.8833 14.9989 13.4733 15 14.1667C15 14.8611 15.2433 15.4517 15.73 15.9383C16.2167 16.425 16.8067 16.6678 17.5 16.6667ZM14.1667 25C14.8611 25 15.4517 24.7567 15.9383 24.27C16.425 23.7833 16.6678 23.1933 16.6667 22.5C16.6667 21.8056 16.4233 21.215 15.9367 20.7283C15.45 20.2417 14.86 19.9989 14.1667 20C13.4722 20 12.8817 20.2433 12.395 20.73C11.9083 21.2167 11.6656 21.8067 11.6667 22.5C11.6667 23.1944 11.91 23.785 12.3967 24.2717C12.8833 24.7583 13.4733 25.0011 14.1667 25ZM25 26.6667C25.4722 26.6667 25.8683 26.5067 26.1883 26.1867C26.5083 25.8667 26.6678 25.4711 26.6667 25C26.6667 24.5278 26.5067 24.1317 26.1867 23.8117C25.8667 23.4917 25.4711 23.3322 25 23.3333C24.5278 23.3333 24.1317 23.4933 23.8117 23.8133C23.4917 24.1333 23.3322 24.5289 23.3333 25C23.3333 25.4722 23.4933 25.8683 23.8133 26.1883C24.1333 26.5083 24.5289 26.6678 25 26.6667ZM20 36.6667C17.6945 36.6667 15.5278 36.2289 13.5 35.3533C11.4722 34.4778 9.70834 33.2906 8.20834 31.7917C6.70834 30.2917 5.52112 28.5278 4.64668 26.5C3.77223 24.4722 3.33445 22.3056 3.33334 20C3.33334 17.6667 3.83334 15.3889 4.83334 13.1667C5.83334 10.9444 7.22945 9.02777 9.02168 7.41666C10.8117 5.80555 12.9356 4.62499 15.3933 3.87499C17.8511 3.12499 20.5389 3.05555 23.4567 3.66666C23.2067 4.91666 23.29 6.09055 23.7067 7.18833C24.1233 8.28611 24.7483 9.20944 25.5817 9.95833C26.415 10.7083 27.4011 11.2222 28.54 11.5C29.6789 11.7778 30.8733 11.7083 32.1233 11.2917C31.2622 13.2083 31.415 14.8472 32.5817 16.2083C33.7483 17.5694 35.0822 18.2778 36.5833 18.3333C36.8333 20.8056 36.5695 23.1528 35.7917 25.375C35.0139 27.5972 33.8678 29.5417 32.3533 31.2083C30.84 32.875 29.0206 34.2017 26.895 35.1883C24.7695 36.175 22.4711 36.6678 20 36.6667Z" fill="#282828"></path>
        </svg>
        <p class="max-w-lg">By clicking “Allow”, you agree to the storing of cookies on your device to personalize your size experience.</p>
      </div>
      <div class="flex gap-4 flex-wrap w-full sm:w-auto"><a x-on:click.prevent="open = false" class="w-full sm:w-auto text-center h-14 inline-flex items-center justify-center py-4 px-6 rounded-full border border-gray-200 shadow font-bold font-heading hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Decline</a><a x-on:click.prevent="open = false" class="w-full sm:w-auto text-center h-14 inline-flex items-center justify-center py-4 px-6 rounded-full 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="#">Allow</a></div>
    </div>
  </div>
</div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Cookie Consent Banner with Decline and Allow Buttons

A horizontal, rounded cookie consent notice with a cookie icon, a short message about storing cookies to personalize the experience, and two action buttons: an outlined Decline button and a filled orange Allow button. It sits as a single bar on a light background.

Tailwind Component #62

Tailwind CSS

Solstice

<section class="py-24">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center justify-between -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <p class="text-lg font-semibold">Backed by leading education companies</p>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div class="flex flex-wrap items-center -mx-4">
          <div class="w-full md:w-1/2 xl:w-1/4 p-4">
            <img src="solstice-assets/images/logos/placeholder-logo-black1.png" alt="">
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 p-4">
            <img src="solstice-assets/images/logos/placeholder-logo-black2.png" alt="">
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 p-4">
            <img src="solstice-assets/images/logos/placeholder-logo-black3.png" alt="">
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 p-4">
            <img src="solstice-assets/images/logos/placeholder-logo-black4.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Social Proof Logo Strip with Investor Heading

A horizontal strip on a white background with a short text heading on the left and four placeholder company logos on the right, used to build trust by showing partner or backer brands. The layout is a single row with generous spacing between logos.

Tailwind Component #63

Tailwind CSS

Solstice

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Solstice Light Footer with Link Columns and Social Links

A light-background website footer displaying the Solstice logo, three link columns (Platform, Platform, Platform), a HIRING badge beside Careers, and circular social media follow links for Twitter, Instagram, and LinkedIn with a copyright line at the bottom. The layout arranges link columns horizontally on the left and social links stacked vertically on the right.

Tailwind Component #64

Tailwind CSS

Solstice

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Newsletter Subscribe Section with Email Form and App Preview

A split-layout newsletter signup section with a badge, heading, supporting text, email input, and orange subscribe button on the left, and an illustrative app preview with a note card and avatar overlay on a light peach circular backdrop on the right.

Tailwind Component #65

Tailwind CSS

Solstice

<section class="py-24">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 p-4">
        <div class="bg-orange-50 rounded-2xl py-6 px-4">
          <h2 class="text-orange-500 text-5xl lg:text-6xl font-bold font-heading text-center mb-4">101K+</h2>
          <p class="font-medium text-center">Users studying around the globe</p>
        </div>
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <div class="bg-orange-50 rounded-2xl py-6 px-4">
          <h2 class="text-orange-500 text-5xl lg:text-6xl font-bold font-heading text-center mb-4">352K</h2>
          <p class="font-medium text-center">Registered Users</p>
        </div>
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <div class="bg-orange-50 rounded-2xl py-6 px-4">
          <h2 class="text-orange-500 text-5xl lg:text-6xl font-bold font-heading text-center mb-4">94K</h2>
          <p class="font-medium text-center">Registered Users</p>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Three-Up Statistics Card Row with Orange Figures

A horizontal row of three equal light-cream cards, each showing a large orange statistic with a short descriptive label beneath it. The layout is a simple, evenly spaced row used to highlight key user metrics.

Tailwind Component #66

Tailwind CSS

Solstice

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

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

Solstice top navigation bar with logo, menu links, and Get Started button

A horizontal site header on a light background with the Solstice logo at left, centered navigation links including Platform and Resources dropdowns plus Features and Community, and an outlined Get Started button at right. A thin divider line sits below the bar.

Tailwind Component #67

Tailwind CSS

Solstice

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Join now and learn together CTA hero with profile cards

A light-background call-to-action hero section with a small eyebrow line, a large two-line heading 'Join now and learn together!', and an orange rounded 'Sign Up Now' button on the left. Two photo cards with name labels (Sophie and Armand) are positioned at the right side as decorative social proof.

Tailwind Component #68

Tailwind CSS

Solstice

<section class="pt-24 pb-11 overflow-hidden bg-purple-900">
  <div class="container mx-auto px-4">
    <h1 class="text-center text-white text-4xl lg:text-5xl font-bold font-heading mb-10">Oops. Page not found.</h1>
    <div class="flex justify-center mb-20"><a class="w-full sm:w-auto text-center h-14 inline-flex items-center justify-center py-4 px-6 rounded-full bg-white border border-gray-200 shadow text-sm font-semibold hover:bg-white focus:ring focus:ring-orange-200 transition duration-200" href="#">Back to Home</a></div>
    <div class="flex items-center justify-center gap-4 sm:gap-8 lg:gap-16">
      <div>
        <div class="bg-white bg-opacity-20 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24 mx-auto"></div>
        <div class="flex justify-between mb-2">
          <div class="bg-white bg-opacity-20 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></div>
          <div class="bg-white bg-opacity-20 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></div>
        </div>
        <div class="flex gap-1 lg:gap-2 mb-2">
          <div class="bg-white bg-opacity-20 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></div>
          <div class="bg-white bg-opacity-20 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></div>
          <div class="bg-white bg-opacity-20 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></div>
        </div>
        <div class="bg-white bg-opacity-20 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24 ml-auto"></div>
      </div>
      <div>
        <div class="flex gap-1 lg:gap-2 mb-2">
          <div class="bg-white bg-opacity-20 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></div>
          <div class="bg-white bg-opacity-20 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></div>
          <div class="bg-white bg-opacity-20 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></div>
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

404 Page Not Found Error Section with Back to Home Button

A centered error page on a dark maroon background showing the heading "Oops. Page not found.", a white pill-shaped "Back to Home" button, and a large 404 numeral rendered as grid of rounded tiles. The layout is a vertical stack with the heading and button above the decorative numerals.

Tailwind Component #69

Tailwind CSS

Solstice

<section class="overflow-hidden">
  <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">Contact us</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

Split-screen contact section with company address, help desk card, and contact form

A light split-screen contact section pairing a heading, company address, and technical help desk card on the left with a bordered "Get in touch" form on the right. The form includes first name, last name, email, and message fields plus an orange submit button and privacy policy note.

Tailwind Component #70

Tailwind CSS

Solstice

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #71

Tailwind CSS

Solstice

<section class="py-24">
  <div class="container mx-auto px-4">
    <h1 class="text-center text-4xl lg:text-5xl font-bold font-heading mb-4">Join our events</h1>
    <p class="text-center text-gray-600 text-lg mb-20">Engage in our weekly online events featuring mindfulness sessions, journaling, and fireside chats.</p>
    <div class="border border-gray-100 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

Tailwind Component #72

Tailwind CSS

Solstice

<section class="overflow-hidden py-12 bg-white">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap">
      <div class="w-full lg:w-1/3 p-4">
        <div class="bg-purple-900 rounded-3xl relative h-full mr-4 max-w-md left-1/2 transform -translate-x-1/2" style="height:340px;">
          <div class="absolute top-8 -right-8">
            <div class="bg-white w-full border border-orange-500 rounded-xl">
              <div class="px-4 py-3 border-b border-gray-50 flex items-center justify-between flex-wrap gap-4">
                <p class="text-gray-500 text-xs font-medium">Note</p>
                <a class="text-gray-200 hover:text-gray-400 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="M1.8335 8.00001C1.8335 4.60282 4.60297 1.83334 8.00016 1.83334C11.3974 1.83334 14.1668 4.60282 14.1668 8.00001C14.1668 11.3972 11.3974 14.1667 8.00016 14.1667C4.60297 14.1667 1.8335 11.3972 1.8335 8.00001ZM10.5937 10.5936C10.9823 10.205 10.9823 9.56839 10.5937 9.17979L9.41394 8.00001L10.5937 6.82023C10.9823 6.43163 10.9823 5.79505 10.5937 5.40646C10.2051 5.01786 9.56854 5.01786 9.17994 5.40646L8.00016 6.58624L6.82038 5.40646C6.43179 5.01786 5.79521 5.01786 5.40661 5.40646C5.01801 5.79505 5.01801 6.43163 5.40661 6.82023L6.58639 8.00001L5.40661 9.17979C5.01801 9.56839 5.01801 10.205 5.40661 10.5936C5.60532 10.7923 5.86138 10.8867 6.1135 10.8867C6.36562 10.8867 6.62167 10.7923 6.82038 10.5936L8.00016 9.41378L9.17994 10.5936C9.37865 10.7923 9.63471 10.8867 9.88683 10.8867C10.1389 10.8867 10.395 10.7923 10.5937 10.5936Z" fill="currentColor" stroke="currentColor"></path>
                  </svg>
                </a>
              </div>
              <div class="pt-4 px-4 pb-16">
                <h2 class="font-semibold mb-4">Summary</h2>
                <div class="bg-gray-100 rounded-lg h-2 w-56 mb-2"></div>
                <div class="bg-gray-100 rounded-lg h-2 w-60 mb-2"></div>
                <div class="bg-gray-100 rounded-lg h-2 w-32 mb-4"></div>
                <div class="bg-gray-100 rounded-lg h-2 w-24"></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

Tailwind Component #73

Tailwind CSS

Solstice

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #74

Tailwind CSS

Solstice

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #75

Tailwind CSS

Solstice

<section class="py-24">
  <div class="container mx-auto px-4">
    <div class="bg-orange-500 rounded-5xl inline-flex items-center justify-center mb-16">
      <svg xmlns="http://www.w3.org/2000/svg" width="176" height="176" viewBox="0 0 176 176" fill="none">
        <path d="M154 77V49.5C154 46.4624 151.538 44 148.5 44L132 44C128.963 44 126.5 46.4624 126.5 49.5V71.5C126.5 89.7254 111.726 104.5 93.5003 104.5L71.5003 104.5C68.4627 104.5 66.0003 106.962 66.0003 110V126.5C66.0003 129.538 68.4627 132 71.5003 132L99.0003 132C129.376 132 154 107.376 154 77Z" fill="white"></path>
        <path d="M22 99L22 126.5C22 129.538 24.4624 132 27.5 132H44C47.0376 132 49.5 129.538 49.5 126.5V104.5C49.5 86.2746 64.2746 71.5 82.5 71.5H104.5C107.538 71.5 110 69.0376 110 66V49.5C110 46.4624 107.538 44 104.5 44L77 44C46.6243 44 22 68.6243 22 99Z" fill="white"></path>
      </svg>
    </div>
    <h1 class="text-3xl lg:text-5xl font-bold font-heading mb-10">Careers at Solstice</h1>
    <div class="p-6 rounded-2xl border border-orange-500 mb-24">
      <p class="flex gap-2 flex-wrap">
        <span>Check out our</span>
        <span class="flex items-center gap-1">
          <span class="text-orange-500 font-bold font-heading">Open Roles</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M2.16663 10C2.16663 5.67616 5.6761 2.16669 9.99996 2.16669C14.3238 2.16669 17.8333 5.67616 17.8333 10C17.8333 14.3239 14.3238 17.8334 9.99996 17.8334C5.6761 17.8334 2.16663 14.3239 2.16663 10ZM10.7952 13.7119L13.2952 11.2119C13.7321 10.775 13.7321 10.0584 13.2952 9.62147C12.8583 9.18454 12.1417 9.18454 11.7047 9.62147L11.125 10.2012V7.08335C11.125 6.46554 10.6178 5.95835 9.99996 5.95835C9.38215 5.95835 8.87496 6.46554 8.87496 7.08335V10.2012L8.29518 9.62147C7.85825 9.18454 7.14167 9.18454 6.70474 9.62147C6.26781 10.0584 6.26781 10.775 6.70474 11.2119L9.20474 13.7119C9.42845 13.9356 9.71617 14.0417 9.99996 14.0417C10.2837 14.0417 10.5715 13.9356 10.7952 13.7119Z" fill="#FF7100" stroke="#FF7100"></path>
          </svg>
        </span>
        <span>at the bottom of the page</span>
      </p>
    </div>
    <h2 class="text-3xl font-bold font-heading mb-4">What we’re building</h2>
    <div class="flex flex-wrap mb-16 -mx-4">
      <div class="w-full lg:w-1/2 p-4">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #76

Tailwind CSS

Solstice

<section class="py-24">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 p-4">
        <h1 class="text-4xl lg:text-5xl font-bold font-heading mb-6">FAQ</h1>
        <p class="mb-6 max-w-xs">Still have more questions? Talk to our customer happiness team</p>
        <a class="w-full sm:w-auto py-3 px-5 h-12 rounded-full bg-purple-900 border border-purple-700 hover:bg-purple-800 focus:ring focus:ring-purple-800 transition duration-200 inline-flex items-center justify-center gap-2" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M13.3333 1.66669H6.66666C3.33332 1.66669 1.66666 3.33335 1.66666 6.66669V17.5C1.66666 17.9584 2.04166 18.3334 2.49999 18.3334H13.3333C16.6667 18.3334 18.3333 16.6667 18.3333 13.3334V6.66669C18.3333 3.33335 16.6667 1.66669 13.3333 1.66669ZM11.6667 12.7084H5.83332C5.49166 12.7084 5.20832 12.425 5.20832 12.0834C5.20832 11.7417 5.49166 11.4584 5.83332 11.4584H11.6667C12.0083 11.4584 12.2917 11.7417 12.2917 12.0834C12.2917 12.425 12.0083 12.7084 11.6667 12.7084ZM14.1667 8.54169H5.83332C5.49166 8.54169 5.20832 8.25835 5.20832 7.91669C5.20832 7.57502 5.49166 7.29169 5.83332 7.29169H14.1667C14.5083 7.29169 14.7917 7.57502 14.7917 7.91669C14.7917 8.25835 14.5083 8.54169 14.1667 8.54169Z" fill="white"></path>
          </svg>
          <span class="text-sm text-white font-semibold">Talk to us</span>
        </a>
      </div>
      <div class="w-full lg:w-2/3 p-4">
        <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="mb-3 p-6 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="{ 'rotate-180': accordion, 'rotate-0': !accordion }" class="transform hover:text-opacity-70 transition duration-200 w-6 h-6" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
          <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #77

Tailwind CSS

Solstice

<section class="overflow-hidden">
  <div class="container px-4 mx-auto">
    <h1 class="text-4xl lg:text-6xl font-bold font-heading text-center mb-6 mt-16">Blog</h1>
    <p class="text-gray-500 text-xl text-center mb-20">Discover the latest news, tips and user stories insights from Solstice.</p>
    <div class="pb-20 mb-20 border-b border-gray-200">
      <a href="#">
        <div class="bg-white border border-transparent hover:border-orange-500 transition duration-200 rounded-2xl h-full p-3 flex flex-wrap">
          <div class="w-full lg:w-1/2 p-4">
            <div class="relative" style="height: 364px;">
              <div class="absolute top-0 left-0 z-10">
                <svg class="rounded-tl-3xl" xmlns="http://www.w3.org/2000/svg" width="155" height="154" viewBox="0 0 155 154" fill="none">
                  <path d="M-34 79.9324V153.361C-34 153.714 -33.7141 154 -33.3615 154H17.62C17.9724 154 18.2585 153.714 18.2585 153.361V94.299C18.2585 55.5087 56.5087 17.2585 95.299 17.2585H154.361C154.714 17.2585 155 16.9724 155 16.62V-34.3615C155 -34.7139 154.714 -35 154.361 -35H80.9324C17.4572 -35 -34 16.4572 -34 79.9324Z" fill="#FF7100"></path>
                </svg>
              </div>
              <div class="absolute bottom-0 right-0 z-10">
                <svg class="rounded-br-3xl" xmlns="http://www.w3.org/2000/svg" width="154" height="158" viewBox="0 0 154 158" fill="none">
                  <path d="M189 74.0676V0.638514C189 0.286054 188.714 0 188.361 0H137.38C137.028 0 136.742 0.286054 136.742 0.638514V59.701C136.742 98.4913 98.4914 136.742 59.701 136.742H0.638514C0.286054 136.742 0 137.028 0 137.38V188.361C0 188.714 0.286054 189 0.638514 189H74.0676C137.543 189 189 137.543 189 74.0676Z" fill="#FF7100"></path>
                </svg>
              </div>
              <img class="absolute inset-0 w-full h-full object-cover rounded-3xl" src="solstice-assets/images/blog/picture-large.png" alt="">
            </div>
          </div>
          <div class="w-full lg:w-1/2 p-4">
            <div class="flex flex-col justify-center items-start h-full py-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

Tailwind Component #78

Tailwind CSS

Solstice

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #79

Tailwind CSS

Solstice

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #80

Tailwind CSS

Solstice

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

UI Components – Solstice Library

Framework

UI Library

Components

Tailwind Component #61

Get the code for 13,400+ components

Cookie Consent Banner with Decline and Allow Buttons

Tailwind Component #62

Get the code for 13,400+ components

Social Proof Logo Strip with Investor Heading

Tailwind Component #63

Get the code for 13,400+ components

Solstice Light Footer with Link Columns and Social Links

Tailwind Component #64

Get the code for 13,400+ components

Newsletter Subscribe Section with Email Form and App Preview

Tailwind Component #65

Get the code for 13,400+ components

Three-Up Statistics Card Row with Orange Figures

Tailwind Component #66

Get the code for 13,400+ components

Solstice top navigation bar with logo, menu links, and Get Started button

Tailwind Component #67

Get the code for 13,400+ components

Join now and learn together CTA hero with profile cards

Tailwind Component #68

Get the code for 13,400+ components

404 Page Not Found Error Section with Back to Home Button

Tailwind Component #69

Get the code for 13,400+ components

Split-screen contact section with company address, help desk card, and contact form

Tailwind Component #70

Get the code for 13,400+ components

Tailwind Component #71

Get the code for 13,400+ components

Tailwind Component #72

Get the code for 13,400+ components

Tailwind Component #73

Get the code for 13,400+ components

Tailwind Component #74

Get the code for 13,400+ components

Tailwind Component #75

Get the code for 13,400+ components

Tailwind Component #76

Get the code for 13,400+ components

Tailwind Component #77

Get the code for 13,400+ components

Tailwind Component #78

Get the code for 13,400+ components

Tailwind Component #79

Get the code for 13,400+ components

Tailwind Component #80

Get the code for 13,400+ components

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support