Tailwind CSS Components

<section class="relative py-20">
  <div class="container px-4 mx-auto">
    <div class="w-full lg:w-1/2 mb-12">
      <div class="lg:max-w-md">
        <div class="max-w-md mx-auto text-center py-10">
          <form action="#">
            <span class="inline-block mb-4 text-xs text-blue-400 font-semibold">Sign In</span>
            <h3 class="mb-12 text-3xl font-semibold font-heading">Join our community</h3>
            <div class="relative flex flex-wrap mb-6">
              <input class="relative mb-2 md:mb-0 w-full py-4 pl-4 text-sm border rounded" type="email" placeholder="e.g hello@shuffle.dev">
              <span class="absolute top-0 left-0 ml-4 -mt-2 px-1 inline-block bg-white text-gray-500 text-xs">Your email address</span>
            </div>
            <div class="relative flex flex-wrap mb-6">
              <input class="relative mb-2 md:mb-0 w-full py-4 pl-4 text-sm border rounded" type="password" placeholder="******">
              <span class="absolute top-0 left-0 ml-4 -mt-2 px-1 inline-block bg-white text-gray-500 text-xs">Password</span>
            </div>
            <button class="w-full inline-block py-4 mb-4 text-sm text-white font-medium leading-normal bg-red-400 hover:bg-red-300 rounded transition duration-200">Get Started</button>
            <a class="block pb-6 mb-6 text-sm font-semibold hover:underline border-b" href="#">Forgot password?</a>
            <a class="flex items-center justify-center mb-4 py-4 bg-blue-800 hover:bg-blue-900 rounded" href="#">
              <span class="inline-block mr-2">
                <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.0898 11.8182V6.51074H5.90537L6.17776 4.4417H4.0898V3.12092C4.0898 2.52207 4.25864 2.11397 5.13515 2.11397L6.25125 2.11352V0.262891C6.05824 0.238289 5.39569 0.181885 4.62456 0.181885C3.01431 0.181885 1.9119 1.14594 1.9119 2.91601V4.4417H0.0908203V6.51074H1.9119V11.8182H4.0898Z" fill="white"></path>
                </svg>
              </span>

<section class="md:pb-24 lg:pb-96 bg-gray-50">
  <div class="relative pt-20 pb-28 md:pb-80 bg-white">
    <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="h-16 ml-auto lg:hidden" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
    <img class="hidden lg:block lg:absolute top-0 right-0 mt-64" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
    <div class="relative container px-4 mb-10 lg:mb-20 mx-auto">
      <div class="max-w-3xl mx-auto text-center">
        <span class="text-blue-400 font-semibold">What's new at Shuffle</span>
        <h2 class="mt-8 mb-6 lg:mb-10 text-4xl font-semibold font-heading">Take quick action that increases your brand's regular profit.</h2>
        <p class="text-xl text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      </div>
    </div>
    <div class="lg:absolute inset-x-0 max-w-4xl mx-auto px-4">
      <img class="lg:absolute top-0 left-0 mx-auto rounded-lg object-cover" src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
    </div>
  </div>
</section>

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
        <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="max-w-lg mb-12 text-xl text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <a class="inline-block px-8 py-4 text-sm text-white font-medium leading-normal bg-red-400 hover:bg-red-300 rounded transition duration-200" href="#">Activate Demo</a>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="bg-gray-50 rounded-xl px-10">
          <div class="py-8 border-b">
            <div class="flex items-start">
              <span class="mr-6 flex-shrink-0 flex justify-center items-center w-12 h-12 rounded-full bg-blue-400 text-white">1</span>
              <p class="text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </div>
          <div class="py-8 border-b">
            <div class="flex items-start">
              <span class="mr-6 flex-shrink-0 flex justify-center items-center w-12 h-12 rounded-full bg-orange-400 text-white">2</span>
              <p class="text-gray-500">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
            </div>
          </div>
          <div class="py-8">

<section class="py-20">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-3 -mb-6">
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
        <div class="p-4 md:p-8 h-full bg-gray-100 rounded-lg hover:bg-white hover:shadow-xl hover:border-transparent cursor-pointer">
          <span class="flex items-center justify-center w-16 h-16 mb-8 md:mb-12 bg-white shadow-md rounded-full text-gray-500">
            <svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M8.98457 19.606C8.98457 19.606 16.6566 17.283 16.6566 10.879C16.6566 4.474 16.9346 3.974 16.3196 3.358C15.7036 2.742 9.99057 0.75 8.98457 0.75C7.97857 0.75 2.26557 2.742 1.65057 3.358C1.03457 3.974 1.31257 4.474 1.31257 10.879C1.31257 17.283 8.98457 19.606 8.98457 19.606Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.38599 9.87463L8.27799 11.7696L12.176 7.86963" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
          <div>
            <h3 class="mb-4 text-2xl font-semibold font-heading">Security in saving</h3>
            <p class="text-base text-gray-500">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
        <div class="p-4 md:p-8 h-full bg-gray-100 rounded-lg hover:bg-white hover:shadow-xl hover:border-transparent cursor-pointer">
          <span class="flex items-center justify-center w-16 h-16 mb-8 md:mb-12 bg-white shadow-md rounded-full text-gray-500">
            <svg 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="M10 0.750122C15.108 0.750122 19.25 4.89112 19.25 10.0001C19.25 15.1081 15.108 19.2501 10 19.2501C4.891 19.2501 0.75 15.1081 0.75 10.0001C0.75 4.89112 4.891 0.750122 10 0.750122Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9.99512 6.20422V10.6232" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9.995 13.7961H10.005" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="py-8 px-4 xl:px-10" x-data="{ mobileNavOpen: false }">
  <nav class="relative">
    <div class="flex justify-between items-center">
      <a class="text-lg font-medium" 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 absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex 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:flex">
        <input class="hidden px-4 py-3 lg:inline-block text-sm leading-normal font-medium border border-r-0 rounded-l" placeholder="e.g. Pricing">
        <button class="px-2 rounded-r border border-l-0">
          <svg class="text-gray-300 w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">

<section class="py-20">
  <div class="container px-4 mx-auto">
    <h2 class="mb-10 text-center text-2xl text-gray-500">Trusted by brand all over the world</h2>
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/3 lg:w-1/6 p-4">
        <div class="py-4 lg:py-8">
          <img class="h-6 mx-auto" src="zeus-assets/logo/slack-gray.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/6 p-4">
        <div class="py-4 lg:py-8">
          <img class="h-6 mx-auto" src="zeus-assets/logo/dropbox-gray.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/6 p-4">
        <div class="py-4 lg:py-8">
          <img class="h-6 mx-auto" src="zeus-assets/logo/spotify-gray.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/6 p-4">
        <div class="py-4 lg:py-8">
          <img class="h-6 mx-auto" src="zeus-assets/logo/amazon-gray.svg" alt="">
        </div>
      </div>

<section class="relative py-20">
  <img class="hidden lg:block absolute top-0 left-0 mt-32" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
  <img class="hidden lg:block absolute top-0 right-0 mt-32" src="zeus-assets/icons/dots/yellow-dot-right.svg" alt="">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto mb-20 text-center">
      <span class="text-xs font-semibold text-blue-400">What's new at Shuffle</span>
      <h2 class="mt-8 mb-10 text-4xl font-semibold font-heading">Get our Free Mobile App</h2>
      <p class="mb-20 text-xl text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      <img class="w-full" src="zeus-assets/images/devices/laptop.svg" alt="">
    </div>
    <div>
      <div class="flex flex-wrap -mx-4 -mb-8">
        <div class="w-full lg:w-1/3 px-4 pb-8 text-center">
          <span class="flex items-center justify-center w-12 h-12 mx-auto mb-6 bg-teal-400 rounded-full">
            <svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M8.98451 19.606C8.98451 19.606 16.6565 17.283 16.6565 10.879C16.6565 4.474 16.9345 3.974 16.3195 3.358C15.7035 2.742 9.99051 0.75 8.98451 0.75C7.97851 0.75 2.26551 2.742 1.65051 3.358C1.03451 3.974 1.31251 4.474 1.31251 10.879C1.31251 17.283 8.98451 19.606 8.98451 19.606Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.38593 9.87463L8.27793 11.7696L12.1759 7.86963" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
          <h3 class="mb-4 text-2xl font-semibold font-heading">Security in saving</h3>
          <p class="text-xl text-gray-500">Pellentesque eu quam vitae mi lacinia consequat quis in metus.</p>
        </div>
        <div class="w-full lg:w-1/3 px-4 pb-8 text-center">
          <span class="flex items-center justify-center w-12 h-12 mx-auto mb-6 bg-red-400 rounded-full">

<section class="relative py-20" x-data="{ showContent: false }">
  <img class="hidden lg:block absolute top-0 left-0 mt-20" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
  <img class="hidden lg:block absolute top-0 right-0 mt-52" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mb-20 mx-auto text-center">
      <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="flex flex-wrap -m-3 mb-16">
      <div class="w-full md:w-1/2 lg:w-1/3 p-3">
        <div class="p-6 border rounded-xl">
          <div class="relative h-52 mb-6">
            <span class="absolute top-0 right-0 mt-4 mr-4 text-xs text-white px-2 py-1 font-semibold bg-gray-600 bg-opacity-50 rounded-md uppercase">Development</span>
            <img class="w-full h-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1544717297-fa95b6ee9643?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          </div>
          <span class="inline-block mb-4 text-xs text-gray-500">10 jun 2020 19:40</span>
          <h2 class="mb-4 text-2xl font-semibold font-heading">Lorem ipsum dolor sit amet consectutar</h2>
          <p class="mb-4 text-gray-500 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <a class="text-lg font-medium text-red-500 underline hover:no-underline" href="#">Read more</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-3">
        <div class="p-6 border rounded-xl">

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto mb-16 text-center">
      <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>
      <div class="max-w-2xl mx-auto">
        <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>
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/3 lg:w-1/6 p-4">
        <div class="bg-gray-50 rounded-xl py-12">
          <img class="h-6 mx-auto" src="zeus-assets/logo/slack-gray.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/6 p-4">
        <div class="bg-gray-50 rounded-xl py-12">
          <img class="h-6 mx-auto" src="zeus-assets/logo/dropbox-gray.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/6 p-4">
        <div class="bg-gray-50 rounded-xl py-12">
          <img class="h-6 mx-auto" src="zeus-assets/logo/spotify-gray.svg" alt="">
        </div>

<section class="relative py-20">
  <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-md mx-auto py-6 lg:py-12 px-4 lg:px-8 bg-white border rounded-xl text-center">
      <span class="inline-block mb-4 text-xs text-blue-400 font-semibold">Sign Up</span>
      <h3 class="mb-12 text-3xl font-semibold font-heading">Create new account</h3>
      <form action="#">
        <div class="flex flex-wrap -mx-2">
          <div class="relative w-full lg:w-1/2 px-2 flex flex-wrap mb-6">
            <input class="relative mb-2 md:mb-0 w-full py-4 pl-4 text-sm border rounded" type="text" placeholder="John">
            <span class="absolute top-0 left-0 ml-4 -mt-2 px-1 inline-block bg-white text-gray-500 text-xs">First name</span>
          </div>
          <div class="relative w-full lg:w-1/2 px-2 flex flex-wrap mb-6">
            <input class="relative mb-2 md:mb-0 w-full py-4 pl-4 text-sm border rounded" type="text" placeholder="Smith">
            <span class="absolute top-0 left-0 ml-4 -mt-2 px-1 inline-block bg-white text-gray-500 text-xs">Last name</span>
          </div>
        </div>
        <div class="relative flex flex-wrap mb-6">
          <input class="relative mb-2 md:mb-0 w-full py-4 pl-4 text-sm border rounded" type="email" placeholder="e.g hello@shuffle.dev">
          <span class="absolute top-0 left-0 ml-4 -mt-2 px-1 inline-block bg-white text-gray-500 text-xs">Email address</span>
        </div>
        <div class="relative flex flex-wrap mb-6">
          <input class="relative mb-2 md:mb-0 w-full py-4 pl-4 text-sm border rounded" type="password" placeholder="********">

<section class="py-20">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-3 -mb-6">
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
        <div class="p-4 lg:p-8">
          <span class="flex items-center justify-center mb-8 md:mb-12 w-16 h-16 bg-yellow-400 rounded-full">
            <svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M8.98457 19.606C8.98457 19.606 16.6566 17.283 16.6566 10.879C16.6566 4.474 16.9346 3.974 16.3196 3.358C15.7036 2.742 9.99057 0.75 8.98457 0.75C7.97857 0.75 2.26557 2.742 1.65057 3.358C1.03457 3.974 1.31257 4.474 1.31257 10.879C1.31257 17.283 8.98457 19.606 8.98457 19.606Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.38599 9.87463L8.27799 11.7696L12.176 7.86963" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
          <div>
            <h3 class="mb-4 text-2xl font-semibold font-heading">Security in saving</h3>
            <p class="text-base text-gray-500">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
        <div class="p-4 lg:p-8">
          <span class="flex items-center justify-center mb-8 md:mb-12 w-16 h-16 bg-blue-400 rounded-full">
            <svg 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="M10 0.750122C15.108 0.750122 19.25 4.89112 19.25 10.0001C19.25 15.1081 15.108 19.2501 10 19.2501C4.891 19.2501 0.75 15.1081 0.75 10.0001C0.75 4.89112 4.891 0.750122 10 0.750122Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9.99512 6.20422V10.6232" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9.995 13.7961H10.005" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto">
      <div class="py-10 lg:py-24 px-8 lg:px-24 mb-6 bg-gray-50 rounded-lg">
        <span class="inline-block mb-6 lg:mb-12">
          <svg width="48" height="36" viewBox="0 0 48 36" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M26 23.45C26 13.3858 33.4577 2.86747 45.2297 0.164427C45.6793 0.0611986 46.1364 0.294669 46.3301 0.713275L47.5161 3.27572C47.7602 3.80299 47.5031 4.42383 46.9877 4.69196C43.3044 6.60799 40.1644 11.1966 39.3647 14.8059C39.2493 15.3268 39.6241 15.8042 40.1413 15.9351C44.6581 17.0784 48 21.1681 48 26.042C48 32.406 42.832 36 37.602 36C31.572 36 26 31.39 26 23.45ZM0 23.45C0 13.3858 7.45772 2.86747 19.2297 0.164427C19.6793 0.0611986 20.1364 0.294669 20.3301 0.713274L21.5161 3.27572C21.7602 3.80299 21.5031 4.42383 20.9877 4.69196C17.3044 6.60799 14.1644 11.1966 13.3647 14.8059C13.2493 15.3268 13.6241 15.8042 14.1413 15.9351C18.6581 17.0784 22 21.1681 22 26.042C22 32.406 16.832 36 11.602 36C5.572 36 0 31.39 0 23.45Z" fill="#FF4564"></path>
          </svg>
        </span>
        <p class="text-2xl leading-loose">On the other hand, perfection can also haunt some of us to the point of inaction. While some are too quick to act and end up wasting resources, others are completely paralyzed by the “excessive” amount of work behind building something new. There’s just “so much to get done” before delivering the product to the user that we end up feeling frustrated and overwhelmed.</p>
      </div>
      <p class="text-sm text-gray-500 text-center">Danny Bailey, CEO &amp; Founder at Wireframes</p>
    </div>
  </div>
</section>

<section class="md:pb-24 lg:pb-96">
  <div class="relative pt-20 pb-28 md:pb-80 bg-blue-50">
    <img class="hidden lg:block lg:absolute top-0 left-0 mt-32" src="zeus-assets/icons/dots/red-dot-left-blue-line.svg" alt="">
    <img class="h-16 mt-4 ml-auto lg:hidden" src="zeus-assets/icons/dots/green-dot-right-blue-line.svg" alt="">
    <img class="hidden lg:block lg:absolute top-0 right-0 mt-64" src="zeus-assets/icons/dots/green-dot-right-blue-line.svg" alt="">
    <div class="relative container mb-10 lg:mb-20 px-4 mx-auto">
      <div class="max-w-3xl mx-auto text-center">
        <span class="text-blue-400 font-semibold">What's new at Shuffle</span>
        <h2 class="mt-8 mb-6 lg:mb-10 text-4xl font-semibold font-heading">Take quick action that increases your brand's regular profit.</h2>
        <p class="text-xl text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      </div>
    </div>
    <div class="lg:absolute inset-x-0 max-w-4xl mx-auto px-4">
      <img class="lg:absolute top-0 left-0 mx-auto rounded-lg object-cover" src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
    </div>
  </div>
</section>

<section class="py-8 bg-gray-900" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav>
      <div class="flex justify-between items-center">
        <a class="text-lg font-medium" 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 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:flex lg:ml-auto lg:mr-12 lg:items-center lg:w-auto lg:space-x-12">
          <li><a class="text-white font-medium text-sm hover:text-blue-50" href="#">About</a></li>
          <li><a class="text-white font-medium text-sm hover:text-blue-50" href="#">Company</a></li>
          <li><a class="text-white font-medium text-sm hover:text-blue-50" href="#">Services</a></li>
          <li><a class="text-white font-medium text-sm hover:text-blue-50" href="#">Testimonials</a></li>
        </ul>
        <div class="hidden lg:block"><a class="inline-block py-3 px-8 text-sm text-white leading-normal bg-blue-300 hover:bg-blue-400 font-medium rounded transition duration-200" href="#">Contact Us</a></div>
      </div>
    </nav>

<section class="py-20" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-3 mb-16">
      <div class="w-full md:w-1/2 lg:w-1/3 p-3">
        <div class="p-6 border rounded-xl">
          <div class="relative h-52 mb-6">
            <span class="absolute top-0 right-0 mt-4 mr-4 text-xs text-white px-2 py-1 font-semibold bg-gray-600 bg-opacity-50 rounded-md uppercase">Development</span>
            <img class="w-full h-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1544717297-fa95b6ee9643?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          </div>
          <span class="inline-block mb-4 text-xs text-gray-500">10 jun 2020 19:40</span>
          <h2 class="mb-4 text-2xl font-semibold font-heading">Lorem ipsum dolor sit amet consectutar</h2>
          <p class="mb-4 text-gray-500 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <a class="text-lg font-medium text-red-500 underline hover:no-underline" href="#">Read more</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-3">
        <div class="p-6 border rounded-xl">
          <div class="relative h-52 mb-6">
            <span class="absolute top-0 right-0 mt-4 mr-4 text-xs text-white px-2 py-1 font-semibold bg-gray-600 bg-opacity-50 rounded-md uppercase">Development</span>
            <img class="w-full h-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          </div>
          <span class="inline-block mb-4 text-xs text-gray-500">10 jun 2020 19:40</span>
          <h2 class="mb-4 text-2xl font-semibold font-heading">Lorem ipsum dolor sit amet consectutar</h2>
          <p class="mb-4 text-gray-500 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>

<section class="md:pb-24 lg:pb-96">
  <div class="relative pt-20 pb-28 md:pb-80 bg-red-50">
    <img class="hidden lg:block lg:absolute top-0 left-0 mt-32" src="zeus-assets/icons/dots/blue-dot-left-red-line.svg" alt="">
    <img class="h-16 ml-auto lg:hidden" src="zeus-assets/icons/dots/red-dot-right-red-line.svg" alt="">
    <img class="hidden lg:block lg:absolute top-0 right-0 mt-64" src="zeus-assets/icons/dots/red-dot-right-red-line.svg" alt="">
    <div class="relative container px-4 mb-10 lg:mb-20 mx-auto">
      <div class="max-w-3xl mx-auto text-center">
        <span class="text-red-500">What's new at Shuffle</span>
        <h2 class="mt-8 mb-6 lg:mb-10 text-4xl font-semibold font-heading">Take quick action that increases your brand's regular profit.</h2>
        <p class="text-xl text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      </div>
    </div>
    <div class="lg:absolute inset-x-0 max-w-4xl mx-auto px-4">
      <img class="lg:absolute top-0 left-0 mx-auto rounded-lg object-cover" src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
    </div>
  </div>
</section>

<section class="py-8 bg-gray-900" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="relative">
      <div class="flex justify-between items-center">
        <a class="text-lg font-medium" 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 rounded">
            <svg class="block text-white h-4 w-4" fill="currentColor" 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 absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:w-auto lg:space-x-12">
          <li><a class="text-white text-sm font-medium hover:text-blue-50" href="#">About</a></li>
          <li><a class="text-white text-sm font-medium hover:text-blue-50" href="#">Company</a></li>
          <li><a class="text-white text-sm font-medium hover:text-blue-50" href="#">Services</a></li>
          <li><a class="text-white text-sm font-medium hover:text-blue-50" href="#">Testimonials</a></li>
        </ul>
        <div class="hidden lg:block"><a class="inline-block mr-2 px-8 py-3 text-sm leading-normal rounded text-white border hover:border-gray-400 font-medium" href="#">Log in</a><a class="inline-block px-8 py-3 text-sm text-white leading-normal rounded bg-blue-300 hover:bg-blue-400 font-medium transition duration-200" href="#">Sign Up</a></div>
      </div>
    </nav>

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto mb-12 lg:mb-16 text-center">
      <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>
      <div class="max-w-2xl mx-auto">
        <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>
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/3 lg:w-1/6 p-4">
        <div class="py-4 lg:py-8">
          <img class="h-6 mx-auto" src="zeus-assets/logo/slack-gray.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/6 p-4">
        <div class="py-4 lg:py-8">
          <img class="h-6 mx-auto" src="zeus-assets/logo/dropbox-gray.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/6 p-4">
        <div class="py-4 lg:py-8">
          <img class="h-6 mx-auto" src="zeus-assets/logo/spotify-gray.svg" alt="">
        </div>

<section class="relative py-20 overflow-x-hidden">
  <img class="hidden lg:block absolute top-0 left-0 mt-24" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
  <img class="hidden lg:block absolute top-0 right-0 mt-40" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
  <div class="container px-4 mx-auto">
    <div class="relative max-w-2xl mx-auto">
      <div class="absolute top-0 left-0 lg:-ml-20">
        <svg width="552" height="414" viewBox="0 0 552 414" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M299 269.675C299 151.65 388.187 28.1937 528.224 0.154258C528.676 0.0636969 529.136 0.294669 529.33 0.713275L551.18 47.9217C551.424 48.449 551.174 49.0702 550.633 49.2812C500.445 68.8437 456.451 134.368 450.998 180.121C450.935 180.651 451.309 181.121 451.836 181.208C508.665 190.617 552 239.966 552 299.483C552 372.669 492.568 414 432.423 414C363.078 414 299 360.985 299 269.675ZM0 269.675C0 151.65 89.1865 28.1937 229.224 0.154258C229.676 0.0636969 230.136 0.294669 230.33 0.713274L252.18 47.9217C252.424 48.449 252.174 49.0702 251.633 49.2812C201.445 68.8437 157.451 134.368 151.998 180.121C151.935 180.651 152.309 181.121 152.836 181.208C209.665 190.617 253 239.966 253 299.483C253 372.669 193.568 414 133.423 414C64.078 414 0 360.985 0 269.675Z" fill="url(#paint0_linear)"></path>
          <defs><linearGradient id="paint0_linear" x1="648" y1="-418.5" x2="107.461" y2="354.11" gradientUnits="userSpaceOnUse"><stop stop-color="white" stop-opacity="0"><stop offset="1" stop-color="#F2F5FA"></stop></stop></linearGradient></defs>
        </svg>
      </div>
      <div class="relative z-10 lg:py-10">
        <p class="mb-10 lg:mb-24 text-2xl leading-loose">On the other hand, perfection can also haunt some of us to the point of inaction. While some are too quick to act and end up wasting resources, others are completely paralyzed by the “excessive” amount of work behind building something new. There’s just “so much to get done” before delivering the product to the user that we end up feeling frustrated and overwhelmed.</p>
        <p class="text-sm text-gray-500 text-center">Danny Bailey, CEO &amp; Founder at Wireframes</p>
      </div>
    </div>
  </div>
</section>

<section class="relative py-20">
  <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-md mx-auto py-6 lg:py-12 px-4 lg:px-8 bg-white border rounded-xl text-center">
      <span class="inline-block mb-4 text-xs text-blue-400 font-semibold">Sign In</span>
      <h3 class="mb-12 text-3xl font-semibold font-heading">Join our community</h3>
      <form action="#">
        <div class="relative flex flex-wrap mb-6">
          <input class="relative mb-2 md:mb-0 w-full py-4 pl-4 text-sm border rounded" type="email" placeholder="e.g hello@shuffle.dev">
          <span class="absolute top-0 left-0 ml-4 -mt-2 px-1 inline-block bg-white text-gray-500 text-xs">Your email address</span>
        </div>
        <div class="relative flex flex-wrap mb-6">
          <input class="relative mb-2 md:mb-0 w-full py-4 pl-4 text-sm border rounded" type="password" placeholder="******">
          <span class="absolute top-0 left-0 ml-4 -mt-2 px-1 inline-block bg-white text-gray-500 text-xs">Password</span>
        </div>
        <button class="w-full inline-block py-4 mb-4 text-sm text-white font-medium leading-normal bg-red-400 hover:bg-red-300 rounded transition duration-200">Get Started</button>
        <a class="block pb-6 mb-6 text-sm font-semibold hover:underline border-b" href="#">Forgot password?</a>
        <a class="flex items-center justify-center mb-4 py-4 bg-blue-800 hover:bg-blue-900 rounded" href="#">
          <span class="inline-block mr-2">
            <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M4.0898 11.8182V6.51074H5.90537L6.17776 4.4417H4.0898V3.12092C4.0898 2.52207 4.25864 2.11397 5.13515 2.11397L6.25125 2.11352V0.262891C6.05824 0.238289 5.39569 0.181885 4.62456 0.181885C3.01431 0.181885 1.9119 1.14594 1.9119 2.91601V4.4417H0.0908203V6.51074H1.9119V11.8182H4.0898Z" fill="white"></path>
            </svg>
          </span>