UI Components in Solstice library

Framework

UI Library

Components

Tailwind Component #1

Tailwind CSS

Solstice

<section class="overflow-hidden pb-24" 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

Hero Section with Navigation and Feature Preview Cards for Learning Community

A landing page hero with a top navigation bar, a centered bold headline 'Unlock collective knowledge', supporting text, and an orange call-to-action button, followed by three illustrative UI preview cards showing a note, a Pomodoro timer, and a todo list with avatars.

Tailwind Component #2

Tailwind CSS

Solstice

<section class="overflow-hidden relative" x-data="{ mobileNavOpen: false }">
  <div class="h-5" style="background: linear-gradient(99deg, #FF7100 6.68%, #FFE0A5 49.09%, #FFC96D 93.31%);"></div>
  <div class="bg-white relative z-10">
    <div class="container px-4 mx-auto">
      <div class="flex items-center justify-between py-6 relative z-10">
        <a href="#">
          <img src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
        </a>
        <ul class="hidden lg:flex items-center gap-8">
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="group-hover:text-opacity-70 transition duration-200">Platform</span>
              <div class="group-hover:text-opacity-70 transition duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </li>
          <li class="hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
          <li class="hover:text-opacity-70 transition duration-200"><a href="#">Community</a></li>
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="group-hover:text-opacity-70 transition duration-200">Resources</span>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Solstice Hero Section with Online Count and Community Photos

A light-background landing page hero with a centered headline "Unlock collective knowledge", supporting text, and an orange call-to-action button, flanked by two rounded photo cards of learners. The top navigation bar with Login and Get Started buttons is included above the hero content.

Tailwind Component #3

Tailwind CSS

Solstice

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #4

Tailwind CSS

Solstice

<section class="overflow-hidden pb-24" 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

Tailwind Component #5

Tailwind CSS

Solstice

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #6

Tailwind CSS

Solstice

<section class="overflow-hidden pb-24 bg-purple-900" 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-purple-400">
          <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="white"></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="#530031"></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="#530031"></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="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>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #7

Tailwind CSS

Solstice

<section class="overflow-hidden relative" x-data="{ mobileNavOpen: false }">
  <div class="h-5" style="background: linear-gradient(99deg, #FF7100 6.68%, #FFE0A5 49.09%, #FFC96D 93.31%);"></div>
  <div class="bg-purple-900 relative z-10">
    <div class="container px-4 mx-auto">
      <div class="flex items-center justify-between py-6 relative z-10">
        <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>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #8

Tailwind CSS

Solstice

<section class="overflow-hidden pb-24 bg-purple-900" x-data="{ mobileNavOpen: false }">
  <div class="border-b border-purple-800">
    <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

Tailwind Component #9

Tailwind CSS

Solstice

<section class="overflow-hidden pb-24 bg-purple-900" 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-purple-400">
          <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="white"></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="#530031"></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="#530031"></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="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>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #10

Tailwind CSS

Solstice

<section class="overflow-hidden bg-purple-900 pb-24" x-data="{ mobileNavOpen: false }">
  <div class="border-b border-purple-800">
    <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

Tailwind Component #11

Tailwind CSS

Solstice

<section class="overflow-hidden pb-24 bg-orange-100" 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

Tailwind Component #12

Tailwind CSS

Solstice

<section class="overflow-hidden relative" x-data="{ mobileNavOpen: false }">
  <div class="h-5" style="background: linear-gradient(99deg, #FF7100 6.68%, #FFE0A5 49.09%, #FFC96D 93.31%);"></div>
  <div class="bg-orange-100 relative z-10">
    <div class="container px-4 mx-auto">
      <div class="flex items-center justify-between py-6 relative z-10">
        <a href="#">
          <img src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
        </a>
        <ul class="hidden lg:flex items-center gap-8">
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="group-hover:text-opacity-70 transition duration-200">Platform</span>
              <div class="group-hover:text-opacity-70 transition duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </li>
          <li class="hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
          <li class="hover:text-opacity-70 transition duration-200"><a href="#">Community</a></li>
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="group-hover:text-opacity-70 transition duration-200">Resources</span>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #13

Tailwind CSS

Solstice

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #14

Tailwind CSS

Solstice

<section class="overflow-hidden pb-24 bg-orange-100" 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

Tailwind Component #15

Tailwind CSS

Solstice

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #16

Tailwind CSS

Solstice

<section class="overflow-hidden pb-24 bg-orange-500" 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-orange-300">
          <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="white"></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="#FF7100"></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="#FF7100"></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="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>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #17

Tailwind CSS

Solstice

<section class="overflow-hidden relative" x-data="{ mobileNavOpen: false }">
  <div class="h-5" style="background: linear-gradient(99deg, #FFA632 6.68%, #FFE0A5 49.09%, #FFC96D 93.31%);"></div>
  <div class="bg-orange-500 relative z-10">
    <div class="container px-4 mx-auto">
      <div class="flex items-center justify-between py-6 relative z-10">
        <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>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #18

Tailwind CSS

Solstice

<section class="overflow-hidden pb-24 bg-orange-500" x-data="{ mobileNavOpen: false }">
  <div class="border-b border-orange-400">
    <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

Tailwind Component #19

Tailwind CSS

Solstice

<section class="overflow-hidden pb-24 bg-orange-500" 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-orange-400">
          <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="white"></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="#FF7100"></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="#FF7100"></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="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>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #20

Tailwind CSS

Solstice

<section class="overflow-hidden bg-orange-500 pb-24" x-data="{ mobileNavOpen: false }">
  <div class="border-b border-orange-400">
    <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

Solstice UI Components by Shuffle

Choose from 1117 of ready-made UI components available in Shuffle Editor.

By subscribing to the editor, you get access to all of them.

The UI libraries are available in four frameworks - Tailwind CSS, Bootstrap, Bulma, and Material-UI (React). We divided them into components, under which there is clear code. In Shuffle Editor, you can build whole templates from them, editing styles, texts, images, and other features. You can also export them as code and work in your favorite IDE.

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

UI Components – Solstice Library

Framework

UI Library

Components

Tailwind Component #1

Get the code for 13,400+ components

Hero Section with Navigation and Feature Preview Cards for Learning Community

Tailwind Component #2

Get the code for 13,400+ components

Solstice Hero Section with Online Count and Community Photos

Tailwind Component #3

Get the code for 13,400+ components

Tailwind Component #4

Get the code for 13,400+ components

Tailwind Component #5

Get the code for 13,400+ components

Tailwind Component #6

Get the code for 13,400+ components

Tailwind Component #7

Get the code for 13,400+ components

Tailwind Component #8

Get the code for 13,400+ components

Tailwind Component #9

Get the code for 13,400+ components

Tailwind Component #10

Get the code for 13,400+ components

Tailwind Component #11

Get the code for 13,400+ components

Tailwind Component #12

Get the code for 13,400+ components

Tailwind Component #13

Get the code for 13,400+ components

Tailwind Component #14

Get the code for 13,400+ components

Tailwind Component #15

Get the code for 13,400+ components

Tailwind Component #16

Get the code for 13,400+ components

Tailwind Component #17

Get the code for 13,400+ components

Tailwind Component #18

Get the code for 13,400+ components

Tailwind Component #19

Get the code for 13,400+ components

Tailwind Component #20

Get the code for 13,400+ components

Solstice UI Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support