UI Components in Nightsable library

Tailwind Component #1

<section x-data="{ mobileNavOpen: false }" class="relative overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between pt-6 -m-2">
      <div class="w-auto p-2">
        <div class="flex flex-wrap items-center">
          <div class="w-auto">
            <a class="relative z-10 inline-block" href="#">
              <img src="nightsable-assets/logos/logo.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="w-auto p-2">
        <div class="flex flex-wrap items-center">
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center mr-12">
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Home</a></li>
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">About us</a></li>
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Wallet</a></li>
              <li class="text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Blog</a></li>
            </ul>
          </div>
          <div class="w-auto hidden lg:block">
            <div class="inline-block"><a class="inline-block px-8 py-4 text-white hover:text-black tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Get in touch</a></div>
          </div>
          <div class="w-auto lg:hidden">
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="relative z-10 inline-block">
              <svg class="text-green-500" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-black opacity-60"></div>
    <nav class="relative z-10 px-9 pt-8 h-full bg-black overflow-y-auto">
      <div class="flex flex-wrap justify-between h-full">
        <div class="w-full">
          <div class="flex items-center justify-between -m-2">
            <div class="w-auto p-2">
              <a class="inline-block" href="#">
                <img src="nightsable-assets/logos/logo.svg" alt="">
              </a>
            </div>
            <div class="w-auto p-2">
              <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-block text-white">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="flex flex-col justify-center py-16 w-full">
          <ul>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Home</a></li>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">About us</a></li>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Wallet</a></li>
            <li class="text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Blog</a></li>
          </ul>
        </div>
        <div class="flex flex-col justify-end w-full pb-8"><a class="inline-block px-8 py-4 text-center text-white hover:text-black tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Get in touch</a></div>
      </div>
    </nav>
  </div>
  <div class="relative pt-20 pb-24 lg:pb-40">
    <div class="relative z-10 container px-4 mx-auto">
      <div class="flex flex-wrap items-end -m-8">
        <div class="relative z-10 w-full md:w-1/2 lg:w-7/12 p-8">
          <div class="md:max-w-xl">
            <span class="inline-block mb-2.5 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
            <h1 class="font-heading mb-8 text-7xl lg:text-8xl xl:text-10xl text-white tracking-tighter">Making credit history with nightcard</h1>
            <p class="mb-10 text-lg text-white md:max-w-xs">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
            <a class="inline-block px-8 py-4 tracking-tighter bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Start now</a>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-5/12 p-8">
          <div class="relative max-w-max mx-auto md:mr-0">
            <img src="nightsable-assets/images/headers/card.png" alt="">
            <img class="absolute -top-16 -left-16" src="nightsable-assets/images/headers/star.svg" alt="">
            <img class="absolute top-56 -left-44" src="nightsable-assets/images/headers/star2.svg" alt="">
            <div class="absolute bottom-10 -right-40">
              <img class="relative -bottom-4" src="nightsable-assets/images/headers/star5.svg" alt="">
              <img src="nightsable-assets/images/headers/star3.svg" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <img class="absolute top-0 left-0" src="nightsable-assets/images/headers/layer-blur.svg" alt="">
  <img class="absolute top-24 right-0" src="nightsable-assets/images/headers/lines.svg" alt="">
</section>

Tailwind Component #2

Tailwind CSS

Nightsable

<section x-data="{ mobileNavOpen: false }" class="relative overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between pt-6 -m-2">
      <div class="w-auto p-2">
        <div class="flex flex-wrap items-center">
          <div class="w-auto">
            <a class="relative z-10 inline-block" href="#">
              <img src="nightsable-assets/logos/logo.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="w-auto p-2">
        <div class="flex flex-wrap items-center">
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center mr-12">
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Home</a></li>
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">About us</a></li>
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Wallet</a></li>
              <li class="text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Blog</a></li>
            </ul>
          </div>
          <div class="w-auto hidden lg:block">
            <div class="inline-block"><a class="inline-block px-8 py-4 text-white hover:text-black tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Get in touch</a></div>
          </div>
          <div class="w-auto lg:hidden">
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="relative z-10 inline-block">
              <svg class="text-green-500" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-black opacity-60"></div>
    <nav class="relative z-10 px-9 pt-8 h-full bg-black overflow-y-auto">
      <div class="flex flex-wrap justify-between h-full">
        <div class="w-full">
          <div class="flex items-center justify-between -m-2">
            <div class="w-auto p-2">
              <a class="inline-block" href="#">
                <img src="nightsable-assets/logos/logo.svg" alt="">
              </a>
            </div>
            <div class="w-auto p-2">
              <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-block text-white">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="flex flex-col justify-center py-16 w-full">
          <ul>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Home</a></li>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">About us</a></li>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Wallet</a></li>
            <li class="text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Blog</a></li>
          </ul>
        </div>
        <div class="flex flex-col justify-end w-full pb-8"><a class="inline-block px-8 py-4 text-center text-white hover:text-black tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Get in touch</a></div>
      </div>
    </nav>
  </div>
  <div class="relative pt-20 lg:pt-28">
    <div class="relative z-10 container px-4 mx-auto">
      <div class="relative mb-24 text-center md:max-w-4xl mx-auto">
        <img class="absolute top-44 -left-36" src="nightsable-assets/images/headers/star2.svg" alt="">
        <img class="absolute top-10 -right-36" src="nightsable-assets/images/headers/star2.svg" alt="">
        <span class="inline-block mb-2.5 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
        <h1 class="font-heading mb-10 text-7xl lg:text-8xl xl:text-10xl text-white tracking-tighter">Making credit history with nightcard</h1>
        <a class="inline-block px-8 py-4 tracking-tighter bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Start now</a>
      </div>
      <div class="relative max-w-max mx-auto">
        <img src="nightsable-assets/images/headers/card-half.png" alt="">
        <img class="absolute top-7 -right-64" src="nightsable-assets/images/headers/star.svg" alt="">
      </div>
    </div>
  </div>
  <img class="absolute top-0 left-48" src="nightsable-assets/images/headers/layer-blur.svg" alt="">
  <img class="absolute bottom-0 right-0" src="nightsable-assets/images/headers/lines2.svg" alt="">
</section>

Tailwind Component #3

Tailwind CSS

Nightsable

<section x-data="{ mobileNavOpen: false }" class="relative overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between pt-6 -m-2">
      <div class="w-auto p-2">
        <div class="flex flex-wrap items-center">
          <div class="w-auto">
            <a class="relative z-10 inline-block" href="#">
              <img src="nightsable-assets/logos/logo.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="w-auto p-2">
        <div class="flex flex-wrap items-center">
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center mr-12">
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Home</a></li>
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">About us</a></li>
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Wallet</a></li>
              <li class="text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Blog</a></li>
            </ul>
          </div>
          <div class="w-auto hidden lg:block">
            <div class="inline-block"><a class="inline-block px-8 py-4 text-white hover:text-black tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Get in touch</a></div>
          </div>
          <div class="w-auto lg:hidden">
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="relative z-10 inline-block">
              <svg class="text-green-500" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-black opacity-60"></div>
    <nav class="relative z-10 px-9 pt-8 h-full bg-black overflow-y-auto">
      <div class="flex flex-wrap justify-between h-full">
        <div class="w-full">
          <div class="flex items-center justify-between -m-2">
            <div class="w-auto p-2">
              <a class="inline-block" href="#">
                <img src="nightsable-assets/logos/logo.svg" alt="">
              </a>
            </div>
            <div class="w-auto p-2">
              <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-block text-white">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="flex flex-col justify-center py-16 w-full">
          <ul>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Home</a></li>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">About us</a></li>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Wallet</a></li>
            <li class="text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Blog</a></li>
          </ul>
        </div>
        <div class="flex flex-col justify-end w-full pb-8"><a class="inline-block px-8 py-4 text-center text-white hover:text-black tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Get in touch</a></div>
      </div>
    </nav>
  </div>
  <div class="relative pt-14 pb-16">
    <div class="relative z-10 container px-4 mx-auto">
      <div class="flex flex-wrap lg:items-center -m-8">
        <div class="w-full md:w-1/2 p-8">
          <span class="inline-block mb-2.5 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
          <h1 class="font-heading mb-10 text-7xl lg:text-8xl xl:text-10xl text-white tracking-tighter">
            <span>Making credit</span>
            <span class="inline-block">
              <img class="inline-block pr-6" src="nightsable-assets/images/headers/star4.svg" alt="">
              <span>history</span>
            </span>
            <span>with nightcard</span>
          </h1>
          <div class="flex flex-wrap -m-2 mb-12">
            <div class="w-auto p-2"><a class="inline-block px-8 py-4 tracking-tighter border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Start now for free</a></div>
            <div class="w-auto p-2"><a class="inline-block px-8 py-4 text-white hover:text-black tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Log in</a></div>
          </div>
          <p class="text-lg text-white md:max-w-xs">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
        </div>
        <div class="w-full md:w-1/2 p-8">
          <div class="max-w-max mx-auto md:mr-0">
            <img src="nightsable-assets/images/headers/man.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <img class="absolute top-0 left-0" src="nightsable-assets/images/headers/layer-blur.svg" alt="">
</section>

Tailwind Component #4

Tailwind CSS

Nightsable

<section x-data="{ mobileNavOpen: false }" class="relative overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between pt-6 -m-2">
      <div class="w-auto p-2">
        <div class="flex flex-wrap items-center">
          <div class="w-auto">
            <a class="relative z-10 inline-block" href="#">
              <img src="nightsable-assets/logos/logo.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="w-auto p-2">
        <div class="flex flex-wrap items-center">
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center mr-12">
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Home</a></li>
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">About us</a></li>
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Wallet</a></li>
              <li class="text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Blog</a></li>
            </ul>
          </div>
          <div class="w-auto hidden lg:block">
            <div class="inline-block"><a class="inline-block px-8 py-4 text-white hover:text-black tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Get in touch</a></div>
          </div>
          <div class="w-auto lg:hidden">
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="relative z-10 inline-block">
              <svg class="text-green-500" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-black opacity-60"></div>
    <nav class="relative z-10 px-9 pt-8 h-full bg-black overflow-y-auto">
      <div class="flex flex-wrap justify-between h-full">
        <div class="w-full">
          <div class="flex items-center justify-between -m-2">
            <div class="w-auto p-2">
              <a class="inline-block" href="#">
                <img src="nightsable-assets/logos/logo.svg" alt="">
              </a>
            </div>
            <div class="w-auto p-2">
              <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-block text-white">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="flex flex-col justify-center py-16 w-full">
          <ul>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Home</a></li>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">About us</a></li>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Wallet</a></li>
            <li class="text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Blog</a></li>
          </ul>
        </div>
        <div class="flex flex-col justify-end w-full pb-8"><a class="inline-block px-8 py-4 text-center text-white hover:text-black tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Get in touch</a></div>
      </div>
    </nav>
  </div>
  <div class="relative pt-16 pb-24">
    <div class="relative z-10 container px-4 mx-auto">
      <div class="mb-24 text-center md:max-w-4xl mx-auto">
        <span class="inline-block mb-2.5 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
        <h1 class="font-heading mb-8 text-7xl lg:text-8xl text-white tracking-tighter">Making credit history with Nightsable</h1>
        <p class="mb-10 text-lg text-white md:max-w-sm mx-auto">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
        <div class="flex flex-wrap justify-center -m-2">
          <div class="w-auto p-2"><a class="inline-block px-8 py-4 tracking-tighter border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Start now for free</a></div>
          <div class="w-auto p-2"><a class="inline-block px-8 py-4 text-white hover:text-black tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Log in</a></div>
        </div>
      </div>
      <img class="mx-auto" src="nightsable-assets/images/headers/dashboard.png" alt="">
    </div>
  </div>
  <img class="absolute top-0 left-20" src="nightsable-assets/images/headers/layer-blur.svg" alt="">
</section>

Tailwind Component #5

Tailwind CSS

Nightsable

<section x-data="{ mobileNavOpen: false }" class="relative overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between pt-6 -m-2">
      <div class="w-auto p-2">
        <div class="flex flex-wrap items-center">
          <div class="w-auto">
            <a class="relative z-10 inline-block" href="#">
              <img src="nightsable-assets/logos/logo.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="w-auto p-2">
        <div class="flex flex-wrap items-center">
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center mr-12">
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Home</a></li>
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">About us</a></li>
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Wallet</a></li>
              <li class="text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Blog</a></li>
            </ul>
          </div>
          <div class="w-auto hidden lg:block">
            <div class="inline-block"><a class="inline-block px-8 py-4 text-white hover:text-black tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Get in touch</a></div>
          </div>
          <div class="w-auto lg:hidden">
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="relative z-10 inline-block">
              <svg class="text-green-500" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-black opacity-60"></div>
    <nav class="relative z-10 px-9 pt-8 h-full bg-black overflow-y-auto">
      <div class="flex flex-wrap justify-between h-full">
        <div class="w-full">
          <div class="flex items-center justify-between -m-2">
            <div class="w-auto p-2">
              <a class="inline-block" href="#">
                <img src="nightsable-assets/logos/logo.svg" alt="">
              </a>
            </div>
            <div class="w-auto p-2">
              <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-block text-white">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="flex flex-col justify-center py-16 w-full">
          <ul>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Home</a></li>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">About us</a></li>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Wallet</a></li>
            <li class="text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Blog</a></li>
          </ul>
        </div>
        <div class="flex flex-col justify-end w-full pb-8"><a class="inline-block px-8 py-4 text-center text-white hover:text-black tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Get in touch</a></div>
      </div>
    </nav>
  </div>
  <div class="relative pt-16">
    <div class="relative z-10 container px-4 mx-auto">
      <div class="relative text-center md:max-w-2xl mx-auto">
        <span class="inline-block mb-2.5 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
        <h1 class="font-heading mb-8 text-7xl lg:text-8xl text-white tracking-tighter">Making credit history</h1>
        <p class="mb-8 text-lg text-white md:max-w-sm mx-auto">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
        <div class="mb-8 relative md:max-w-lg mx-auto border border-gray-900 focus-within:ring-4 focus-within:ring-green-500 focus-within:ring-opacity-40 rounded-full transition duration-300">
          <div class="flex flex-wrap">
            <div class="flex-1">
              <input class="w-full h-full px-8 text-gray-300 font-medium tracking-tighter outline-none placeholder-gray-300 bg-transparent" type="text" placeholder="Enter your e-mail">
            </div>
            <div class="w-auto p-2"><a class="inline-block px-6 py-3 font-medium tracking-tighter bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Try for free</a></div>
          </div>
        </div>
        <ul class="relative flex flex-wrap justify-center -m-2 mb-16">
          <li class="flex w-auto p-2">
            <span class="mr-2 text-sm text-gray-300 font-medium tracking-tighter">Undetectable AI content</span>
            <img src="nightsable-assets/images/headers/star-list.svg" alt="">
          </li>
          <li class="flex w-auto p-2">
            <span class="mr-2 text-sm text-gray-300 font-medium tracking-tighter">Industry-leading personalization</span>
            <img src="nightsable-assets/images/headers/star-list.svg" alt="">
          </li>
          <li class="flex w-auto p-2">
            <span class="text-sm text-gray-300 font-medium tracking-tighter">14 days free trial</span>
          </li>
          <img class="absolute -bottom-6 -right-24" src="nightsable-assets/images/headers/star.svg" alt="">
        </ul>
        <img class="mx-auto" src="nightsable-assets/images/headers/card-half.png" alt="">
        <img class="absolute -left-44 top-20" src="nightsable-assets/images/headers/star.svg" alt="">
        <img class="absolute -right-44 top-20" src="nightsable-assets/images/headers/star2.svg" alt="">
      </div>
    </div>
    <img class="absolute -bottom-8 right-0" src="nightsable-assets/images/headers/lines3.svg" alt="">
    <img class="absolute -bottom-8 right-0" src="nightsable-assets/images/headers/layer-blur2.svg" alt="">
  </div>
  <img class="absolute top-0 left-0" src="nightsable-assets/images/headers/layer-blur.svg" alt="">
</section>

Tailwind Component #6

Tailwind CSS

Nightsable

<section class="overflow-hidden">
  <div class="flex items-center gap-4 p-2">
    <a class="text-white font-normal" href="#">Homepage</a>
    <span class="text-white font-normal">/</span>
    <a class="text-white font-normal text-opacity-60" href="#">Services</a>
  </div>
</section>

Tailwind Component #7

Tailwind CSS

Nightsable

<section x-data="{ showContent: false, active: 'all' }" class="py-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="md:max-w-4xl text-center mx-auto">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading mb-12 text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">Open positions</h2>
      <div class="flex flex-wrap justify-center mb-12">
        <div class="w-auto"><a x-on:click.prevent="active = 'all'" :class="{'text-green-400 border-green-400': active === 'all', 'text-gray-300 border-transparent': active !== 'all'}" class="inline-block py-5 px-8 text-green-400 font-medium border-2 border-green-400 rounded-full" href="#">All</a></div>
        <div class="w-auto"><a x-on:click.prevent="active = 'design'" :class="{'text-green-400 border-green-400': active === 'design', 'text-gray-300 border-transparent': active !== 'design'}" class="inline-block py-5 px-8 text-gray-300 font-medium border-2 border-transparent rounded-full" href="#">Design</a></div>
        <div class="w-auto"><a x-on:click.prevent="active = 'software-engineering'" :class="{'text-green-400 border-green-400': active === 'software-engineering', 'text-gray-300 border-transparent': active !== 'software-engineering'}" class="inline-block py-5 px-8 text-gray-300 font-medium border-2 border-transparent rounded-full" href="#">Software Engineering</a></div>
        <div class="w-auto"><a x-on:click.prevent="active = 'customer-success'" :class="{'text-green-400 border-green-400': active === 'customer-success', 'text-gray-300 border-transparent': active !== 'customer-success'}" class="inline-block py-5 px-8 text-gray-300 font-medium border-2 border-transparent rounded-full" href="#">Customer Success</a></div>
        <div class="w-auto"><a x-on:click.prevent="active = 'sales'" :class="{'text-green-400 border-green-400': active === 'sales', 'text-gray-300 border-transparent': active !== 'sales'}" class="inline-block py-5 px-8 text-gray-300 font-medium border-2 border-transparent rounded-full" href="#">Sales</a></div>
        <div class="w-auto"><a x-on:click.prevent="active = 'marketing'" :class="{'text-green-400 border-green-400': active === 'marketing', 'text-gray-300 border-transparent': active !== 'marketing'}" class="inline-block py-5 px-8 text-gray-300 font-medium border-2 border-transparent rounded-full" href="#">Marketing</a></div>
      </div>
    </div>
    <div class="relative max-w-5xl mx-auto overflow-hidden mb-20">
      <div class="flex flex-wrap -m-2">
        <div x-show="active === 'marketing' || active === 'all'" class="w-full p-2">
          <div class="p-12 border border-gray-900 rounded-5xl">
            <div class="flex flex-wrap items-center -m-2">
              <div class="w-full md:flex-1 p-2">
                <ul class="flex flex-wrap mb-3 -m-2">
                  <li class="flex flex-wrap items-center p-2">
                    <span class="mr-4 text-sm text-green-400">Marketing</span>
                    <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="#9F9FA0"></path>
                    </svg>
                  </li>
                  <li class="flex flex-wrap items-center text-gray-300 p-2">
                    <span class="mr-4 text-sm text-gray-300">Remote</span>
                    <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="#9F9FA0"></path>
                    </svg>
                  </li>
                  <li class="text-sm text-gray-300 p-2">Full Time</li>
                </ul>
                <a class="group inline-block mb-4" href="#">
                  <h3 class="text-3xl text-white tracking-3xl hover:underline">Product Manager, Instagram Camera</h3>
                </a>
                <p class="text-gray-300 md:max-w-sm">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
              </div>
              <div class="w-full md:w-auto p-2">
                <a class="flex md:justify-end" href="#">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.79688 17.43L13.5019 11.725C14.1756 11.0512 14.1756 9.94873 13.5019 9.27498L7.79688 3.56998" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div x-show="active === 'customer-success' || active === 'all'" class="w-full p-2">
          <div class="p-12 border border-gray-900 rounded-5xl">
            <div class="flex flex-wrap items-center -m-2">
              <div class="w-full md:flex-1 p-2">
                <ul class="flex flex-wrap mb-3 -m-2">
                  <li class="flex flex-wrap items-center p-2">
                    <span class="mr-4 text-sm text-green-400">Customer Success</span>
                    <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="#9F9FA0"></path>
                    </svg>
                  </li>
                  <li class="flex flex-wrap items-center text-gray-300 p-2">
                    <span class="mr-4 text-sm text-gray-300">Remote</span>
                    <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="#9F9FA0"></path>
                    </svg>
                  </li>
                  <li class="text-sm text-gray-300 p-2">Full Time</li>
                </ul>
                <a class="group inline-block mb-4" href="#">
                  <h3 class="text-3xl text-white tracking-3xl hover:underline">Research Director</h3>
                </a>
                <p class="text-gray-300 md:max-w-sm">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
              </div>
              <div class="w-full md:w-auto p-2">
                <a class="flex md:justify-end" href="#">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.79688 17.43L13.5019 11.725C14.1756 11.0512 14.1756 9.94873 13.5019 9.27498L7.79688 3.56998" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div x-show="active === 'marketing' || active === 'all'" class="w-full p-2">
          <div class="p-12 border border-gray-900 rounded-5xl">
            <div class="flex flex-wrap items-center -m-2">
              <div class="w-full md:flex-1 p-2">
                <ul class="flex flex-wrap mb-3 -m-2">
                  <li class="flex flex-wrap items-center p-2">
                    <span class="mr-4 text-sm text-green-400">Marketing</span>
                    <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="#9F9FA0"></path>
                    </svg>
                  </li>
                  <li class="flex flex-wrap items-center text-gray-300 p-2">
                    <span class="mr-4 text-sm text-gray-300">Remote</span>
                    <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="#9F9FA0"></path>
                    </svg>
                  </li>
                  <li class="text-sm text-gray-300 p-2">Full Time</li>
                </ul>
                <a class="group inline-block mb-4" href="#">
                  <h3 class="text-3xl text-white tracking-3xl hover:underline">Customer Success Manager</h3>
                </a>
                <p class="text-gray-300 md:max-w-sm">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
              </div>
              <div class="w-full md:w-auto p-2">
                <a class="flex md:justify-end" href="#">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.79688 17.43L13.5019 11.725C14.1756 11.0512 14.1756 9.94873 13.5019 9.27498L7.79688 3.56998" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div x-show="active === 'software-engineering' || active === 'all'" class="w-full p-2">
          <div class="p-12 border border-gray-900 rounded-5xl">
            <div class="flex flex-wrap items-center -m-2">
              <div class="w-full md:flex-1 p-2">
                <ul class="flex flex-wrap mb-3 -m-2">
                  <li class="flex flex-wrap items-center p-2">
                    <span class="mr-4 text-sm text-green-400">Software Engineering</span>
                    <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="#9F9FA0"></path>
                    </svg>
                  </li>
                  <li class="flex flex-wrap items-center text-gray-300 p-2">
                    <span class="mr-4 text-sm text-gray-300">Remote</span>
                    <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="#9F9FA0"></path>
                    </svg>
                  </li>
                  <li class="text-sm text-gray-300 p-2">Full Time</li>
                </ul>
                <a class="group inline-block mb-4" href="#">
                  <h3 class="text-3xl text-white tracking-3xl hover:underline">Engineering Manager</h3>
                </a>
                <p class="text-gray-300 md:max-w-sm">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
              </div>
              <div class="w-full md:w-auto p-2">
                <a class="flex md:justify-end" href="#">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.79688 17.43L13.5019 11.725C14.1756 11.0512 14.1756 9.94873 13.5019 9.27498L7.79688 3.56998" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div x-show="active === 'design' || active === 'all'" class="w-full p-2">
          <div class="p-12 border border-gray-900 rounded-5xl">
            <div class="flex flex-wrap items-center -m-2">
              <div class="w-full md:flex-1 p-2">
                <ul class="flex flex-wrap mb-3 -m-2">
                  <li class="flex flex-wrap items-center p-2">
                    <span class="mr-4 text-sm text-green-400">Design</span>
                    <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="#9F9FA0"></path>
                    </svg>
                  </li>
                  <li class="flex flex-wrap items-center text-gray-300 p-2">
                    <span class="mr-4 text-sm text-gray-300">Remote</span>
                    <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="#9F9FA0"></path>
                    </svg>
                  </li>
                  <li class="text-sm text-gray-300 p-2">Full Time</li>
                </ul>
                <a class="group inline-block mb-4" href="#">
                  <h3 class="text-3xl text-white tracking-3xl hover:underline">Product Designer</h3>
                </a>
                <p class="text-gray-300 md:max-w-sm">Ngihtsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
              </div>
              <div class="w-full md:w-auto p-2">
                <a class="flex md:justify-end" href="#">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.79688 17.43L13.5019 11.725C14.1756 11.0512 14.1756 9.94873 13.5019 9.27498L7.79688 3.56998" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div x-show="showContent &amp;&amp; active === 'marketing' || showContent &amp;&amp; active === 'all'" class="visibility-item w-full p-2">
          <div class="p-12 border border-gray-900 rounded-5xl">
            <div class="flex flex-wrap items-center -m-2">
              <div class="w-full md:flex-1 p-2">
                <ul class="flex flex-wrap mb-3 -m-2">
                  <li class="flex flex-wrap items-center p-2">
                    <span class="mr-4 text-sm text-green-400">Marketing</span>
                    <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="#9F9FA0"></path>
                    </svg>
                  </li>
                  <li class="flex flex-wrap items-center text-gray-300 p-2">
                    <span class="mr-4 text-sm text-gray-300">Remote</span>
                    <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="#9F9FA0"></path>
                    </svg>
                  </li>
                  <li class="text-sm text-gray-300 p-2">Full Time</li>
                </ul>
                <a class="group inline-block mb-4" href="#">
                  <h3 class="text-3xl text-white tracking-3xl hover:underline">Manager</h3>
                </a>
                <p class="text-gray-300 md:max-w-sm">Ngihtsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
              </div>
              <div class="w-full md:w-auto p-2">
                <a class="flex md:justify-end" href="#">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.79688 17.43L13.5019 11.725C14.1756 11.0512 14.1756 9.94873 13.5019 9.27498L7.79688 3.56998" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div x-show="!showContent" class="absolute z-10 left bottom-0 transform rotate-180 bg-gradient-radial-darker w-full h-1/2"></div>
    </div>
    <div x-show="!showContent" class="flex flex-wrap justify-center max-w-xs mx-auto mb-6">
      <div class="w-full">
        <a x-on:click.prevent="showContent = true" class="block px-14 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">See all positions</a>
      </div>
    </div>
  </div>
</section>

Tailwind Component #8

Tailwind CSS

Nightsable

<section class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-16 md:max-w-2xl text-center mx-auto">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">FAQ</h2>
    </div>
    <div class="flex flex-wrap p-3 md:-m-8">
      <div class="w-full md:w-1/2 p-3 md:p-8">
        <div class="flex flex-wrap -m-3">
          <div class="w-full p-3">
            <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block py-7 border-b border-gray-900" href="#">
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <h3 class="text-2xl text-white tracking-2xl">Investing Basics</h3>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div :class="{ 'hidden': accordion }">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <div :class="{ 'hidden': !accordion }" class="hidden transform rotate-180">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
          </div>
          <div class="w-full p-3">
            <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block py-7 border-b border-gray-900" href="#">
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <h3 class="text-2xl text-white tracking-2xl">Portfolio Diversification</h3>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div :class="{ 'hidden': accordion }">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <div :class="{ 'hidden': !accordion }" class="hidden transform rotate-180">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
          </div>
          <div class="w-full p-3">
            <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block py-7 border-b border-gray-900" href="#">
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <h3 class="text-2xl text-white tracking-2xl">Crypto Q&amp;A</h3>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div :class="{ 'hidden': accordion }">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <div :class="{ 'hidden': !accordion }" class="hidden transform rotate-180">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
          </div>
          <div class="w-full p-3">
            <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block py-7 border-b border-gray-900" href="#">
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <h3 class="text-2xl text-white tracking-2xl">Sustainable Investing</h3>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div :class="{ 'hidden': accordion }">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <div :class="{ 'hidden': !accordion }" class="hidden transform rotate-180">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-3 md:p-8">
        <div class="flex flex-wrap -m-3">
          <div class="w-full p-3">
            <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block py-7 border-b border-gray-900" href="#">
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <h3 class="text-2xl text-white tracking-2xl">Real Estate Insights</h3>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div :class="{ 'hidden': accordion }">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <div :class="{ 'hidden': !accordion }" class="hidden transform rotate-180">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
          </div>
          <div class="w-full p-3">
            <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block py-7 border-b border-gray-900" href="#">
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <h3 class="text-2xl text-white tracking-2xl">Risk Management Tips</h3>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div :class="{ 'hidden': accordion }">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <div :class="{ 'hidden': !accordion }" class="hidden transform rotate-180">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
          </div>
          <div class="w-full p-3">
            <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block py-7 border-b border-gray-900" href="#">
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <h3 class="text-2xl text-white tracking-2xl">Stock Market FAQs</h3>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div :class="{ 'hidden': accordion }">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <div :class="{ 'hidden': !accordion }" class="hidden transform rotate-180">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
          </div>
          <div class="w-full p-3">
            <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block py-7 border-b border-gray-900" href="#">
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <h3 class="text-2xl text-white tracking-2xl">Retirement Planning</h3>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div :class="{ 'hidden': accordion }">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <div :class="{ 'hidden': !accordion }" class="hidden transform rotate-180">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #9

Tailwind CSS

Nightsable

<section x-data="{ toggle: true }" class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 md:max-w-2xl text-center mx-auto">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading mb-8 text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">Compare our plans</h2>
      <p class="mb-12 text-gray-300 max-w-sm mx-auto">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
      <div x-on:click="toggle = !toggle" class="relative p-1 max-w-max mx-auto bg-gradient-radial-dark-light rounded-full">
        <input class="opacity-0 absolute top-0 left-0 z-10 w-full h-full" type="checkbox">
        <div class="flex flex-wrap items-center">
          <div class="relative w-full sm:w-auto">
            <a :class="{'text-black bg-white': toggle, 'text-gray-300': !toggle}" class="block py-5 px-9 text-center text-black bg-white focus:ring-4 focus:ring-white focus:ring-opacity-40 font-medium rounded-full transition-all duration-200" href="#">Monthly billing</a>
          </div>
          <div class="relative flex-1">
            <a :class="{'bg-white': !toggle }" class="flex flex-wrap items-center justify-center py-3.5 px-9 text-center rounded-full transition-all duration-200" href="#">
              <p :class="{'text-black': !toggle, 'text-gray-300': toggle}" class="mr-2.5 text-gray-300 font-medium">Annual billing</p>
              <span class="px-3 py-1.5 text-sm font-medium text-center text-green-400 uppercase border border-green-400 rounded-full">Save 20%</span>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative px-8 pt-12 pb-12 h-full bg-gradient-radial-dark border-2 border-gray-900 border-opacity-30 overflow-hidden rounded-5xl">
          <p class="mb-2 text-lg text-white font-light">Basic</p>
          <p class="mb-6 text-gray-300">During this phase the design is developed to meet the required technical standards to</p>
          <p class="mb-4 text-white font-medium text-5xl">
            <span :class="{ 'hidden': !toggle }">$10</span>
            <span :class="{ 'hidden': !toggle }" class="text-base font-medium text-gray-300">/ month</span>
            <span :class="{ 'hidden': toggle }" class="hidden">$20</span>
            <span :class="{ 'hidden': toggle }" class="hidden text-base font-medium text-gray-300">/ year</span>
          </p>
          <p class="mb-6 text-xs text-gray-300 font-light uppercase">What's includes</p>
          <ul class="mb-10">
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Core engagement survey</p>
            </li>
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Topic-based assessments</p>
            </li>
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Custom topic-based assessments</p>
            </li>
            <li class="flex items-center">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Filterable heatmap &amp; analytics</p>
            </li>
          </ul>
          <a class="relative z-10 block px-14 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Start now</a>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/pricing/shadow.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative px-8 pt-12 pb-12 h-full bg-gradient-radial-dark border-2 border-gray-900 border-opacity-30 overflow-hidden rounded-5xl">
          <p class="mb-2 text-lg text-white font-light">Business plan</p>
          <p class="mb-6 text-gray-300">During this phase the design is developed to meet the required technical standards to</p>
          <p class="mb-4 text-white font-medium text-5xl">
            <span :class="{ 'hidden': !toggle }">$25</span>
            <span :class="{ 'hidden': !toggle }" class="text-base font-medium text-gray-300">/ month</span>
            <span :class="{ 'hidden': toggle }" class="hidden">$50</span>
            <span :class="{ 'hidden': toggle }" class="hidden text-base font-medium text-gray-300">/ year</span>
          </p>
          <p class="mb-6 text-xs text-gray-300 font-light uppercase">What's includes</p>
          <ul class="mb-10">
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Core engagement survey</p>
            </li>
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Topic-based assessments</p>
            </li>
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Custom topic-based assessments</p>
            </li>
            <li class="flex items-center">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Filterable heatmap &amp; analytics</p>
            </li>
          </ul>
          <a class="relative z-10 block px-14 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Start now</a>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/pricing/shadow.svg" alt="">
        </div>
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <div class="relative px-8 pt-12 pb-12 h-full bg-gradient-radial-dark border-2 border-gray-900 border-opacity-30 overflow-hidden rounded-5xl">
          <p class="mb-2 text-lg text-white font-light">Premium</p>
          <p class="mb-6 text-gray-300">During this phase the design is developed to meet the required technical standards to</p>
          <p class="mb-4 text-white font-medium text-5xl">
            <span :class="{ 'hidden': !toggle }">$50</span>
            <span :class="{ 'hidden': !toggle }" class="text-base font-medium text-gray-300">/ month</span>
            <span :class="{ 'hidden': toggle }" class="hidden">$100</span>
            <span :class="{ 'hidden': toggle }" class="hidden text-base font-medium text-gray-300">/ year</span>
          </p>
          <p class="mb-6 text-xs text-gray-300 font-light uppercase">What's includes</p>
          <ul class="mb-10">
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Core engagement survey</p>
            </li>
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Topic-based assessments</p>
            </li>
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Custom topic-based assessments</p>
            </li>
            <li class="flex items-center">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Filterable heatmap &amp; analytics</p>
            </li>
          </ul>
          <a class="relative z-10 block px-14 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Start now</a>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/pricing/shadow.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #10

Tailwind CSS

Nightsable

<div class="z-50 fixed left-0 bottom-0 w-full pb-10 px-4">
  <div class="flex items-center p-4 px-9 max-w-max mx-auto rounded-full" style="background-color: #00AC26;">
    <img class="mr-4" src="nightsable-assets/images/toast/check-icon.svg" alt="">
    <span class="text-white">Your settings have been saved</span>
  </div>
</div>

Tailwind Component #11

Tailwind CSS

Nightsable

<section class="relative py-20 overflow-hidden">
  <img class="absolute top-0 left-0" src="nightsable-assets/images/blog-content/shadow.png" alt="">
  <div class="container px-4 mx-auto">
    <div class="relative z-10 mb-12 md:max-w-md text-center mx-auto">
      <h2 class="font-heading mb-4 text-3xl text-white tracking-3xl">Women in business: an interview with Sarah Townsend</h2>
      <p class="mb-6 text-white text-opacity-60">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
      <div class="flex flex-wrap justify-center items-center -m-2">
        <div class="w-auto p-2">
          <img src="nightsable-assets/images/blog-content/avatar.png" alt="">
        </div>
        <div class="w-auto p-2">
          <p class="text-sm text-white font-medium tracking-tighter">Wade Warren</p>
        </div>
        <div class="w-auto p-2">
          <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M2.492 3H0.574V0.83H2.492V3Z" fill="white"></path>
          </svg>
        </div>
        <div class="w-auto p-2">
          <p class="text-sm text-white font-medium tracking-tighter">9 min read</p>
        </div>
      </div>
    </div>
  </div>
  <div class="relative px-4">
    <img class="hidden md:block absolute -top-44 right-0" src="nightsable-assets/images/blog-content/lines.png" alt="">
    <img class="relative z-10 mx-auto border border-white border-opacity-10 rounded-5xl" src="nightsable-assets/images/blog-content/header.png" alt="">
  </div>
  <div class="container px-4 mx-auto">
    <div class="relative border-b border-blueGray-900">
      <div class="max-w-3xl pt-8 mx-auto">
        <div class="border-b border-blueGray-900">
          <h3 class="mb-10 text-2xl text-gray-100 tracking-2xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</h3>
        </div>
        <div class="pt-8 pb-16">
          <h2 class="font-heading mb-4 text-3xl text-blueGray-50 tracking-3xl">Header 1</h2>
          <p class="mb-6 text-lg text-blueGray-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
          <div class="flex flex-wrap mb-9">
            <div class="w-auto p-3">
              <div class="w-0.5 bg-green-400 h-full rounded-md"></div>
            </div>
            <div class="flex-1 mb-5 p-3">
              <h3 class="mb-4 text-2xl text-gray-200 tracking-2xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus.</h3>
              <p class="text-lg text-gray-100">— John Doe, CEO &amp; Founder</p>
            </div>
            <p class="mb-8 text-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
            <img class="mb-4" src="nightsable-assets/images/blog-content/header2.png" alt="">
            <p class="text-lg text-blueGray-200">Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
          </div>
          <h2 class="font-heading mb-4 text-3xl text-blueGray-50 tracking-3xl">Header 1</h2>
          <h3 class="mb-9 text-2xl text-gray-100 tracking-2xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</h3>
          <h3 class="mb-9 text-2xl text-gray-100 tracking-2xl">Sagittis et eu at elementum, quis in. Proin praesent volutpat egestas sociis sit lorem nunc nunc sit. Eget diam curabitur mi ac. Auctor rutrum lacus malesuada massa ornare et. Vulputate consectetur ac ultrices at diam dui eget fringilla tincidunt. Arcu sit dignissim massa erat cursus vulputate gravida id. Sed quis auctor vulputate hac elementum gravida cursus dis.</h3>
          <ul class="mb-9">
            <li class="text-2xl text-gray-100">1. Lectus id duis vitae porttitor enim gravida morbi.</li>
            <li class="text-2xl text-gray-100">2. Eu turpis posuere semper feugiat volutpat elit, ultrices suspendisse. Auctor vel in vitae placerat.</li>
            <li class="text-2xl text-gray-100">3. Suspendisse maecenas ac donec scelerisque diam sed est duis purus.</li>
          </ul>
          <h3 class="mb-12 text-2xl text-gray-100 tracking-2xl">Vestibulum placerat magna nulla, sit amet venenatis sapien consequat ut. Cras pulvinar, lorem tristique pharetra finibus, dui erat finibus orci, a vehicula arcu sapien id metus. Quisque quis lorem a sem porttitor feugiat. Etiam quis congue est. Donec fermentum ac libero a pretium. Nulla nisl sem, euismod ut eros vitae, egestas scelerisque enim. <a class="text-green-500 underline" href="#">Vivamus id pharetra massa</a>. Nulla aliquet erat elit, a gravida dui efficitur vel. Sed pulvinar diam sed neque ullamcorper semper. Nulla elementum arcu lacus, quis porta nisl posuere varius. Quisque tempus libero sed urna posuere hendrerit.</h3>
          <div class="flex flex-wrap justify-center -m-2">
            <div class="w-auto p-2"><a class="inline-block px-8 py-4 text-white hover:text-black font-medium tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Copy Link</a></div>
            <div class="w-auto p-2">
              <a class="flex items-center justify-center text-white hover:text-black font-medium tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#" style="width: 60px; height: 60px;">
                <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.59948 3.43344H9.16615V0.78344C8.4076 0.704562 7.64544 0.665619 6.88281 0.666773C4.61615 0.666773 3.06615 2.05011 3.06615 4.58344V6.76677H0.507812V9.73344H3.06615V17.3334H6.13281V9.73344H8.68281L9.06614 6.76677H6.13281V4.87511C6.13281 4.00011 6.36615 3.43344 7.59948 3.43344Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
            <div class="w-auto p-2">
              <a class="flex items-center justify-center text-white hover:text-black font-medium tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#" style="width: 60px; height: 60px;">
                <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17.3346 1.83326C16.7083 2.10501 16.0458 2.28465 15.368 2.3666C16.0831 1.93936 16.619 1.26725 16.8763 0.474931C16.2043 0.874983 15.4686 1.15684 14.7013 1.30826C14.1884 0.752074 13.5054 0.381844 12.7595 0.25564C12.0135 0.129436 11.2468 0.254396 10.5795 0.610922C9.91217 0.967448 9.38208 1.53537 9.07234 2.22563C8.76259 2.91588 8.69071 3.68942 8.86797 4.42493C7.50916 4.3562 6.18 4.00239 4.96685 3.38648C3.75369 2.77057 2.68367 1.90634 1.8263 0.84993C1.52558 1.37507 1.36757 1.96978 1.36797 2.57493C1.3669 3.13692 1.50482 3.69044 1.76943 4.18623C2.03405 4.68202 2.41715 5.10469 2.88464 5.4166C2.34128 5.40181 1.80954 5.25601 1.33464 4.9916V5.03326C1.33871 5.82067 1.61463 6.58251 2.11573 7.1899C2.61683 7.7973 3.31235 8.21297 4.08464 8.3666C3.78735 8.45707 3.4787 8.50477 3.16797 8.50826C2.95288 8.50575 2.73832 8.48625 2.5263 8.44993C2.74623 9.12727 3.17182 9.71922 3.74386 10.1434C4.31591 10.5676 5.00595 10.8029 5.71797 10.8166C4.51564 11.7627 3.03121 12.279 1.5013 12.2833C1.22275 12.2842 0.944415 12.2675 0.667969 12.2333C2.22999 13.2418 4.05031 13.7772 5.90964 13.7749C7.19271 13.7883 8.46558 13.5458 9.6539 13.0617C10.8422 12.5775 11.9222 11.8615 12.8306 10.9553C13.7391 10.0492 14.4579 8.97109 14.9451 7.78402C15.4323 6.59695 15.678 5.3247 15.668 4.0416C15.668 3.89993 15.668 3.74993 15.668 3.59993C16.3219 3.11227 16.8859 2.51445 17.3346 1.83326Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
            <div class="w-auto p-2">
              <a class="flex items-center justify-center text-white hover:text-black font-medium tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#" style="width: 60px; height: 60px;">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.4513 3.55008C13.2535 3.55008 13.0602 3.60873 12.8957 3.71861C12.7313 3.82849 12.6031 3.98467 12.5274 4.1674C12.4517 4.35012 12.4319 4.55119 12.4705 4.74517C12.5091 4.93915 12.6043 5.11734 12.7442 5.25719C12.884 5.39704 13.0622 5.49228 13.2562 5.53087C13.4502 5.56945 13.6513 5.54965 13.834 5.47396C14.0167 5.39827 14.1729 5.2701 14.2828 5.10565C14.3927 4.9412 14.4513 4.74786 14.4513 4.55008C14.4513 4.28486 14.3459 4.03051 14.1584 3.84297C13.9709 3.65544 13.7165 3.55008 13.4513 3.55008V3.55008ZM17.2846 5.56675C17.2684 4.87533 17.1389 4.19125 16.9013 3.54175C16.6894 2.98603 16.3596 2.48281 15.9346 2.06675C15.522 1.6396 15.0176 1.3119 14.4596 1.10841C13.8118 0.863549 13.127 0.73109 12.4346 0.716748C11.5513 0.666748 11.268 0.666748 9.0013 0.666748C6.73464 0.666748 6.4513 0.666748 5.56797 0.716748C4.8756 0.73109 4.19075 0.863549 3.54297 1.10841C2.98603 1.31396 2.48208 1.64138 2.06797 2.06675C1.64082 2.4794 1.31312 2.98378 1.10964 3.54175C0.864769 4.18953 0.73231 4.87438 0.717969 5.56675C0.667969 6.45008 0.667969 6.73342 0.667969 9.00008C0.667969 11.2667 0.667969 11.5501 0.717969 12.4334C0.73231 13.1258 0.864769 13.8106 1.10964 14.4584C1.31312 15.0164 1.64082 15.5208 2.06797 15.9334C2.48208 16.3588 2.98603 16.6862 3.54297 16.8917C4.19075 17.1366 4.8756 17.2691 5.56797 17.2834C6.4513 17.3334 6.73464 17.3334 9.0013 17.3334C11.268 17.3334 11.5513 17.3334 12.4346 17.2834C13.127 17.2691 13.8118 17.1366 14.4596 16.8917C15.0176 16.6883 15.522 16.3606 15.9346 15.9334C16.3615 15.5189 16.6916 15.0152 16.9013 14.4584C17.1389 13.8089 17.2684 13.1248 17.2846 12.4334C17.2846 11.5501 17.3346 11.2667 17.3346 9.00008C17.3346 6.73342 17.3346 6.45008 17.2846 5.56675V5.56675ZM15.7846 12.3334C15.7786 12.8624 15.6828 13.3865 15.5013 13.8834C15.3682 14.2461 15.1545 14.5738 14.8763 14.8417C14.606 15.1172 14.279 15.3304 13.918 15.4667C13.4211 15.6482 12.8969 15.744 12.368 15.7501C11.5346 15.7917 11.2263 15.8001 9.03464 15.8001C6.84297 15.8001 6.53464 15.8001 5.7013 15.7501C5.15204 15.7604 4.60513 15.6758 4.08464 15.5001C3.73945 15.3568 3.42743 15.1441 3.16797 14.8751C2.89138 14.6074 2.68034 14.2794 2.5513 13.9167C2.34785 13.4127 2.23501 12.8767 2.21797 12.3334C2.21797 11.5001 2.16797 11.1917 2.16797 9.00008C2.16797 6.80842 2.16797 6.50008 2.21797 5.66675C2.2217 5.12596 2.32043 4.59004 2.50964 4.08341C2.65634 3.73167 2.88152 3.41813 3.16797 3.16675C3.42115 2.88022 3.73404 2.65266 4.08464 2.50008C4.59259 2.31678 5.12797 2.22098 5.66797 2.21675C6.5013 2.21675 6.80964 2.16675 9.0013 2.16675C11.193 2.16675 11.5013 2.16675 12.3346 2.21675C12.8636 2.22282 13.3877 2.31862 13.8846 2.50008C14.2633 2.64063 14.6032 2.86912 14.8763 3.16675C15.1494 3.42273 15.3628 3.73569 15.5013 4.08341C15.6865 4.59086 15.7824 5.12656 15.7846 5.66675C15.8263 6.50008 15.8346 6.80842 15.8346 9.00008C15.8346 11.1917 15.8263 11.5001 15.7846 12.3334ZM9.0013 4.72508C8.15614 4.72673 7.33044 4.97885 6.62851 5.4496C5.92659 5.92034 5.37995 6.58858 5.05766 7.36988C4.73538 8.15117 4.65191 9.01047 4.8178 9.83919C4.98369 10.6679 5.3915 11.4289 5.9897 12.0259C6.5879 12.6229 7.34964 13.0293 8.17869 13.1935C9.00773 13.3578 9.86686 13.2727 10.6475 12.9489C11.4282 12.6251 12.0954 12.0771 12.5647 11.3743C13.0341 10.6714 13.2846 9.84524 13.2846 9.00008C13.2857 8.43767 13.1756 7.88059 12.9607 7.36088C12.7457 6.84117 12.4301 6.36909 12.032 5.97179C11.634 5.57449 11.1613 5.25981 10.6411 5.04586C10.121 4.8319 9.56371 4.72288 9.0013 4.72508V4.72508ZM9.0013 11.7751C8.45246 11.7751 7.91594 11.6123 7.45959 11.3074C7.00325 11.0025 6.64757 10.5691 6.43754 10.062C6.2275 9.55496 6.17255 8.997 6.27962 8.45871C6.3867 7.92041 6.65099 7.42595 7.03908 7.03786C7.42717 6.64977 7.92163 6.38548 8.45993 6.2784C8.99822 6.17133 9.55618 6.22628 10.0632 6.43632C10.5703 6.64635 11.0037 7.00203 11.3086 7.45837C11.6136 7.91472 11.7763 8.45124 11.7763 9.00008C11.7763 9.3645 11.7045 9.72535 11.5651 10.062C11.4256 10.3987 11.2212 10.7046 10.9635 10.9623C10.7058 11.22 10.3999 11.4244 10.0632 11.5638C9.72657 11.7033 9.36572 11.7751 9.0013 11.7751V11.7751Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pt-16">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">The latest news</span>
      <h2 class="font-heading mb-16 text-5xl lg:text-7xl xl:text-8xl text-white tracking-5xl lg:tracking-7xl xl:tracking-8xl">From the blog</h2>
      <div class="flex flex-wrap -m-4">
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="mb-8 overflow-hidden rounded-3xl">
            <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog-content/cash.png" alt="">
          </div>
          <div class="flex flex-wrap items-center -m-2 mb-4">
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">Blog Post</span>
            </div>
            <div class="w-auto p-2">
              <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.492 2.5H0.574V0.33H2.492V2.5Z" fill="white"></path>
              </svg>
            </div>
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">9 min read</span>
            </div>
          </div>
          <a class="group block" href="#">
            <h3 class="font-heading mb-4 text-3xl text-white tracking-3xl hover:underline">Women in business</h3>
          </a>
          <p class="mb-6 text-white text-opacity-60">Nightsable is a strategic branding agency focused on brand creation</p>
          <div class="flex flex-wrap -m-1.5">
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Corporate Gifting</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Sales</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Marketing</span>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="mb-8 overflow-hidden rounded-3xl">
            <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog-content/skyscraper.png" alt="">
          </div>
          <div class="flex flex-wrap items-center -m-2 mb-4">
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">Blog Post</span>
            </div>
            <div class="w-auto p-2">
              <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.492 2.5H0.574V0.33H2.492V2.5Z" fill="white"></path>
              </svg>
            </div>
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">9 min read</span>
            </div>
          </div>
          <a class="group block" href="#">
            <h3 class="font-heading mb-4 text-3xl text-white tracking-3xl hover:underline">Women in business</h3>
          </a>
          <p class="mb-6 text-white text-opacity-60">Nightsable is a strategic branding agency focused on brand creation</p>
          <div class="flex flex-wrap -m-1.5">
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Corporate Gifting</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Sales</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Marketing</span>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="mb-8 overflow-hidden rounded-3xl">
            <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog-content/skyscraper2.png" alt="">
          </div>
          <div class="flex flex-wrap items-center -m-2 mb-4">
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">Blog Post</span>
            </div>
            <div class="w-auto p-2">
              <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.492 2.5H0.574V0.33H2.492V2.5Z" fill="white"></path>
              </svg>
            </div>
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">9 min read</span>
            </div>
          </div>
          <a class="group block" href="#">
            <h3 class="font-heading mb-4 text-3xl text-white tracking-3xl hover:underline">Women in business</h3>
          </a>
          <p class="mb-6 text-white text-opacity-60">Nightsable is a strategic branding agency focused on brand creation</p>
          <div class="flex flex-wrap -m-1.5">
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Corporate Gifting</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Sales</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Marketing</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #12

Tailwind CSS

Nightsable

<section class="relative py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="relative z-10 md:max-w-md">
          <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
          <h2 class="font-heading mb-6 text-7xl text-white tracking-tighter-xl">Making credit history with nightcard</h2>
          <p class="mb-10 text-white text-opacity-60 md:max-w-xs">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
          <a class="inline-block px-8 py-4 tracking-tighter bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Start now</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <img class="md:mr-0" src="nightsable-assets/images/features/card.png" alt="">
      </div>
    </div>
  </div>
  <img class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" src="nightsable-assets/images/features/bg-blur.png" alt="">
</section>

Tailwind Component #13

Tailwind CSS

Nightsable

<section class="pt-20 pb-24 lg:pb-32 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="relative text-center md:max-w-4xl mx-auto">
      <h2 class="mb-8 text-3xl text-white tracking-tight leading-normal">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,</h2>
      <a class="inline-block px-8 py-4 text-white hover:text-black font-medium tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Read more</a>
      <img class="absolute top-8 -left-20" src="nightsable-assets/images/abouts/star.svg" alt="">
      <img class="absolute top-48 -right-20" src="nightsable-assets/images/abouts/star-light.svg" alt="">
    </div>
  </div>
</section>

Tailwind Component #14

Tailwind CSS

Nightsable

<section class="relative py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 md:max-w-xl text-center mx-auto">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">Our Team</h2>
    </div>
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 lg:w-1/3 p-8">
        <div class="text-center">
          <img class="mb-9 mx-auto" src="nightsable-assets/images/team/avatar1.png" alt="">
          <span class="inline-block mb-2 text-gray-300">CEO at Nightsable Studio</span>
          <h3 class="text-3xl text-white">Guy Hawkins</h3>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-8">
        <div class="text-center">
          <img class="mb-9 mx-auto" src="nightsable-assets/images/team/avatar2.png" alt="">
          <span class="inline-block mb-2 text-gray-300">CEO at Nightsable Studio</span>
          <h3 class="text-3xl text-white">Brooklyn Simmons</h3>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-8">
        <div class="text-center">
          <img class="mb-9 mx-auto" src="nightsable-assets/images/team/avatar3.png" alt="">
          <span class="inline-block mb-2 text-gray-300">CEO at Nightsable Studio</span>
          <h3 class="text-3xl text-white">Floyd Miles</h3>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-8">
        <div class="text-center">
          <img class="mb-9 mx-auto" src="nightsable-assets/images/team/avatar4.png" alt="">
          <span class="inline-block mb-2 text-gray-300">CEO at Nightsable Studio</span>
          <h3 class="text-3xl text-white">Jenny Wilson</h3>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-8">
        <div class="text-center">
          <img class="mb-9 mx-auto" src="nightsable-assets/images/team/avatar5.png" alt="">
          <span class="inline-block mb-2 text-gray-300">CEO at Nightsable Studio</span>
          <h3 class="text-3xl text-white">Esther Howard</h3>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-8">
        <div class="text-center">
          <img class="mb-9 mx-auto" src="nightsable-assets/images/team/avatar6.png" alt="">
          <span class="inline-block mb-2 text-gray-300">CEO at Nightsable Studio</span>
          <h3 class="text-3xl text-white">Leslie Alexander</h3>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #15

Tailwind CSS

Nightsable

<section class="bg-gradient-radial-dark overflow-hidden">
  <div class="flex flex-wrap md:-m-8">
    <div class="w-full md:w-1/2 md:p-8">
      <div class="flex flex-col justify-center h-full">
        <div class="py-20 px-4 md:max-w-lg mx-auto">
          <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
          <h2 class="font-heading mb-6 text-5xl text-white tracking-5xl">Industry insights you wan`t delete. Delivered to your inbox weekly</h2>
          <p class="mb-12 text-gray-300">Join 10,000 founders, get early access to Nightsable features, and learn how to squeeze every drop of revenue</p>
          <div class="mb-6 md:max-w-sm border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <input class="px-6 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="E-mail">
          </div>
          <a class="inline-block px-8 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Subscribe</a>
        </div>
      </div>
    </div>
    <div class="w-full md:w-1/2 md:p-8">
      <div class="h-full">
        <img class="h-full mx-auto md:mr-0 object-cover rounded-tl-5xl rounded-bl-5xl" src="nightsable-assets/images/newsletter/man.png" alt="">
      </div>
    </div>
  </div>
</section>

Tailwind Component #16

Tailwind CSS

Nightsable

<section class="overflow-hidden">
  <div class="flex flex-wrap -m-8">
    <div class="w-full md:w-1/2 p-8">
      <div class="px-4 pt-10 md:pb-40 max-w-lg mx-auto">
        <a class="inline-block mb-36" href="#">
          <img src="nightsable-assets/logos/logo.svg" alt="">
        </a>
        <div class="text-center mx-auto">
          <h3 class="mb-4 text-5xl text-white tracking-5xl">Log in to your account</h3>
          <p class="mb-10 text-gray-300">Good to have you back!</p>
          <div class="flex flex-wrap -1 mb-7">
            <div class="w-full p-1">
              <a class="p-5 flex flex-wrap justify-center bg-gray-900 hover:bg-gray-900 bg-opacity-30 hover:bg-opacity-10 rounded-full transition duration-300" href="#">
                <div class="mr-4 inline-block">
                  <img src="nightsable-assets/images/sign-in/google.svg" alt="">
                </div>
                <span class="text-sm text-white font-medium">Sign in with Google</span>
              </a>
            </div>
            <div class="w-full p-1">
              <a class="p-5 flex flex-wrap justify-center bg-gray-900 hover:bg-gray-900 bg-opacity-30 hover:bg-opacity-10 rounded-full transition duration-300" href="#">
                <div class="mr-4 inline-block">
                  <img src="nightsable-assets/images/sign-in/apple-logo.svg" alt="">
                </div>
                <span class="text-sm text-white font-medium">Sign in with Apple</span>
              </a>
            </div>
          </div>
          <div class="flex flex-wrap items-center mb-10">
            <div class="flex-1 bg-gray-900">
              <div class="h-px"></div>
            </div>
            <div class="px-5 text-xs text-gray-300 font-medium">or sign in with email</div>
            <div class="flex-1 bg-gray-900">
              <div class="h-px"></div>
            </div>
          </div>
          <div class="mb-6 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="Enter your email">
          </div>
          <a class="block mb-6 px-14 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Log in</a>
          <p class="text-gray-300">
            <span>Dont have an account?</span>
            <a class="underline" href="#">Sign up</a>
          </p>
        </div>
      </div>
    </div>
    <div class="w-full md:w-1/2 p-8">
      <div class="flex flex-wrap items-center justify-center h-full bg-gradient-radial-dark py-16 px-4">
        <div class="w-full mb-8">
          <img class="mx-auto" src="nightsable-assets/images/sign-in/stats.png" alt="">
        </div>
        <div class="w-full">
          <p class="mb-8 text-sm text-center text-gray-300">Trusted by</p>
          <div class="flex flex-wrap items-center justify-center -m-4">
            <div class="w-auto p-4">
              <img src="nightsable-assets/images/sign-in/netflix.svg" alt="">
            </div>
            <div class="w-auto p-4">
              <img src="nightsable-assets/images/sign-in/allianz.svg" alt="">
            </div>
            <div class="w-auto p-4">
              <img src="nightsable-assets/images/sign-in/spotify.svg" alt="">
            </div>
            <div class="w-auto p-4">
              <img src="nightsable-assets/images/sign-in/uber.svg" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #17

Tailwind CSS

Nightsable

<section x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="z-40 fixed top-0 left-0 flex items-center justify-center w-full h-full bg-black bg-opacity-30">
  <div class="p-4">
    <div class="relative p-6 py-11 bg-blueGray-900 bg-opacity-30 max-w-lg text-center w-full rounded-5xl">
      <h3 class="mb-4 text-3xl font-medium text-white tracking-3xl">Unsaved changes</h3>
      <p class="mb-8 text-white">Do you want to save or discard changes?</p>
      <div class="flex flex-wrap justify-center -m-2">
        <div class="w-auto p-2"><a class="inline-block px-14 py-4 text-white hover:text-black font-medium tracking-2xl hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Cancel</a></div>
        <div class="w-auto p-2"><a x-on:click.prevent="modal = false" class="inline-block px-14 py-4 font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Confirm</a></div>
      </div>
      <a x-on:click.prevent="modal = false" class="absolute top-6 right-6" href="#">
        <img src="nightsable-assets/images/modals/close-icon.png">
      </a>
    </div>
  </div>
</section>

Tailwind Component #18

Tailwind CSS

Nightsable

<section class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center justify-center -m-6">
      <div class="w-auto p-6">
        <img src="nightsable-assets/images/logo-clouds/rbs.png" alt="">
      </div>
      <div class="w-auto p-6">
        <img src="nightsable-assets/images/logo-clouds/nine.png" alt="">
      </div>
      <div class="w-auto p-6">
        <img src="nightsable-assets/images/logo-clouds/drift.png" alt="">
      </div>
      <div class="w-auto p-6">
        <img src="nightsable-assets/images/logo-clouds/seek.png" alt="">
      </div>
      <div class="w-auto p-6">
        <img src="nightsable-assets/images/logo-clouds/deloitte.png" alt="">
      </div>
      <div class="w-auto p-6">
        <img src="nightsable-assets/images/logo-clouds/wise.png" alt="">
      </div>
    </div>
  </div>
</section>

Tailwind Component #19

Tailwind CSS

Nightsable

<section x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="fixed bottom-0 left-0 z-50 w-full p-4">
  <div class="relative py-8 bg-gray-900 bg-opacity-40 rounded-5xl">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap items-center -m-2">
        <div class="w-full md:w-1/2 p-2">
          <h3 class="mb-2.5 text-2xl text-white font-medium tracking-2xl">Cookie Consent</h3>
          <p class="text-sm text-gray-300">In order to provide you with a more personal user experience, we and our selected third parties use cookies or similar technologies for technical purposes and, with your consent, for “basic interactions &amp; functionalities”, “experience enhancement”, “measurement” and “targeting &amp; advertising”. Denying consent may make related features unavailable. You can freely give, deny, or withdraw your consent at any time.Use the “I accept” button to consent to the use of such technologies.</p>
        </div>
        <div class="w-full md:w-1/2 p-2">
          <div class="flex flex-wrap md:justify-end -m-2">
            <div class="w-auto p-2"><a x-on:click.prevent="modal = false" class="inline-block px-8 py-4 font-medium tracking-tighter border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Accept All Cookies</a></div>
            <div class="w-auto p-2"><a class="inline-block px-8 py-4 text-white hover:text-black font-medium tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Log in</a></div>
          </div>
        </div>
      </div>
    </div>
    <a x-on:click.prevent="modal = false" class="absolute top-7 right-7" href="#">
      <img src="nightsable-assets/images/cookies/close-white.png" alt="">
    </a>
  </div>
</section>

Tailwind Component #20

Tailwind CSS

Nightsable

<section x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between pt-5 pb-2.5 -m-2">
      <div class="w-auto p-2">
        <div class="flex flex-wrap items-center">
          <div class="w-auto">
            <a class="relative z-10 inline-block" href="#">
              <img src="nightsable-assets/logos/logo.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="w-auto p-2">
        <div class="flex flex-wrap items-center">
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center mr-12">
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Home</a></li>
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">About us</a></li>
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Wallet</a></li>
              <li class="text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Blog</a></li>
            </ul>
          </div>
          <div class="w-auto hidden lg:block">
            <div class="inline-block"><a class="inline-block px-8 py-4 text-white hover:text-black tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Get in touch</a></div>
          </div>
          <div class="w-auto lg:hidden">
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="relative z-10 inline-block">
              <svg class="text-green-500" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-black opacity-60"></div>
    <nav class="relative z-10 px-9 pt-8 h-full bg-black overflow-y-auto">
      <div class="flex flex-wrap justify-between h-full">
        <div class="w-full">
          <div class="flex items-center justify-between -m-2">
            <div class="w-auto p-2">
              <a class="inline-block" href="#">
                <img src="nightsable-assets/logos/logo.svg" alt="">
              </a>
            </div>
            <div class="w-auto p-2">
              <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-block text-white">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="flex flex-col justify-center py-16 w-full">
          <ul>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Home</a></li>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">About us</a></li>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Wallet</a></li>
            <li class="text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Blog</a></li>
          </ul>
        </div>
        <div class="flex flex-col justify-end w-full pb-8"><a class="inline-block px-8 py-4 text-center text-white hover:text-black tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Get in touch</a></div>
      </div>
    </nav>
  </div>
</section>

Nightsable UI Components by Shuffle

Choose from 244 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

Shuffle Components in Nightsable library

Framework

UI Library

Components

Tailwind Component #1

Tailwind Component #2

Tailwind Component #3

Tailwind Component #4

Tailwind Component #5

Tailwind Component #6

Tailwind Component #7

Tailwind Component #8

Tailwind Component #9

Tailwind Component #10

Tailwind Component #11

Tailwind Component #12

Tailwind Component #13

Tailwind Component #14

Tailwind Component #15

Tailwind Component #16

Tailwind Component #17

Tailwind Component #18

Tailwind Component #19

Tailwind Component #20

Nightsable UI Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to live website in minutes.

Products

UI Components

Extensions

Support

Company