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

Tailwind CSS

Solstice

<section class="bg-purple-900 py-16">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap mb-32 mt-14 -mx-8">
      <div class="w-full lg:w-1/2 px-8">
        <div class="flex items-center justify-between flex-wrap gap-4 mb-14">
          <div class="py-1 px-3 rounded-lg border border-orange-100 bg-orange-50 flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none"><circle cx="4" cy="4" r="3" fill="#FF7100"></circle></svg>
            <span class="text-orange-500 text-sm font-medium">About Us</span>
          </div>
          <div class="flex items-center flex-wrap gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="5" stroke="#FFF2D6" stroke-width="1.25"></circle><circle cx="8" cy="8" r="7.375" stroke="#FFC96D" stroke-width="1.25"></circle><circle cx="8" cy="8" r="3" fill="#FF7100"></circle></svg>
            <span class="text-white text-sm font-semibold">Meet Solstice</span>
          </div>
        </div>
        <img class="rounded-3xl w-full mb-8" src="solstice-assets/images/about/picture4.png" alt="">
      </div>
      <div class="w-full lg:w-1/2 px-8">
        <h1 class="text-white text-5xl lg:text-7xl font-bold font-heading mb-10 max-w-xs lg:max-w-lg">On a mission to make learning fun</h1>
        <p class="text-purple-200 text-lg">We are driven to transform the landscape of learning into a captivating journey of excitement and discovery. Our aim is to infuse every educational experience with the essence of joy, making learning an immersive adventure that fuels curiosity and fosters growth.</p>
      </div>
    </div>
    <div class="border border-purple-700 bg-purple-900 rounded-3xl flex flex-wrap mb-32">
      <div class="w-full md:w-1/2 lg:w-1/4 py-8">
        <div class="md:border-r border-purple-700 px-12">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI About Component Generator

Tailwind Component #622

Tailwind CSS

Solstice

<section class="py-24 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-4">Join our events</h1>
    <p class="text-center text-purple-200 text-lg mb-24 max-w-2xl mx-auto">Engage in our events to chat about learning trends and experience our collaborative online learning platform first-hand.</p>
    <div class="flex flex-wrap mb-4 -mx-4">
      <div class="w-full lg:w-2/3 p-4">
        <a href="#">
          <div class="border border-purple-700 bg-white hover:border-orange-500 transition duration-200 rounded-2xl flex flex-wrap h-full">
            <div class="w-full md:w-1/2">
              <div class="relative h-full" style="min-height:318px;">
                <div class="absolute top-0 left-0 z-10">
                  <svg class="rounded-tl-2xl" xmlns="http://www.w3.org/2000/svg" width="154" height="154" viewBox="0 0 154 154" fill="none">
                    <path d="M-35 79.9324V153.361C-35 153.714 -34.7141 154 -34.3615 154H16.62C16.9724 154 17.2585 153.714 17.2585 153.361V94.299C17.2585 55.5087 55.5087 17.2585 94.299 17.2585H153.361C153.714 17.2585 154 16.9724 154 16.62V-34.3615C154 -34.7139 153.714 -35 153.361 -35H79.9324C16.4572 -35 -35 16.4572 -35 79.9324Z" fill="#FFF2D6"></path>
                  </svg>
                </div>
                <div class="absolute bottom-0 right-0 z-10">
                  <svg xmlns="http://www.w3.org/2000/svg" width="152" height="153" viewBox="0 0 152 153" 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>
                </div>
                <img class="absolute top-0 left-0 w-full h-full object-cover rounded-tr-2xl md:rounded-tr-none md:rounded-bl-2xl rounded-tl-2xl" src="solstice-assets/images/events/picture1.png" alt="">
              </div>
            </div>
            <div class="w-full md:w-1/2">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Events Component Generator

Tailwind Component #623

Tailwind CSS

Solstice

<section class="py-24 bg-purple-900">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap mb-24 -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="p-10 bg-orange-500 rounded-3xl">
          <h2 class="text-white text-4xl lg:text-6xl font-bold font-heading mb-6">$4/month</h2>
          <p class="text-white mb-10">Join over 350 hundreds users who have signed up for Solstice.</p>
          <div class="p-4 bg-orange-400 rounded-3xl flex items-center justify-between flex-wrap gap-4 mb-10">
            <p class="text-white text-lg font-medium">Cancel anytime.</p>
            <a class="w-full sm:w-auto text-center h-14 py-4 px-6 rounded-full bg-white border border-gray-200 shadow hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200 flex items-center justify-center gap-2" href="#">
              <span class="text-sm font-semibold ">Sign up today</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
                <path d="M5.50002 10H15.9167M15.9167 10L10.9167 5M15.9167 10L10.9167 15" stroke="#282828" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
          <h2 class="text-white text-lg font-bold font-heading mb-4">What you’ll get</h2>
          <ul class="flex flex-col gap-4">
            <li class="flex items-center gap-4">
              <div class="w-2 h-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                  <g clip-path="url(#clip0_199_1928)">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.21702 3.51098C7.30324 3.56048 7.37487 3.63185 7.42469 3.71788C7.4745 3.80392 7.50073 3.90157 7.50073 4.00098C7.50073 4.1004 7.4745 4.19805 7.42469 4.28409C7.37487 4.37012 7.30324 4.44149 7.21702 4.49098L1.38352 7.91948C0.994524 8.14798 0.500023 7.87348 0.500024 7.42948L0.500024 0.571984C0.500024 0.127484 0.995024 -0.146516 1.38352 0.0819844L7.21702 3.51098Z" fill="white"></path>
                  </g>

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

Tailwind CSS

Solstice

<section class="p-10">
  <div class="bg-purple-900 rounded-5xl p-8 lg:p-14">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 p-4">
        <div class="flex flex-col justify-between gap-4 h-full">
          <h1 class="text-white text-4xl lg:text-5xl font-bold font-heading">FAQ</h1>
          <div>
            <p class="text-white text-xl font-bold font-heading mb-6 max-w-sm">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-orange-500 border border-orange-600 hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200 inline-flex items-center justify-center gap-2" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M13.3333 1.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>
      </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 rounded-3xl mb-3 p-6 cursor-pointer">
          <div class="flex items-center justify-between gap-6">
            <h2 class="text-lg font-semibold">What is Solstice? What is it for?</h2>
            <a class="text-orange-500 hover:text-orange-600 transition duration-200 w-8 h-8" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16 2.66669C8.63586 2.66669 2.66663 8.63592 2.66663 16C2.66663 23.3641 8.63586 29.3334 16 29.3334C23.3641 29.3334 29.3333 23.3641 29.3333 16C29.3333 8.63592 23.3641 2.66669 16 2.66669ZM17.0256 11.8975C17.0256 11.6254 16.9175 11.3646 16.7252 11.1722C16.5329 10.9799 16.272 10.8718 16 10.8718C15.7279 10.8718 15.4671 10.9799 15.2747 11.1722C15.0824 11.3646 14.9743 11.6254 14.9743 11.8975V14.9744H11.8974C11.6254 14.9744 11.3645 15.0824 11.1722 15.2748C10.9798 15.4671 10.8718 15.728 10.8718 16C10.8718 16.272 10.9798 16.5329 11.1722 16.7253C11.3645 16.9176 11.6254 17.0257 11.8974 17.0257H14.9743V20.1026C14.9743 20.3746 15.0824 20.6355 15.2747 20.8278C15.4671 21.0202 15.7279 21.1282 16 21.1282C16.272 21.1282 16.5329 21.0202 16.7252 20.8278C16.9175 20.6355 17.0256 20.3746 17.0256 20.1026V17.0257H20.1025C20.3745 17.0257 20.6354 16.9176 20.8278 16.7253C21.0201 16.5329 21.1282 16.272 21.1282 16C21.1282 15.728 21.0201 15.4671 20.8278 15.2748C20.6354 15.0824 20.3745 14.9744 20.1025 14.9744H17.0256V11.8975Z" fill="currentColor"></path>

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

Tailwind CSS

Solstice

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Sign in / Sign up Component Generator

Tailwind Component #626

Tailwind CSS

Solstice

<section class="overflow-hidden" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="bg-orange-100">
    <div class="container px-4 mx-auto">
      <h1 class="text-4xl lg:text-6xl font-bold font-heading mb-6 pt-16">Blog</h1>
      <p class="text-gray-600 text-xl mb-20">Latest articles and releases</p>
      <a class="bg-white border border-orange-200 hover:border-orange-500 transition duration-200 py-4 rounded-3xl flex flex-wrap mb-20" href="#">
        <div class="w-full lg:w-1/2 px-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 px-4">
          <div class="flex flex-col justify-center items-start h-full py-8">
            <h2 class="text-2xl lg:text-3xl font-bold font-heading mb-4 max-w-sm">How to Learn Anything Faster and Master It</h2>

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

Tailwind CSS

Solstice

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Sign in / Sign up Component Generator

Tailwind Component #628

Tailwind CSS

Solstice

<section class="overflow-hidden py-24">
  <div class="container mx-auto px-4">
    <div class="flex justify-center">
      <a class=" text-gray-500 group mb-12 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>
    </div>
    <img class="w-full rounded-2xl mb-12" src="solstice-assets/images/blog/post-picture.png" alt="">
    <div class="flex items-center justify-center gap-3 flex-wrap mb-4">
      <div class="rounded-md border border-gray-100 py-0.5 px-2">
        <span class="text-gray-700 text-xs font-medium">Product</span>
      </div>
      <div class="rounded-md border border-gray-100 py-0.5 px-2">
        <span class="text-gray-700 text-xs font-medium">Development</span>
      </div>
    </div>
    <h1 class="text-center text-3xl lg:text-5xl font-bold mb-12 max-w-xl lg:max-w-3xl mx-auto">The Art and Science of Design Development: Crafting Digital Experiences</h1>
    <div class="flex items-center justify-between flex-wrap gap-4 mb-12">
      <div class="flex items-center gap-4 flex-wrap">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Content Component Generator

Tailwind Component #629

Tailwind CSS

Solstice

<section class="py-24 bg-purple-900" x-data="{ showContent: false }">
  <div class="container mx-auto px-4">
    <h1 class="text-white text-center text-4xl lg:text-5xl font-bold font-heading mb-6 max-w-md mx-auto">Testimonials from our users</h1>
    <p class="text-center text-white mb-20">See what they have to say about us</p>
    <div class="flex flex-wrap mb-20 lg:mb-40 -mx-4">
      <div class="w-full lg:w-1/3 p-4">
        <div class="border border-orange-500 bg-white p-12 rounded-t-3xl rounded-br-3xl mb-8 lg:h-full">
          <div class="mb-8">
            <svg xmlns="http://www.w3.org/2000/svg" width="30" height="22" viewBox="0 0 30 22" fill="none">
              <path d="M13.1971 4.75862C10.9375 4.89655 9.11058 5.47127 7.71635 6.48276C6.37019 7.49425 5.57692 8.87356 5.33654 10.6207C5.28846 11.2184 5.28846 11.8621 5.33654 12.5517C5.72115 12 6.20192 11.6092 6.77885 11.3793C7.35577 11.1494 8.05289 11.0345 8.87019 11.0345C10.1683 11.0345 11.2981 11.5172 12.2596 12.4828C13.2212 13.4483 13.7019 14.7126 13.7019 16.2759C13.7019 17.977 13.125 19.3563 11.9712 20.4138C10.8173 21.4713 9.30289 22 7.42788 22C5.07212 22 3.24519 21.1724 1.94712 19.5172C0.649038 17.8161 0 15.5862 0 12.8276C0 9.47126 1.05769 6.57471 3.17308 4.13793C5.33654 1.65517 8.67789 0.275861 13.1971 0V4.75862ZM29.4952 4.75862C27.1875 4.89655 25.3606 5.47127 24.0144 6.48276C22.6683 7.49425 21.875 8.87356 21.6346 10.6207C21.5865 11.0345 21.5625 11.6782 21.5625 12.5517C21.9952 12 22.5 11.6092 23.0769 11.3793C23.6538 11.1494 24.351 11.0345 25.1683 11.0345C26.4663 11.0345 27.5962 11.5172 28.5577 12.4828C29.5192 13.4483 30 14.7126 30 16.2759C30 17.977 29.4231 19.3563 28.2692 20.4138C27.1154 21.4713 25.601 22 23.726 22C21.3221 22 19.4712 21.1724 18.1731 19.5172C16.9231 17.8161 16.2981 15.5862 16.2981 12.8276C16.2981 9.47126 17.3558 6.57471 19.4712 4.13793C21.6346 1.65517 24.976 0.275861 29.4952 0V4.75862Z" fill="#FF7100"></path>
            </svg>
          </div>
          <h2 class="text-xl font-bold font-heading mb-4">I've been more productive with Solstice</h2>
          <p class="text-gray-600">I've been more productive and my academic performance is getting better every semester.</p>
        </div>
        <div class="flex items-center gap-4 flex-wrap">
          <div class="rounded-full bg-orange-50 overflow-hidden">
            <img src="solstice-assets/images/testimonials/man-avatar1.png" alt="">
          </div>
          <div>
            <h2 class="text-white font-semibold mb-1">Steven Klein</h2>
            <p class="text-purple-200 text-sm">Student</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 Testimonials Component Generator

Tailwind Component #630

Tailwind CSS

Solstice

<section class="overflow-hidden bg-purple-900">
  <div class="border-b border-purple-700 pb-16 pt-24">
    <div class="container mx-auto px-4">
      <div class="flex justify-center">
        <div class="rounded-md border border-orange-100 bg-orange-50 px-2 py-1 uppercase text-orange-500 text-sm font-medium mb-4 mx-auto">CAREERS</div>
      </div>
      <h1 class="text-white text-3xl lg:text-5xl font-bold font-heading text-center">Careers at Solstice</h1>
    </div>
  </div>
  <div class="container mx-auto px-4">
    <h2 class="text-white text-3xl font-bold font-heading mb-4 mt-16">What we’re building</h2>
    <div class="flex flex-wrap mb-16 -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <p class="text-purple-200">People are shifting to a new form of collaboration in distributed teams and are wasting too much effort connecting the dots between different work streams to understand the bigger picture. Solstice is building a work hub that gives people a radically simpler way to coordinate work across teams and get context on what’s happening.</p>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <p class="text-purple-200">By bringing structure, access, and efficiency to teamwork. Backed by Atomico, Salesforce Ventures, and Mosaic, we’re on a mission to unlock the collective potential of teams and would love for you to join us!</p>
      </div>
    </div>
  </div>
  <div class="flex justify-center gap-8 mb-24">
    <img class="rounded-r-3xl object-cover flex-1" src="solstice-assets/images/careers/picture4.png" alt="">
    <img class="rounded-3xl object-cover flex-1 px-4 sm:px-0" src="solstice-assets/images/careers/picture5.png" alt="">
    <img class="rounded-l-3xl object-cover flex-1" src="solstice-assets/images/careers/picture6.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 Careers Component Generator

Tailwind Component #631

Tailwind CSS

Solstice

<section class="py-24 bg-purple-900">
  <div class="container mx-auto px-4">
    <p class="uppercase text-center text-orange-500 text-sm font-bold font-heading mb-4">FEATURES</p>
    <h1 class="text-center text-white text-4xl lg:text-5xl font-bold font-heading mb-24">Discover our features</h1>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="flex flex-col justify-center items-stretch sm:items-start h-full">
          <h2 class="text-white text-4xl font-bold font-heading mb-6 max-w-sm">Summarize your learning</h2>
          <p class="text-purple-200 text-lg mb-10 max-w-lg">Summarize your learning effortlessly with in-platform note. Condense key takeaways and insights from any topic you've explored.</p>
          <a class="h-14 inline-flex items-center justify-center w-full sm:w-auto text-center py-4 px-6 rounded-full bg-white border border-gray-200 shadow font-bold font-heading hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Learn more</a>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <img class="lg:ml-auto" src="solstice-assets/images/features/platform-half-primary.png" alt="">
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Features Component Generator

Tailwind Component #632

Tailwind CSS

Solstice

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

AI Newsletter Component Generator

Tailwind Component #633

Tailwind CSS

Solstice

<section class="overflow-hidden bg-purple-900">
  <div class="container px-4 mx-auto pt-16 pb-20">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="max-w-xl mx-auto">
          <h1 class="text-white text-3xl lg:text-5xl font-bold font-heading mb-4">Contact us</h1>
          <p class="text-purple-200 mb-10">Submit your info and we’ll get back to you as soon as possible.</p>
          <div class="mb-10 flex items-center gap-1">
            <div class="bg-orange-200 rounded-3xl h-px w-3"></div>
            <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" viewBox="0 0 3 3" fill="none"><circle cx="1.5" cy="1.5" r="1.5" fill="#FFA632"></circle></svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" viewBox="0 0 3 3" fill="none"><circle cx="1.5" cy="1.5" r="1.5" fill="#FFA632"></circle></svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" viewBox="0 0 3 3" fill="none"><circle cx="1.5" cy="1.5" r="1.5" fill="#FFA632"></circle></svg>
            <div class="bg-orange-200 rounded-3xl h-px w-3"></div>
          </div>
          <div class="flex items-center flex-wrap gap-3 mb-4">
            <div class="bg-orange-500 rounded-xl p-2">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M18.3333 17.7083H1.66666C1.32499 17.7083 1.04166 17.9916 1.04166 18.3333C1.04166 18.675 1.32499 18.9583 1.66666 18.9583H18.3333C18.675 18.9583 18.9583 18.675 18.9583 18.3333C18.9583 17.9916 18.675 17.7083 18.3333 17.7083Z" fill="white"></path>
                <path d="M14.1667 1.66669H5.83333C3.33333 1.66669 2.5 3.15835 2.5 5.00002V18.3334H17.5V5.00002C17.5 3.15835 16.6667 1.66669 14.1667 1.66669ZM8.33333 14.375H5.83333C5.49167 14.375 5.20833 14.0917 5.20833 13.75C5.20833 13.4084 5.49167 13.125 5.83333 13.125H8.33333C8.675 13.125 8.95833 13.4084 8.95833 13.75C8.95833 14.0917 8.675 14.375 8.33333 14.375ZM8.33333 10.625H5.83333C5.49167 10.625 5.20833 10.3417 5.20833 10C5.20833 9.65835 5.49167 9.37502 5.83333 9.37502H8.33333C8.675 9.37502 8.95833 9.65835 8.95833 10C8.95833 10.3417 8.675 10.625 8.33333 10.625ZM8.33333 6.87502H5.83333C5.49167 6.87502 5.20833 6.59169 5.20833 6.25002C5.20833 5.90835 5.49167 5.62502 5.83333 5.62502H8.33333C8.675 5.62502 8.95833 5.90835 8.95833 6.25002C8.95833 6.59169 8.675 6.87502 8.33333 6.87502ZM14.1667 14.375H11.6667C11.325 14.375 11.0417 14.0917 11.0417 13.75C11.0417 13.4084 11.325 13.125 11.6667 13.125H14.1667C14.5083 13.125 14.7917 13.4084 14.7917 13.75C14.7917 14.0917 14.5083 14.375 14.1667 14.375ZM14.1667 10.625H11.6667C11.325 10.625 11.0417 10.3417 11.0417 10C11.0417 9.65835 11.325 9.37502 11.6667 9.37502H14.1667C14.5083 9.37502 14.7917 9.65835 14.7917 10C14.7917 10.3417 14.5083 10.625 14.1667 10.625ZM14.1667 6.87502H11.6667C11.325 6.87502 11.0417 6.59169 11.0417 6.25002C11.0417 5.90835 11.325 5.62502 11.6667 5.62502H14.1667C14.5083 5.62502 14.7917 5.90835 14.7917 6.25002C14.7917 6.59169 14.5083 6.87502 14.1667 6.87502Z" fill="white"></path>
              </svg>
            </div>
            <h2 class="text-white text-xl font-bold font-heading">Company HQ</h2>
          </div>
          <p class="text-purple-200 mb-10">4140 Parker Rd. Allentown, New Mexico 31134</p>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Contact Component Generator

Tailwind Component #634

Tailwind CSS

Solstice

<section class="pt-24 pb-11 overflow-hidden bg-orange-50">
  <div class="container mx-auto px-4">
    <h1 class="text-center 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-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>
    <div class="flex items-center justify-center gap-4 sm:gap-8 lg:gap-16">
      <div>
        <div class="bg-orange-100 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-orange-100 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-orange-100 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-orange-100 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-orange-100 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-orange-100 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-orange-100 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-orange-100 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-orange-100 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-orange-100 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

AI HTTP codes Component Generator

Tailwind Component #635

Tailwind CSS

Solstice

<section class="overflow-hidden py-12 bg-white">
  <div class="container mx-auto px-4">
    <div class="bg-orange-50 rounded-2xl pt-16 px-4 lg:px-10">
      <div class="border border-orange-200 bg-white rounded-xl flex mb-8">
        <div class="hidden md:block relative overflow-hidden">
          <div class="absolute inset-0">
            <svg class="rounded-tl-xl" xmlns="http://www.w3.org/2000/svg" width="128" height="100" viewBox="0 0 128 100" fill="none">
              <g clip-path="url(#clip0_216_15656)">
                <path d="M138 75.9459V54.1892C138 54.0848 137.915 54 137.811 54H122.705C122.601 54 122.516 54.0848 122.516 54.1892V71.6892C122.516 83.1826 111.183 94.516 99.6892 94.516H82.1892C82.0848 94.516 82 94.6008 82 94.7052V109.811C82 109.915 82.0848 110 82.1892 110H103.946C122.753 110 138 94.7534 138 75.9459Z" fill="#FFF2D6"></path>
                <path d="M-10 24.0541V45.8108C-10 45.9152 -9.9153 46 -9.81081 46H5.29481C5.39924 46 5.484 45.9152 5.484 45.8108V28.3108C5.484 16.8174 16.8174 5.484 28.3108 5.484H45.8108C45.9152 5.484 46 5.39924 46 5.29481V-9.81081C46 -9.91524 45.9152 -10 45.8108 -10H24.0541C5.24657 -10 -10 5.24657 -10 24.0541Z" fill="#FFF2D6"></path>
              </g>
              <defs><clipPath id="clip0_216_15656"><rect width="128" height="100" fill="white"></rect></clipPath></defs>
            </svg>
          </div>
          <img class="rounded-tl-xl rounded-bl-xl h-full" src="solstice-assets/images/features/picture3.png" alt="">
        </div>
        <div class="p-3">
          <h2 class="text-sm font-bold font-heading mb-1">Learning Through Collaborative Digital Cohorts</h2>
          <p class="text-gray-500 text-xs mb-2">9:00 AM − 10:00 AM (1h)</p>
          <div class="inline-block px-2 py-1 rounded-md border border-orange-100 bg-orange-50 text-orange-500 text-xs font-medium">Producvitity</div>
        </div>
      </div>
      <div class="md:px-4 mb-8">
        <div class="border border-orange-200 bg-white rounded-xl flex">

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

Tailwind CSS

Solstice

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

Tailwind CSS

Solstice

<section class="py-24 bg-purple-900">
  <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="#FFF2D6" stroke-width="3" stroke-miterlimit="10"></path>
            <path d="M7.41928 26.0001C7.41928 21.0564 9.37688 16.3152 12.8614 12.8195C16.346 9.32374 21.072 7.35986 25.9999 7.35986C30.9278 7.35986 35.6539 9.32374 39.1384 12.8195C42.623 16.3152 44.5806 21.0564 44.5806 26.0001" stroke="#FF7100" stroke-width="3" stroke-miterlimit="10"></path>
            <path d="M12.6004 26.0001C12.6004 22.4463 14.0122 19.0381 16.5251 16.5252C19.038 14.0123 22.4462 12.6006 25.9999 12.6006C29.5537 12.6006 32.9619 14.0123 35.4748 16.5252C37.9877 19.0381 39.3994 22.4463 39.3994 26.0001" stroke="#FFC96D" stroke-width="3" stroke-miterlimit="10"></path>
          </svg>
          <p class="text-white text-lg font-medium">What are you waiting for?</p>
        </div>
        <h1 class="text-white text-4xl lg:text-5xl font-bold font-heading mb-10 max-w-md">Join now and learn together!</h1>
        <a class="w-full sm:w-auto text-center py-5 px-8 mb-8 h-16 inline-flex items-center justify-center rounded-full 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-orange-500 rounded-xl px-6 pt-4 relative mb-28 ml-auto">
            <div class="absolute left-2 bottom-2 bg-white p-2 rounded-md">
              <p class="text-sm text-black font-semibold">Sophie</p>
            </div>
            <img src="solstice-assets/images/cta/woman-picture1.png" alt="">
          </div>
          <div class="bg-orange-50 rounded-xl px-6 pt-4 relative mr-auto">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Call to action Component Generator

Tailwind Component #638

Tailwind CSS

Solstice

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Stats Component Generator

Tailwind Component #639

Tailwind CSS

Solstice

<section class="overflow-hidden" x-data="{ mobileNavOpen: false }">
  <div class="bg-purple-900">
    <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-light.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="text-white group-hover:text-opacity-70 transition duration-200">Platform</span>
              <div class="text-white 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="text-white hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
          <li class="text-white 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="text-white group-hover:text-opacity-70 transition duration-200">Resources</span>
              <div class="text-white 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

AI Navigation (horizontal) Component Generator

Tailwind Component #640

Tailwind CSS

Solstice

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI How it works Component Generator

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

Get the code for 13,400+ components

Tailwind Component #622

Get the code for 13,400+ components

Tailwind Component #623

Get the code for 13,400+ components

Tailwind Component #624

Get the code for 13,400+ components

Tailwind Component #625

Get the code for 13,400+ components

Tailwind Component #626

Get the code for 13,400+ components

Tailwind Component #627

Get the code for 13,400+ components

Tailwind Component #628

Get the code for 13,400+ components

Tailwind Component #629

Get the code for 13,400+ components

Tailwind Component #630

Get the code for 13,400+ components

Tailwind Component #631

Get the code for 13,400+ components

Tailwind Component #632

Get the code for 13,400+ components

Tailwind Component #633

Get the code for 13,400+ components

Tailwind Component #634

Get the code for 13,400+ components

Tailwind Component #635

Get the code for 13,400+ components

Tailwind Component #636

Get the code for 13,400+ components

Tailwind Component #637

Get the code for 13,400+ components

Tailwind Component #638

Get the code for 13,400+ components

Tailwind Component #639

Get the code for 13,400+ components

Tailwind Component #640

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