Tailwind CSS Components

<section x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between py-5">
      <div class="w-auto">
        <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">
        <div class="flex flex-wrap items-center -m-2">
          <div class="w-auto hidden lg:block lg:mr-16 p-2">
            <ul class="flex items-center">
              <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 p-2">
            <div class="inline-block"><a class="inline-block px-8 py-4 text-white hover:text-black tracking-tighter hover:bg-green-500 focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Log in</a></div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2182

<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">
        <div class="flex flex-wrap items-center justify-between mb-36 -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">
            <p class="text-sm text-gray-300">
              <span>Dont have an account?</span>
              <a class="underline" href="#">Sign up</a>
            </p>
          </div>
        </div>
        <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="mb-2 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>
          <div class="mb-6 relative border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2183

<section x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="fixed bottom-0 left-0 z-50 w-full p-10">
  <div class="relative p-8 max-w-xl bg-black rounded-5xl">
    <h3 class="mb-3.5 text-2xl text-white font-medium tracking-2xl">Cookie Consent</h3>
    <p class="mb-8 text-sm text-white">We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.</p>
    <div class="flex flex-wrap -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="#">Settings</a></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>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2184

<section x-data="{ showContent: false }" class="relative py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 md:max-w-3xl 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-tighter-xl">What people are saying</h2>
    </div>
    <div class="mb-20 md:max-w-5xl mx-auto">
      <div class="flex flex-wrap -m-8">
        <div class="w-full md:flex-1 p-8">
          <div class="flex-wrap -m-8">
            <div class="w-full p-8">
              <div class="max-w-xl mx-auto text-center">
                <img class="mb-8 mx-auto" src="nightsable-assets/logos/brands/slack-medium.svg" alt="">
                <h3 class="mb-8 text-2xl text-white tracking-tighter leading-tight">“GTIS Partners is a leading real estate investment firm in the Americas, headquartered in New York with offices in São Paulo, San Francisco, Los Angeles, Atlanta, Charlotte, Phoenix”</h3>
                <img class="mb-3.5 mx-auto" src="nightsable-assets/images/testimonials/avatar-circle.png" alt="">
                <p class="mb-1.5 font-light text-white">Emily Thompson</p>
                <p class="text-white">Director of Media Operations, VICE Media</p>
              </div>
            </div>
            <div class="w-full p-8">
              <div class="max-w-xl mx-auto text-center">
                <img class="mb-8 mx-auto" src="nightsable-assets/logos/brands/slack-medium.svg" alt="">
                <h3 class="mb-8 text-2xl text-white tracking-tighter leading-tight">“Equinox Capital stands as a prominent investment firm in the global market, headquartered in London and maintaining strategic offices in Dubai, Singapore, Sydney, New York, Tokyo, and Frankfurt”</h3>
                <img class="mb-3.5 mx-auto" src="nightsable-assets/images/testimonials/avatar-circle3.png" alt="">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2185

<section x-data="{ active: 'introduction' }" class="relative py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-12 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 text-7xl lg:text-8xl text-white tracking-tighter-xl">Billing infrastucture that keeps up with your business</h2>
    </div>
    <ul class="mb-20 flex flex-wrap justify-center">
      <li><a x-on:click.prevent="active = 'introduction'" :class="{'text-green-400 border-green-400': active === 'introduction', 'text-gray-300 border-transparent': active !== 'introduction'}" class="inline-block px-5 py-5 font-medium text-green-300 tracking-tighter border border-green-400 rounded-full transition duration-200" href="#">Introduction</a></li>
      <li><a x-on:click.prevent="active = 'aggregation'" :class="{'text-green-400 border-green-400': active === 'aggregation', 'text-gray-300 border-transparent': active !== 'aggregation'}" class="inline-block px-5 py-5 font-medium text-gray-300 tracking-tighter border border-transparent rounded-full transition duration-200" href="#">Aggregation</a></li>
      <li><a x-on:click.prevent="active = 'pricing'" :class="{'text-green-400 border-green-400': active === 'pricing', 'text-gray-300 border-transparent': active !== 'pricing'}" class="inline-block px-5 py-5 font-medium text-gray-300 tracking-tighter border border-transparent rounded-full transition duration-200" href="#">Pricing &amp; Credits</a></li>
      <li><a x-on:click.prevent="active = 'integrations'" :class="{'text-green-400 border-green-400': active === 'integrations', 'text-gray-300 border-transparent': active !== 'integrations'}" class="inline-block px-5 py-5 font-medium text-gray-300 tracking-tighter border border-transparent rounded-full transition duration-200" href="#">Integrations</a></li>
      <li><a x-on:click.prevent="active = 'api'" :class="{'text-green-400 border-green-400': active === 'api', 'text-gray-300 border-transparent': active !== 'api'}" class="inline-block px-5 py-5 font-medium text-gray-300 tracking-tighter border border-transparent rounded-full transition duration-200" href="#">API &amp; Webhooks</a></li>
    </ul>
    <img :class="{ 'hidden': active != 'introduction' }" class="mx-auto" src="nightsable-assets/images/features/dashboard2.png" alt="">
    <img :class="{ 'hidden': active != 'aggregation' }" class="hidden mx-auto" src="nightsable-assets/images/features/dashboard3.png" alt="">
    <img :class="{ 'hidden': active != 'pricing' }" class="hidden mx-auto" src="nightsable-assets/images/features/dashboard2.png" alt="">
    <img :class="{ 'hidden': active != 'integrations' }" class="hidden mx-auto" src="nightsable-assets/images/features/dashboard3.png" alt="">
    <img :class="{ 'hidden': active != 'api' }" class="hidden mx-auto" src="nightsable-assets/images/features/dashboard2.png" alt="">
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2186

<section x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="z-50 fixed bottom-0 left-0 w-full p-4">
  <div class="p-8 bg-black mx-auto max-w-3xl rounded-5xl">
    <div class="flex flex-wrap -m-2">
      <div class="flex-1 p-2">
        <h3 class="mb-2 text-white font-medium">Your settings have been saved</h3>
        <p class="text-sm text-gray-300">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 too</p>
      </div>
      <div class="w-auto p-2">
        <a x-on:click.prevent="modal = false" href="#">
          <img class="ml-auto" src="nightsable-assets/images/toast/close-icon.png" alt="">
        </a>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2187

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap pb-16 md:divide-x md:divide-gray-900 border-b border-gray-900 -m-8">
      <div class="w-full md:w-1/3 lg:w-1/4 md:pr-16 p-8">
        <ul class="mb-12 pb-14 border-b border-blueGray-900">
          <li class="mb-6"><a class="font-heading text-2xl text-blueGray-100 hover:text-blueGray-200 tracking-2xl transition duration-300" href="#">Introduction</a></li>
          <li class="mb-6"><a class="font-heading text-2xl text-blueGray-100 hover:text-blueGray-200 tracking-2xl transition duration-300" href="#">Header 1</a></li>
          <li class="mb-6"><a class="font-heading text-2xl text-blueGray-100 hover:text-blueGray-200 tracking-2xl transition duration-300" href="#">Header 2</a></li>
          <li><a class="font-heading text-2xl text-blueGray-100 hover:text-blueGray-200 tracking-2xl transition duration-300" href="#">Summary</a></li>
        </ul>
        <a class="inline-block mb-8 px-8 py-4 w-full text-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="#">Copy Link</a>
        <div class="flex flex-wrap justify-center -m-2">
          <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>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2188

<section class="py-20 bg-gray-900 bg-opacity-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 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 text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">Built for teams large and small</h2>
    </div>
    <div class="md:max-w-7xl mx-auto">
      <div class="flex flex-wrap -m-3">
        <div class="p-3 w-full md:w-1/2 lg:w-1/5">
          <div class="relative flex items-center justify-center border border-gray-900 overflow-hidden rounded-3xl" style="height: 246px;">
            <img class="relative" src="nightsable-assets/images/logo-clouds/rbs-white.png" alt="">
            <img class="absolute bottom-0 right-0" src="nightsable-assets/images/logo-clouds/shadow.png" alt="">
          </div>
        </div>
        <div class="p-3 w-full md:w-1/2 lg:w-1/5">
          <div class="relative flex items-center justify-center border border-gray-900 overflow-hidden rounded-3xl" style="height: 246px;">
            <img class="relative" src="nightsable-assets/images/logo-clouds/nine-white.png" alt="">
            <img class="absolute bottom-0 right-0" src="nightsable-assets/images/logo-clouds/shadow.png" alt="">
          </div>
        </div>
        <div class="p-3 w-full md:w-1/2 lg:w-1/5">
          <div class="relative flex items-center justify-center border border-gray-900 overflow-hidden rounded-3xl" style="height: 246px;">
            <img class="relative" src="nightsable-assets/images/logo-clouds/drift-white.png" alt="">
            <img class="absolute bottom-0 right-0" src="nightsable-assets/images/logo-clouds/shadow.png" alt="">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2189

<section class="pt-20 pb-24 md:pb-32 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-5xl mx-auto">
      <div class="flex flex-wrap lg:items-center -m-8 lg:-m-12">
        <div class="w-full md:w-1/2 p-8 lg:p-12">
          <div class="max-w-max mx-auto">
            <img class="rounded-3xl" src="nightsable-assets/images/abouts/about.png" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 p-8 lg:p-12">
          <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</h2>
          <p class="mb-8 text-white text-opacity-60">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum i</p>
          <ul class="mb-8">
            <li class="inline-flex mb-3.5">
              <img class="mr-3.5" src="nightsable-assets/images/features/checked.svg" alt="">
              <span class="text-white">Real-time usager, credits and running balance</span>
            </li>
            <li class="inline-flex mb-3.5">
              <img class="mr-3.5" src="nightsable-assets/images/features/checked.svg" alt="">
              <span class="text-white">Webhooks to power altering use cases for customers</span>
            </li>
            <li class="inline-flex">
              <img class="mr-3.5" src="nightsable-assets/images/features/checked.svg" alt="">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2190

<section x-data="{ active: 0 }" class="py-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 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 text-7xl lg:text-8xl text-white tracking-tighter-xl">Billing infrastucture that keeps up with your business</h2>
    </div>
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="flex flex-wrap -m-1.5">
          <div class="w-full p-1.5">
            <div class="md:max-w-md">
              <div x-on:click.prevent="active = 0" :class="{'bg-gradient-radial-dark': active === 0}" class="px-10 py-12 bg-gradient-radial-dark cursor-pointer rounded-5xl">
                <h3 class="mb-6 text-3xl text-white tracking-tighter-xl">It is a long established fact that a reader will</h3>
                <p class="text-white text-opacity-60">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
              </div>
            </div>
          </div>
          <div class="w-full p-1.5">
            <div class="md:max-w-md">
              <div x-on:click.prevent="active = 1" :class="{'bg-gradient-radial-dark': active === 1}" class="px-10 py-12 cursor-pointer rounded-5xl">
                <h3 class="mb-6 text-3xl text-white tracking-tighter-xl">The Art of Attention: Decoding Reader Engagement</h3>
                <p class="text-white text-opacity-60">Dive into the world where reader attention and content layout collide. Explore the nuanced art of captivating audiences while dissecting how established design principles can either hold a reader's gaze or lead them astray.</p>
              </div>
            </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2191

<section class="pb-20" x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between items-center py-8 px-4 xl:px-10">
    <a class="text-lg font-semibold" href="#">
      <img class="h-7" src="zeus-assets/logo/logo-zeus-red.svg" alt="" width="auto">
    </a>
    <div class="lg:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 hover:bg-gray-50 rounded">
        <svg class="block h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden lg:flex lg:ml-auto lg:mr-12 lg:items-center lg:w-auto lg:space-x-12">
      <li><a class="text-sm font-medium" href="#">About</a></li>
      <li><a class="text-sm font-medium" href="#">Company</a></li>
      <li><a class="text-sm font-medium" href="#">Services</a></li>
      <li><a class="text-sm font-medium" href="#">Testimonials</a></li>
    </ul>
    <div class="hidden lg:block"><a class="inline-block py-3 px-8 text-sm leading-normal font-medium bg-red-50 hover:bg-red-100 text-red-500 rounded transition duration-200" href="#">Contact Us</a></div>
  </nav>
  <div class="container px-4 mx-auto pt-12">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-6 md:mb-0">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Marketing Hero Section with Headline, Body Copy, and Dual CTAs

A light-themed marketing hero section for the Zeus brand with a top navigation bar, a large bold headline about performance, supporting paragraph text, and a primary pink button alongside an outlined secondary button. The right side displays a decorative illustration of a smiling woman with floating yellow and blue icon badges on pale blue shapes.

Tailwind Component #2192

<section class="relative pb-20" x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between items-center py-8 px-4 xl:px-10">
    <a class="text-lg font-semibold" href="#">
      <img class="h-7" src="zeus-assets/logo/logo-zeus-red.svg" alt="" width="auto">
    </a>
    <div class="lg:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 hover:bg-gray-50 rounded">
        <svg class="block h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden lg:flex lg:ml-auto lg:mr-12 lg:items-center lg:w-auto lg:space-x-12">
      <li><a class="text-sm font-medium" href="#">About</a></li>
      <li><a class="text-sm font-medium" href="#">Company</a></li>
      <li><a class="text-sm font-medium" href="#">Services</a></li>
      <li><a class="text-sm font-medium" href="#">Testimonials</a></li>
    </ul>
    <div class="hidden lg:block"><a class="inline-block py-3 px-8 text-sm leading-normal font-medium bg-red-50 hover:bg-red-100 text-red-500 rounded transition duration-200" href="#">Contact Us</a></div>
  </nav>
  <img class="hidden lg:block lg:absolute top-0 left-0 mt-32" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
  <img class="hidden lg:block lg:absolute bottom-0 right-0 mt-20" src="zeus-assets/icons/dots/yellow-dot-right.svg" alt="">
  <img class="lg:hidden absolute bottom-0 left-0 -mb-20" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Hero Section with Navigation Bar and Centered Headline

A landing page hero section with a top navigation bar containing the Zeus logo, menu links, and a Contact Us button, followed by a centered eyebrow label, large bold headline, subtitle paragraph, and a red primary call-to-action button. Decorative dashed curves and colored circular icons frame the content on a white background.

Tailwind Component #2193

<section class="relative overflow-y-hidden" x-data="{ mobileNavOpen: false }">
  <img class="hidden lg:block absolute top-0 left-0 w-2/5 h-full object-cover" src="https://images.unsplash.com/photo-1544717305-2782549b5136?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
  <div class="relative px-4 xl:px-10">
    <nav class="flex justify-between items-center py-8">
      <a class="inline-block mr-auto text-lg font-semibold" href="#">
        <img class="h-7" src="zeus-assets/logo/logo-zeus-red.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden ml-auto">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 hover:bg-gray-50 rounded">
          <svg class="block h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <div class="hidden lg:flex w-auto lg:w-3/5 lg:pl-16 ml-auto">
        <ul class="flex items-center space-x-12">
          <li><a class="text-sm font-medium" href="#">About</a></li>
          <li><a class="text-sm font-medium" href="#">Company</a></li>
          <li><a class="text-sm font-medium" href="#">Services</a></li>
          <li><a class="text-sm font-medium" href="#">Testimonials</a></li>
        </ul>
        <div class="ml-auto"><a class="inline-block py-3 px-8 text-sm leading-normal font-medium bg-red-50 hover:bg-red-100 text-red-500 rounded transition duration-200" href="#">Contact Us</a></div>
      </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2194

<section class="relative md:pb-24 lg:pb-80" x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between items-center py-8 px-4 xl:px-10 bg-blue-50">
    <a class="text-lg font-semibold" href="#">
      <img class="h-7" src="zeus-assets/logo/logo-zeus-red.svg" alt="" width="auto">
    </a>
    <div class="lg:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 hover:bg-gray-50 rounded">
        <svg class="block h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden lg:flex lg:ml-auto lg:mr-12 lg:items-center lg:w-auto lg:space-x-12">
      <li><a class="text-sm font-medium" href="#">About</a></li>
      <li><a class="text-sm font-medium" href="#">Company</a></li>
      <li><a class="text-sm font-medium" href="#">Services</a></li>
      <li><a class="text-sm font-medium" href="#">Testimonials</a></li>
    </ul>
    <div class="hidden lg:block"><a class="inline-block py-3 px-8 text-sm leading-normal font-medium bg-red-50 hover:bg-red-100 text-red-500 rounded transition duration-200" href="#">Contact Us</a></div>
  </nav>
  <div class="pt-12 pb-32 md:pb-64 bg-blue-50">
    <div class="container px-4 mx-auto mb-12 text-center">
      <span class="font-semibold text-blue-400">What's new at Shuffle</span>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2195

<section class="relative md:pb-24 lg:pb-56 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between items-center py-8 px-4 xl:px-10 bg-blue-50">
    <a class="text-lg font-semibold" href="#">
      <img class="h-7" src="zeus-assets/logo/logo-zeus-red.svg" alt="" width="auto">
    </a>
    <div class="lg:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 hover:bg-gray-50 rounded">
        <svg class="block h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden lg:flex lg:ml-auto lg:mr-12 lg:items-center lg:w-auto lg:space-x-12">
      <li><a class="text-sm font-medium" href="#">About</a></li>
      <li><a class="text-sm font-medium" href="#">Company</a></li>
      <li><a class="text-sm font-medium" href="#">Services</a></li>
      <li><a class="text-sm font-medium" href="#">Testimonials</a></li>
    </ul>
    <div class="hidden lg:block"><a class="inline-block py-3 px-8 text-sm leading-normal font-medium bg-red-50 hover:bg-red-100 text-red-500 rounded transition duration-200" href="#">Contact Us</a></div>
  </nav>
  <div class="relative pt-12 pb-32 md:pb-64 bg-blue-50">
    <div class="container px-4 mx-auto mb-12 text-center">
      <span class="font-semibold text-blue-400">What's new at Shuffle</span>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2196

<section class="relative pb-20" x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between items-center py-8 px-4 xl:px-10">
    <a class="text-lg font-semibold" href="#">
      <img class="h-7" src="zeus-assets/logo/logo-zeus-red.svg" alt="" width="auto">
    </a>
    <div class="lg:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 hover:bg-gray-50 rounded">
        <svg class="block h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden lg:ml-auto lg:mr-12 lg:flex lg:items-center lg:space-x-12">
      <li><a class="text-sm font-medium" href="#">About</a></li>
      <li><a class="text-sm font-medium" href="#">Company</a></li>
      <li><a class="text-sm font-medium" href="#">Services</a></li>
      <li><a class="text-sm font-medium" href="#">Testimonials</a></li>
    </ul>
    <div class="hidden lg:block"><a class="inline-block py-3 px-8 text-sm leading-normal font-medium bg-red-50 hover:bg-red-100 text-red-500 rounded transition duration-200" href="#">Contact Us</a></div>
  </nav>
  <img class="hidden lg:block lg:absolute top-0 left-0 mt-32" src="zeus-assets/icons/dots/yellow-dot-left-bars.svg" alt="">
  <img class="hidden lg:block lg:absolute bottom-0 right-0 mb-40" src="zeus-assets/icons/dots/red-dot-right-shield.svg" alt="">
  <div class="relative container px-4 pt-12 mb-20 mx-auto text-center">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2197

<section class="relative bg-gray-900 pb-20" x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between items-center py-8 px-4 xl:px-10">
    <a class="text-lg font-semibold" href="#">
      <img class="h-7" src="zeus-assets/logo/logo-zeus-white.svg" alt="" width="auto">
    </a>
    <div class="lg:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 hover:bg-blue-300 rounded">
        <svg class="text-white block h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden lg:ml-auto lg:mr-12 lg:flex lg:items-center lg:space-x-12">
      <li><a class="text-white hover:text-blue-100 text-sm font-semibold" href="#">About</a></li>
      <li><a class="text-white hover:text-blue-100 text-sm font-semibold" href="#">Company</a></li>
      <li><a class="text-white hover:text-blue-100 text-sm font-semibold" href="#">Services</a></li>
      <li><a class="text-white hover:text-blue-100 text-sm font-semibold" href="#">Testimonials</a></li>
    </ul>
    <div class="hidden lg:block"><a class="inline-block py-3 px-8 text-sm leading-normal font-medium rounded bg-blue-500 bg-opacity-25 hover:bg-opacity-50 text-blue-500 transition duration-200" href="#">Contact Us</a></div>
  </nav>
  <img class="hidden lg:block lg:absolute top-0 left-0 mt-32" src="zeus-assets/icons/dots/yellow-dot-left-bars.svg" alt="">
  <img class="hidden lg:block lg:absolute bottom-0 right-0 mt-20" src="zeus-assets/icons/dots/red-dot-right-shield.svg" alt="">
  <div class="relative container pt-12 px-4 mb-20 mx-auto text-center">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2198

<section class="relative pb-8 h-screen overflow-hidden" x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between items-center py-8 px-4 xl:px-10">
    <a class="text-lg font-semibold" href="#">
      <img class="h-7" src="zeus-assets/logo/logo-zeus-red.svg" alt="" width="auto">
    </a>
    <div class="lg:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 hover:bg-gray-50 rounded">
        <svg class="block h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden lg:flex lg:ml-auto lg:mr-12 lg:items-center lg:w-auto lg:space-x-12">
      <li><a class="text-sm font-medium" href="#">About</a></li>
      <li><a class="text-sm font-medium" href="#">Company</a></li>
      <li><a class="text-sm font-medium" href="#">Services</a></li>
      <li><a class="text-sm font-medium" href="#">Testimonials</a></li>
    </ul>
    <div class="hidden lg:block"><a class="inline-block py-4 px-8 text-sm leading-normal font-medium bg-red-50 hover:bg-red-100 text-red-500 rounded transition duration-200" href="#">Contact Us</a></div>
  </nav>
  <div class="flex flex-wrap -mx-4">
    <div class="w-full lg:w-1/2 pt-12 pb-6 px-4 flex justify-center">
      <div class="px-4">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2199

<section class="relative bg-gray-900 pb-20" x-data="{ mobileNavOpen: false }">
  <img class="hidden lg:block absolute top-0 left-0 mt-40" src="zeus-assets/icons/dots/yellow-dot-left-bars.svg" alt="">
  <img class="hidden lg:block absolute bottom-0 right-0 mb-52" src="zeus-assets/icons/dots/red-dot-right-shield.svg" alt="">
  <nav class="flex justify-between items-center py-8 px-4 xl:px-10">
    <a class="text-lg font-semibold" href="#">
      <img class="h-7" src="zeus-assets/logo/logo-zeus-white.svg" alt="" width="auto">
    </a>
    <div class="lg:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 hover:bg-blue-300 rounded">
        <svg class="text-white block h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden lg:ml-auto lg:mr-12 lg:flex lg:items-center lg:space-x-12">
      <li><a class="text-white hover:text-blue-100 text-sm font-semibold" href="#">About</a></li>
      <li><a class="text-white hover:text-blue-100 text-sm font-semibold" href="#">Company</a></li>
      <li><a class="text-white hover:text-blue-100 text-sm font-semibold" href="#">Services</a></li>
      <li><a class="text-white hover:text-blue-100 text-sm font-semibold" href="#">Testimonials</a></li>
    </ul>
    <div class="hidden lg:block"><a class="inline-block py-3 px-8 text-sm leading-normal font-medium bg-blue-800 hover:bg-blue-700 text-blue-500 text-blue-500 rounded transition duration-200" href="#">Contact Us</a></div>
  </nav>
  <div class="relative container pt-12 px-4 mb-20 mx-auto text-center">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2200