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

Tailwind CSS

Solstice

<section class="py-24">
  <div class="container mx-auto px-4">
    <div class="border-t border-b border-gray-200">
      <div class="max-w-2xl mx-auto bg-gray-50 bg-opacity-50 rounded-3xl py-16 px-4">
        <h2 class="text-2xl font-bold font-heading text-center mb-6">Total monthly learners</h2>
        <h1 class="text-center text-5xl lg:text-7xl font-bold font-heading mb-6">160,320</h1>
        <p class="font-semibold text-center">and we’re just getting started.</p>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Stats Component Generator

Tailwind Component #562

Tailwind CSS

Solstice

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Blog Component Generator

Tailwind Component #563

Tailwind CSS

Solstice

<section class="py-24">
  <div class="container mx-auto px-4">
    <h1 class="text-3xl lg:text-5xl font-bold font-heading mb-4 text-center">Careers at Solstice</h1>
    <div class="p-6 rounded-2xl border border-orange-500 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>
    <p class="text-gray-600 mb-8">People are shifting to a new form of collaboration in distributed teams and are wasting too much effort connecting the dots between different work streams to understand the bigger picture. Solstice is building a work hub that gives people a radically simpler way to coordinate work across teams and get context on what’s happening.</p>
    <p class="text-gray-600 mb-24">By bringing structure, access, and efficiency to teamwork, Solstice makes it easier for businesses to scale their operations. Backed by Atomico, Salesforce Ventures, and Mosaic, we’re on a mission to unlock the collective potential of teams and would love for you to join us!</p>
    <h2 class="text-3xl font-bold font-heading mb-4">Benefits</h2>
    <p class="text-gray-600 mb-16">We help our employees thrive</p>
    <div class="flex flex-wrap mb-24 -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="ml-8 w-12 h-12 rounded-full bg-purple-900 flex items-center justify-center mb-4">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Careers Component Generator

Tailwind Component #564

Tailwind CSS

Solstice

<section class="overflow-hidden" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between py-6">
      <div class="flex items-center gap-6">
        <div class="pr-6 border-r-2 border-transparent lg:border-gray-200">
          <a href="#">
            <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="#282828"></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>
          </a>
        </div>
        <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>

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 Navigation (horizontal) Component Generator

Tailwind Component #565

Tailwind CSS

Solstice

<section class="py-24">
  <div class="container mx-auto px-4 relative">
    <div class="border-t border-b border-gray-200 py-12">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full lg:w-1/2 p-4">
          <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>
          <h1 class="text-4xl lg:text-5xl font-bold font-heading max-w-sm lg:max-w-lg">Join 14K people embrace fun learning</h1>
        </div>
        <div class="w-full lg:w-1/2 p-4">
          <form action="">
            <div class="flex flex-wrap gap-4 mb-6">
              <input class="flex-1 rounded-full p-4 outline-none border border-orange-100 shadow placeholder-gray-500 focus:ring focus:ring-orange-200 transition duration-200" type="text" placeholder="Email address">
              <button class="w-full sm:w-auto py-4 px-6 h-14 rounded-full bg-orange-500 border border-orange-600 shadow hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200 flex items-center justify-center gap-2" 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>

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

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-500 shadow-sm py-6 px-14 flex items-center justify-between flex-wrap gap-4">
      <div>
        <h2 class="font-bold font-heading mb-2">Privacy Settings</h2>
        <p class="text-gray-600 max-w-lg">This site uses third-party website tracking technologies to provide and continually improve our services.</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="#">Deny</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="#">Accept All</a></div>
    </div>
  </div>
</div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Cookies Component Generator

Tailwind Component #567

Tailwind CSS

Solstice

<section class="py-12 overflow-hidden">
  <div class="flex flex-wrap h-full">
    <div class="w-full lg:w-1/2 p-4">
      <div class="flex flex-col justify-center max-w-md mx-auto h-full">
        <h1 class="text-3xl font-bold font-heading mb-4">Login</h1>
        <p class="text-gray-500 mb-8">Select your preferred sign up method</p>
        <a 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 mb-4" href="#">
          <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>
            <path d="M3.12793 6.12125L5.86585 8.12917C6.60668 6.29501 8.40085 5.00001 10.5004 5.00001C11.775 5.00001 12.9346 5.48084 13.8175 6.26625L16.1746 3.90917C14.6863 2.52209 12.6954 1.66667 10.5004 1.66667C7.2996 1.66667 4.52376 3.47375 3.12793 6.12125Z" fill="#FF3D00"></path>
            <path d="M10.4998 18.3333C12.6523 18.3333 14.6081 17.5096 16.0869 16.17L13.5077 13.9875C12.6429 14.6452 11.5862 15.0009 10.4998 15C8.3323 15 6.49189 13.6179 5.79855 11.6892L3.08105 13.7829C4.46022 16.4817 7.26105 18.3333 10.4998 18.3333Z" fill="#4CAF50"></path>
            <path d="M18.6713 8.36791H18V8.33333H10.5V11.6667H15.2096C14.8809 12.5902 14.2889 13.3972 13.5067 13.9879L13.5079 13.9871L16.0871 16.1696C15.9046 16.3354 18.8333 14.1667 18.8333 9.99999C18.8333 9.44124 18.7758 8.89583 18.6713 8.36791Z" fill="#1976D2"></path>
          </svg>
          <span class="font-bold font-heading">Continue with Google</span>
        </a>
        <a class="h-14 inline-flex items-center justify-center gap-2 py-4 px-6 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" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M14.1667 2.91667H5.83341C3.33341 2.91667 1.66675 4.16667 1.66675 7.08333V12.9167C1.66675 15.8333 3.33341 17.0833 5.83341 17.0833H14.1667C16.6667 17.0833 18.3334 15.8333 18.3334 12.9167V7.08333C18.3334 4.16667 16.6667 2.91667 14.1667 2.91667ZM14.5584 7.99167L11.9501 10.075C11.4001 10.5167 10.7001 10.7333 10.0001 10.7333C9.30008 10.7333 8.59175 10.5167 8.05008 10.075L5.44175 7.99167C5.17508 7.775 5.13341 7.375 5.34175 7.10833C5.55841 6.84167 5.95008 6.79167 6.21675 7.00833L8.82508 9.09167C9.45842 9.6 10.5334 9.6 11.1667 9.09167L13.7751 7.00833C14.0417 6.79167 14.4417 6.83333 14.6501 7.10833C14.8667 7.375 14.8251 7.775 14.5584 7.99167Z" fill="white"></path>
          </svg>
          <span class="text-white font-bold font-heading">Continue with email</span>
        </a>
        <a class="inline-block text-center w-full text-gray-500 hover: transition duration-200" href="#">
          <span>New to Solstice?</span>
          <span></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 Sign in / Sign up Component Generator

Tailwind Component #568

Tailwind CSS

Solstice

<section class="py-24">
  <div class="container mx-auto px-4">
    <div class="bg-orange-500 border border-orange-400 rounded-4xl py-20 px-8">
      <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="#FFC96D" stroke-width="4" stroke-miterlimit="10"></path>
          <path d="M9.22583 34C9.22583 27.4084 11.836 21.0868 16.482 16.4258C21.1281 11.7649 27.4295 9.14639 34 9.14639C40.5705 9.14639 46.872 11.7649 51.518 16.4258C56.1641 21.0868 58.7742 27.4084 58.7742 34" stroke="#FFF2D6" stroke-width="4" stroke-miterlimit="10"></path>
          <path d="M16.134 34C16.134 29.2617 18.0163 24.7174 21.3669 21.3669C24.7174 18.0163 29.2617 16.134 34 16.134C38.7384 16.134 43.2827 18.0163 46.6332 21.3669C49.9837 24.7174 51.866 29.2617 51.866 34" stroke="#530031" stroke-width="4" stroke-miterlimit="10"></path>
        </svg>
      </div>
      <h1 class="text-white text-4xl lg:text-5xl font-bold font-heading mb-6 text-center max-w-lg lg:max-w-2xl mx-auto">Discover Fun and Exciting Knowledge</h1>
      <p class="text-orange-50 text-center mb-10">Embark on an exciting learning adventure together - Join now!</p>
      <div class="flex justify-center"><a class="w-full sm:w-auto text-center h-16 inline-flex items-center justify-center py-3 px-5 rounded-full border border-gray-200 shadow font-bold font-heading bg-white hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Sign Up Now</a></div>
    </div>
  </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 Call to action Component Generator

Tailwind Component #569

Tailwind CSS

Solstice

<section class="py-12 overflow-hidden">
  <div class="flex flex-wrap h-full">
    <div class="w-full lg:w-1/2 p-4">
      <div class="flex flex-col justify-center max-w-md mx-auto h-full">
        <h1 class="text-3xl font-bold font-heading mb-4">Sign up</h1>
        <p class="text-gray-500 mb-8">Select your preferred sign up method</p>
        <a 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 mb-4" href="#">
          <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>
            <path d="M3.12793 6.12125L5.86585 8.12917C6.60668 6.29501 8.40085 5.00001 10.5004 5.00001C11.775 5.00001 12.9346 5.48084 13.8175 6.26625L16.1746 3.90917C14.6863 2.52209 12.6954 1.66667 10.5004 1.66667C7.2996 1.66667 4.52376 3.47375 3.12793 6.12125Z" fill="#FF3D00"></path>
            <path d="M10.4998 18.3333C12.6523 18.3333 14.6081 17.5096 16.0869 16.17L13.5077 13.9875C12.6429 14.6452 11.5862 15.0009 10.4998 15C8.3323 15 6.49189 13.6179 5.79855 11.6892L3.08105 13.7829C4.46022 16.4817 7.26105 18.3333 10.4998 18.3333Z" fill="#4CAF50"></path>
            <path d="M18.6713 8.36791H18V8.33333H10.5V11.6667H15.2096C14.8809 12.5902 14.2889 13.3972 13.5067 13.9879L13.5079 13.9871L16.0871 16.1696C15.9046 16.3354 18.8333 14.1667 18.8333 9.99999C18.8333 9.44124 18.7758 8.89583 18.6713 8.36791Z" fill="#1976D2"></path>
          </svg>
          <span class="font-bold font-heading">Sign up with Google</span>
        </a>
        <a class="h-14 inline-flex items-center justify-center gap-2 py-4 px-6 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" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M14.1667 2.91667H5.83341C3.33341 2.91667 1.66675 4.16667 1.66675 7.08333V12.9167C1.66675 15.8333 3.33341 17.0833 5.83341 17.0833H14.1667C16.6667 17.0833 18.3334 15.8333 18.3334 12.9167V7.08333C18.3334 4.16667 16.6667 2.91667 14.1667 2.91667ZM14.5584 7.99167L11.9501 10.075C11.4001 10.5167 10.7001 10.7333 10.0001 10.7333C9.30008 10.7333 8.59175 10.5167 8.05008 10.075L5.44175 7.99167C5.17508 7.775 5.13341 7.375 5.34175 7.10833C5.55841 6.84167 5.95008 6.79167 6.21675 7.00833L8.82508 9.09167C9.45842 9.6 10.5334 9.6 11.1667 9.09167L13.7751 7.00833C14.0417 6.79167 14.4417 6.83333 14.6501 7.10833C14.8667 7.375 14.8251 7.775 14.5584 7.99167Z" fill="white"></path>
          </svg>
          <span class="text-white font-bold font-heading">Continue with email</span>
        </a>
        <a class="inline-block text-center w-full text-gray-500 hover: transition duration-200" href="#">
          <span>Already have an account?</span>
          <span></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 Sign in / Sign up Component Generator

Tailwind Component #570

Tailwind CSS

Solstice

<section class="py-24 bg-gray-50 bg-opacity-50">
  <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="text-xl font-bold font-heading max-w-xs">
          <span>Still have more questions? Visit our</span>
          <span></span>
          <a class="text-orange-500 hover:underline" href="#">help center</a>
          <span></span>
          <span>to get in touch.</span>
        </p>
      </div>
      <div class="w-full lg:w-2/3 p-4">
        <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="bg-white rounded-3xl mb-3 p-6 cursor-pointer">
          <div class="flex items-center justify-between gap-6">
            <h2 class="text-lg font-bold font-heading">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

AI FAQ Component Generator

Tailwind Component #571

Tailwind CSS

Solstice

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI How it works Component Generator

Tailwind Component #572

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">Get in touch</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="rounded-3xl border border-gray-100 py-8">
            <div class="relative">
              <div class="absolute top-0 left-0 bg-orange-500 w-1 h-8"></div>
              <div class="px-8">
                <h2 class="text-xl font-bold font-heading mb-6">Technical Help desk</h2>
                <a class="w-full sm:w-auto py-3 px-5 h-12 rounded-full bg-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="#">
                  <span class="text-white text-sm font-semibold">Visit FAQ Center</span>
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M5 10H15.4167M15.4167 10L10.4167 5M15.4167 10L10.4167 15" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Contact Component Generator

Tailwind Component #573

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-36">
      <a href="#">
        <img src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
      </a>
      <div class="flex flex-wrap gap-8 -mx-4">
        <ul class="flex flex-col gap-6 p-4">
          <li class="text-black font-medium">Platform</li>
          <li><a class="text-gray-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">Company</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

AI Footers Component Generator

Tailwind Component #574

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-6">Testimonials</h1>
    <p class="text-center text-gray-600 mb-20">See what they have to say about us</p>
    <div class="bg-orange-50 rounded-4xl overflow-hidden px-4 lg:px-10 pt-8 lg:pt-16">
      <div class="flex flex-wrap items-end transform translate-y-14 -mx-4">
        <div class="w-full lg:w-1/3 p-4">
          <div class="border border-gray-100 py-14 px-8 bg-white rounded-3xl overflow-hidden">
            <h2 class="text-2xl font-semibold mb-8">“Highly recommended”</h2>
            <div class="bg-gray-50 rounded-xs h-3 w-40 mb-3"></div>
            <div class="bg-gray-50 rounded-xs h-3 w-full lg:w-full sm:w-72 mb-3"></div>
            <div class="bg-gray-50 rounded-xs h-3 w-full lg:w-full sm:w-72 mb-3"></div>
            <div class="bg-gray-50 rounded-xs h-3 w-52"></div>
          </div>
        </div>
        <div class="w-full lg:w-1/3 p-4">
          <div class="border border-gray-100 py-14 px-8 bg-white rounded-3xl relative">
            <h2 class="text-2xl font-semibold mb-8">“Make learning fun”</h2>
            <p class="mb-16">They shipping a platform that took learning to the next level. I can invite my friend to study in specific topic together in just two-click.</p>
            <div class="flex items-center gap-4 flex-wrap">
              <div class="rounded-full bg-orange-50 overflow-hidden">
                <img src="solstice-assets/images/testimonials/woman-avatar1.png" alt="">
              </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 Testimonials Component Generator

Tailwind Component #575

Tailwind CSS

Solstice

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI HTTP codes Component Generator

Tailwind Component #576

Tailwind CSS

Solstice

<section class="py-16">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center justify-center -mx-4">
      <div class="w-full xl:w-1/6 p-4">
        <p class="text-gray-500 text-lg font-semibold text-center">As seen in</p>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/6 p-4">
        <div class="py-4 px-3 bg-gray-50 bg-opacity-50 rounded-xl">
          <img class="mx-auto" src="solstice-assets/images/logos/placeholder-logo1.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/6 p-4">
        <div class="py-4 px-3 bg-gray-50 bg-opacity-50 rounded-xl">
          <img class="mx-auto" src="solstice-assets/images/logos/placeholder-logo2.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/6 p-4">
        <div class="py-4 px-3 bg-gray-50 bg-opacity-50 rounded-xl">
          <img class="mx-auto" src="solstice-assets/images/logos/placeholder-logo3.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/6 p-4">
        <div class="py-4 px-3 bg-gray-50 bg-opacity-50 rounded-xl">
          <img class="mx-auto" src="solstice-assets/images/logos/placeholder-logo4.png" alt="">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Logo clouds Component Generator

Tailwind Component #577

Tailwind CSS

Solstice

<section class="overflow-hidden py-12 bg-white">
  <div class="container mx-auto px-4">
    <div class="relative overflow-hidden">
      <div class="bg-purple-900 rounded-2xl" style="height:480px;"></div>
      <div class="absolute left-8 top-8 w-full bottom-0 z-10 bg-white rounded-tl-2xl pt-4 pl-4 overflow-hidden">
        <div class="mb-4 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 top-1 left-1/2 transform -translate-x-1/2">
            <div class="flex items-center gap-2">
              <p class="font-medium whitespace-nowrap">Study Session</p>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M8 11.5666C8.60015 11.5666 9.08666 11.0801 9.08666 10.48C9.08666 9.87983 8.60015 9.39331 8 9.39331C7.39985 9.39331 6.91333 9.87983 6.91333 10.48C6.91333 11.0801 7.39985 11.5666 8 11.5666Z" fill="#B8B8B8"></path>
                <path d="M11.2533 6.79998H11.7289L12.1246 6.84945C12.985 6.95699 13.4425 7.21317 13.716 7.60689C14.0111 8.03173 14.1666 8.71786 14.1666 9.85998V11.1C14.1666 12.4491 13.9528 13.1567 13.5548 13.5548C13.1567 13.9528 12.4491 14.1666 11.1 14.1666H4.89998C3.55091 14.1666 2.84324 13.9528 2.4452 13.5548C2.04716 13.1567 1.83331 12.4491 1.83331 11.1V9.85998C1.83331 8.71786 1.98886 8.03173 2.28397 7.60689C2.55745 7.21317 3.01501 6.95699 3.87533 6.84945L4.31331 6.7947V6.79331H4.39998V6.79998H4.89998H11.1H11.1003H11.1006H11.1009H11.1012H11.1015H11.1019H11.1022H11.1025H11.1028H11.1031H11.1034H11.1037H11.104H11.1043H11.1047H11.105H11.1053H11.1056H11.1059H11.1062H11.1065H11.1068H11.1071H11.1074H11.1077H11.1081H11.1084H11.1087H11.109H11.1093H11.1096H11.1099H11.1102H11.1105H11.1108H11.1111H11.1114H11.1117H11.1121H11.1124H11.1127H11.113H11.1133H11.1136H11.1139H11.1142H11.1145H11.1148H11.1151H11.1154H11.1157H11.116H11.1163H11.1166H11.117H11.1173H11.1176H11.1179H11.1182H11.1185H11.1188H11.1191H11.1194H11.1197H11.12H11.1203H11.1206H11.1209H11.1212H11.1215H11.1218H11.1221H11.1224H11.1227H11.123H11.1233H11.1236H11.1239H11.1242H11.1245H11.1248H11.1251H11.1254H11.1257H11.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.1371H11.1374H11.1377H11.138H11.1383H11.1386H11.1389H11.1392H11.1395H11.1398H11.1401H11.1404H11.1407H11.141H11.1413H11.1416H11.1419H11.1422H11.1425H11.1428H11.1431H11.1434H11.1437H11.144H11.1443H11.1446H11.1449H11.1452H11.1455H11.1458H11.1461H11.1464H11.1467H11.147H11.1473H11.1475H11.1478H11.1481H11.1484H11.1487H11.149H11.1493H11.1496H11.1499H11.1502H11.1505H11.1508H11.1511H11.1514H11.1517H11.152H11.1523H11.1526H11.1529H11.1532H11.1535H11.1537H11.154H11.1543H11.1546H11.1549H11.1552H11.1555H11.1558H11.1561H11.1564H11.1567H11.157H11.1573H11.1576H11.1579H11.1582H11.1585H11.1588H11.159H11.1593H11.1596H11.1599H11.1602H11.1605H11.1608H11.1611H11.1614H11.1617H11.162H11.1623H11.1626H11.1629H11.1632H11.1635H11.1637H11.164H11.1643H11.1646H11.1649H11.1652H11.1655H11.1658H11.1661H11.1664H11.1667H11.167H11.1673H11.1676H11.1679H11.1681H11.1684H11.1687H11.169H11.1693H11.1696H11.1699H11.1702H11.1705H11.1708H11.1711H11.1714H11.1717H11.172H11.1723H11.1725H11.1728H11.1731H11.1734H11.1737H11.174H11.1743H11.1746H11.1749H11.1752H11.1755H11.1758H11.1761H11.1764H11.1766H11.1769H11.1772H11.1775H11.1778H11.1781H11.1784H11.1787H11.179H11.1793H11.1796H11.1799H11.1802H11.1805H11.1807H11.181H11.1813H11.1816H11.1819H11.1822H11.1825H11.1828H11.1831H11.1834H11.1837H11.184H11.1843H11.1846H11.1849H11.1851H11.1854H11.1857H11.186H11.1863H11.1866H11.1869H11.1872H11.1875H11.1878H11.1881H11.1884H11.1887H11.189H11.1893H11.1895H11.1898H11.1901H11.1904H11.1907H11.191H11.1913H11.1916H11.1919H11.1922H11.1925H11.1928H11.1931H11.1934H11.1937H11.194H11.1942H11.1945H11.1948H11.1951H11.1954H11.1957H11.196H11.1963H11.1966H11.1969H11.1972H11.1975H11.1978H11.1981H11.1984H11.1987H11.199H11.1993H11.1995H11.1998H11.2001H11.2004H11.2007H11.201H11.2013H11.2016H11.2019H11.2022H11.2025H11.2028H11.2031H11.2034H11.2037H11.204H11.2043H11.2046H11.2049H11.2052H11.2055H11.2057H11.206H11.2063H11.2066H11.2069H11.2072H11.2075H11.2078H11.2081H11.2084H11.2087H11.209H11.2093H11.2096H11.2099H11.2102H11.2105H11.2108H11.2111H11.2114H11.2117H11.212H11.2123H11.2126H11.2129H11.2132H11.2135H11.2138H11.2141H11.2144H11.2147H11.215H11.2152H11.2155H11.2158H11.2161H11.2164H11.2167H11.217H11.2173H11.2176H11.2179H11.2182H11.2185H11.2188H11.2191H11.2194H11.2197H11.22H11.2203H11.2206H11.2209H11.2212H11.2215H11.2218H11.2221H11.2224H11.2227H11.223H11.2233H11.2236H11.2239H11.2242H11.2245H11.2248H11.2251H11.2254H11.2257H11.226H11.2263H11.2266H11.2269H11.2272H11.2275H11.2278H11.2281H11.2284H11.2288H11.2291H11.2294H11.2297H11.23H11.2303H11.2306H11.2309H11.2312H11.2315H11.2318H11.2321H11.2324H11.2327H11.233H11.2333H11.2336H11.2339H11.2342H11.2345H11.2348H11.2351H11.2354H11.2357H11.236H11.2363H11.2366H11.2369H11.2373H11.2376H11.2379H11.2382H11.2385H11.2388H11.2391H11.2394H11.2397H11.24H11.2403H11.2406H11.2409H11.2412H11.2415H11.2418H11.2422H11.2425H11.2428H11.2431H11.2434H11.2437H11.244H11.2443H11.2446H11.2449H11.2452H11.2455H11.2459H11.2462H11.2465H11.2468H11.2471H11.2474H11.2477H11.248H11.2483H11.2486H11.249H11.2493H11.2496H11.2499H11.2502H11.2505H11.2508H11.2511H11.2514H11.2518H11.2521H11.2524H11.2527H11.253H11.2533ZM5.48665 10.48C5.48665 11.8617 6.60943 12.9933 7.99998 12.9933C9.38946 12.9933 10.5133 11.8695 10.5133 10.48C10.5133 9.09717 9.38279 7.96665 7.99998 7.96665C6.61825 7.96665 5.48665 9.08943 5.48665 10.48Z" fill="#B8B8B8" stroke="#B8B8B8"></path>
              </svg>
            </div>
          </div>
        </div>
        <div class="relative h-full">
          <img class="rounded-2xl h-full w-full object-cover" src="solstice-assets/images/features/picture1-full.png" alt="">
          <div class="absolute top-3 left-3 flex gap-2 flex-wrap items-start mr-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 Utilities Component Generator

Tailwind Component #578

Tailwind CSS

Solstice

<section class="overflow-hidden">
  <div class="border-b border-gray-100 pb-10 pt-24 flex justify-center">
    <div class="bg-orange-500 rounded-4xl">
      <svg xmlns="http://www.w3.org/2000/svg" width="112" height="112" viewBox="0 0 112 112" fill="none">
        <path d="M98.0002 49V31.5C98.0002 29.567 96.4332 28 94.5002 28L84.0002 28C82.0672 28 80.5002 29.567 80.5002 31.5V45.5C80.5002 57.098 71.0982 66.5 59.5002 66.5L45.5002 66.5C43.5672 66.5 42.0002 68.067 42.0002 70V80.5C42.0002 82.433 43.5672 84 45.5002 84L63.0002 84C82.3301 84 98.0002 68.33 98.0002 49Z" fill="white"></path>
        <path d="M14 63L14 80.5C14 82.433 15.567 84 17.5 84H28C29.933 84 31.5 82.433 31.5 80.5V66.5C31.5 54.902 40.902 45.5 52.5 45.5H66.5C68.433 45.5 70 43.933 70 42V31.5C70 29.567 68.433 28 66.5 28L49 28C29.67 28 14 43.67 14 63Z" fill="white"></path>
      </svg>
    </div>
  </div>
  <div class="container mx-auto px-4">
    <h1 class="font-bold font-heading text-center text-3xl lg:text-5xl mt-16 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 mt-16">What we’re building</h2>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Careers Component Generator

Tailwind Component #579

Tailwind CSS

Solstice

<section class="py-24 bg-purple-900">
  <div class="container mx-auto px-4">
    <h1 class="text-center text-white text-5xl lg:text-6xl font-bold font-heading mb-6">Pricing</h1>
    <p class="text-purple-200 text-lg text-center mb-24 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="overflow-x-auto mb-24">
      <div class="flex min-w-max">
        <div class="w-96 lg:w-1/3 p-4">
          <div class="pb-10 border-b border-gray-200">
            <div class="flex flex-wrap items-center gap-4 mb-4">
              <p class="text-white 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-white text-lg font-bold font-heading">Annually</p>
            </div>
            <div class="inline-block px-4 py-2 rounded-full bg-orange-50 text-orange-700">SAVE 15% with annual billing</div>
          </div>
          <h2 class="mt-10 mb-24 text-white text-lg font-bold font-heading">What you’ll get</h2>
          <ul class="flex flex-col gap-9">
            <li class="text-white text-lg font-medium">Join public room</li>
            <li class="text-white text-lg font-medium">Create unlimited room</li>

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

Tailwind CSS

Solstice

<section class="py-24">
  <div class="container mx-auto px-4">
    <p class="uppercase text-orange-500 text-center text-sm font-bold font-heading mb-4">EVENTS</p>
    <h1 class="text-4xl lg:text-5xl font-bold font-heading mb-4 max-w-lg text-center mx-auto">Engage in our weekly online events</h1>
    <p class="text-gray-600 text-lg text-center mb-16">Join upcoming &amp; past events. Experience collaborative learning firsthand.</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="#">

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

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

Get the code for 13,400+ components

Tailwind Component #562

Get the code for 13,400+ components

Tailwind Component #563

Get the code for 13,400+ components

Tailwind Component #564

Get the code for 13,400+ components

Tailwind Component #565

Get the code for 13,400+ components

Tailwind Component #566

Get the code for 13,400+ components

Tailwind Component #567

Get the code for 13,400+ components

Tailwind Component #568

Get the code for 13,400+ components

Tailwind Component #569

Get the code for 13,400+ components

Tailwind Component #570

Get the code for 13,400+ components

Tailwind Component #571

Get the code for 13,400+ components

Tailwind Component #572

Get the code for 13,400+ components

Tailwind Component #573

Get the code for 13,400+ components

Tailwind Component #574

Get the code for 13,400+ components

Tailwind Component #575

Get the code for 13,400+ components

Tailwind Component #576

Get the code for 13,400+ components

Tailwind Component #577

Get the code for 13,400+ components

Tailwind Component #578

Get the code for 13,400+ components

Tailwind Component #579

Get the code for 13,400+ components

Tailwind Component #580

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