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>

<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">

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

<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="">

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

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

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

<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="">

<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="">

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

<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">

<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="">

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

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

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

<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">

<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">

<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">

<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">

<section class="relative py-20" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <img class="hidden lg:block absolute top-0 left-0 mt-16" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
  <img class="hidden lg:block absolute bottom-0 right-0 mb-20" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl mx-auto text-center mb-12">
      <span class="text-xs text-blue-400 font-semibold">What's new at Shuffle</span>
      <h2 class="mt-8 mb-10 text-4xl font-semibold font-heading">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="text-xl text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="max-w-max mb-6 md:mb-14 mx-auto text-center md:border-b">
      <button x-ref="tab1" class="text-sm pb-4 mb-2 md:mb-0 mr-4 font-semibold border-b-2 border-red-500" :class="{'border-b-2 border-red-500': $refs.tab1.textContent == tab, 'text-gray-500 border-b-2 border-transparent hover:border-gray-500': $refs.tab1.textContent != tab}" x-on:click="tab = $refs.tab1.textContent">General</button>
      <button x-ref="tab2" class="text-sm pb-4 mb-2 md:mb-0 mr-4 font-semibold text-gray-500 border-b-2 border-transparent hover:border-gray-500" :class="{'border-b-2 border-red-500': $refs.tab2.textContent == tab, 'text-gray-500 border-b-2 border-transparent hover:border-gray-500': $refs.tab2.textContent != tab}" x-on:click="tab = $refs.tab2.textContent">Payments</button>
      <button x-ref="tab3" class="text-sm pb-4 mb-2 md:mb-0 mr-4 font-semibold text-gray-500 border-b-2 border-transparent hover:border-gray-500" :class="{'border-b-2 border-red-500': $refs.tab3.textContent == tab, 'text-gray-500 border-b-2 border-transparent hover:border-gray-500': $refs.tab3.textContent != tab}" x-on:click="tab = $refs.tab3.textContent">Returns</button>
      <button x-ref="tab4" class="text-sm pb-4 font-semibold text-gray-500 border-b-2 border-transparent hover:border-gray-500" :class="{'border-b-2 border-red-500': $refs.tab4.textContent == tab, 'text-gray-500 border-b-2 border-transparent hover:border-gray-500': $refs.tab4.textContent != tab}" x-on:click="tab = $refs.tab4.textContent">Refunds</button>
    </div>
    <div class="max-w-3xl mx-auto">
      <ul>
        <li class="px-6 py-8 border-b" x-data="{ accordion: false }">
          <button class="w-full flex justify-between items-center text-left font-semibold font-heading" x-on:click="accordion = !accordion">
            <span class="text-2xl font-semibold font-heading">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</span>
            <span :class="{'rotate-180 text-blue-500': accordion, 'rotate-0 text-gray-500': !accordion }" class="inline-block text-gray-500 transform">
                <svg class="flex-shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M0.75 10C0.75 15.108 4.891 19.25 10 19.25C15.108 19.25 19.25 15.108 19.25 10C19.25 4.892 15.108 0.75 10 0.75C4.891 0.75 0.75 4.892 0.75 10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M6.52881 8.55774L9.99981 12.0437L13.4708 8.55774" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>