Tailwind CSS Components

<section class="py-20 md:py-32 overflow-hidden">
  <img class="absolute top-0 left-0" src="saturn-assets/images/stats/left-orange-light.png" alt="">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg lg:max-w-7xl mx-auto">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
          <div>
            <span class="inline-block py-1 px-3 mb-5 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">👋 MEET SATURN UI LIBRARY</span>
            <h1 class="font-heading text-4xl xs:text-6xl xl:text-7xl font-bold text-gray-900">
              <span class="block">Achievements</span>
              <span>This</span>
              <span class="font-serif italic pb-3">Month</span>
            </h1>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="max-w-md lg:ml-auto">
            <div class="flex flex-wrap items-center justify-between -mx-4">
              <div class="w-full sm:w-auto mb-12 sm:mb-0 text-center px-4">
                <div class="flex mx-auto mb-5 items-center justify-center w-20 h-20 rounded-full bg-yellow-200">
                  <img src="saturn-assets/images/stats/icon-flight.svg" alt="">
                </div>
                <div>
                  <h5 class="text-6xl font-bold mb-2">320</h5>

<section class="relative p-10 overflow-hidden">
  <div class="relative py-20 md:py-24 px-6 sm:px-16">
    <img class="absolute top-0 left-0 w-full h-full rounded-5xl" src="saturn-assets/images/newsletter/bg-gradient-color-big.png" alt="">
    <div class="relative container px-4 mx-auto">
      <div class="max-w-5xl">
        <h4 class="max-w-3xl font-heading text-4xl sm:text-5xl md:text-6xl text-gray-50 font-semibold mb-8">Sign up and get to know our updates</h4>
        <div class="md:flex">
          <div class="mb-6 md:mb-0 md:mr-5 pt-2 text-gray-600">
            <svg width="84" height="10" viewBox="0 0 84 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 4.25C0.585786 4.25 0.25 4.58579 0.25 5C0.25 5.41421 0.585786 5.75 1 5.75L1 4.25ZM84 5.00001L76.5 0.669879L76.5 9.33013L84 5.00001ZM1 5.75L77.25 5.75001L77.25 4.25001L1 4.25L1 5.75Z" fill="#FAFBFC"></path>
            </svg>
          </div>
          <div class="max-w-2xl">
            <p class="text-lg font-semibold text-gray-50 mb-16">Get insider access to our company by subscribing to our newsletter and stay informed about our products, services, and initiatives.</p>
            <div class="max-w-lg">
              <div class="sm:flex mb-2 items-center">
                <input class="w-full mb-3 sm:mb-0 sm:mr-4 py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="email" placeholder="pat@saturn.dev">
                <button class="relative group inline-block flex-shrink-0 w-full sm:w-auto py-3 px-5 text-sm font-semibold text-orange-50 bg-blue-900 rounded-md overflow-hidden" type="submit">
                  <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
                  <div class="relative flex items-center justify-center">
                    <span class="mr-4">Subscribe</span>
                    <svg width="8" height="11" viewBox="0 0 8 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6.82994 5.04001L2.58994 0.80001C2.49698 0.706281 2.38638 0.631887 2.26452 0.581118C2.14266 0.530349 2.01195 0.504211 1.87994 0.504211C1.74793 0.504211 1.61723 0.530349 1.49537 0.581118C1.37351 0.631887 1.26291 0.706281 1.16994 0.80001C0.983692 0.987372 0.87915 1.24082 0.87915 1.50501C0.87915 1.7692 0.983692 2.02265 1.16994 2.21001L4.70994 5.75001L1.16994 9.29001C0.983692 9.47737 0.87915 9.73082 0.87915 9.99501C0.87915 10.2592 0.983692 10.5126 1.16994 10.7C1.26338 10.7927 1.3742 10.866 1.49604 10.9158C1.61787 10.9655 1.74834 10.9908 1.87994 10.99C2.01155 10.9908 2.14201 10.9655 2.26385 10.9158C2.38569 10.866 2.4965 10.7927 2.58994 10.7L6.82994 6.46001C6.92367 6.36705 6.99806 6.25645 7.04883 6.13459C7.0996 6.01273 7.12574 5.88202 7.12574 5.75001C7.12574 5.618 7.0996 5.48729 7.04883 5.36543C6.99806 5.24357 6.92367 5.13297 6.82994 5.04001Z" fill="currentColor"></path>
                    </svg>

<section class="relative py-20 2xl:py-10 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 px-4 order-last lg:order-first">
          <div class="relative max-w-lg mx-auto lg:mx-0 lg:max-w-2xl h-full">
            <img class="block w-full h-142 sm:h-full object-cover rounded-5xl" src="saturn-assets/images/sign-up/gradient-left.png" alt="">
            <div class="absolute bottom-0 w-full left-0 h-full flex items-center justify-center p-10">
              <div class="max-w-md mx-auto">
                <h4 class="font-heading text-3xl sm:text-5xl lg:text-6xl text-white font-bold mb-8">Sign up to your account</h4>
                <div class="md:flex mb-20">
                  <div class="mb-6 md:mb-0 md:mr-8 pt-3 text-gray-600">
                    <svg width="84" height="10" viewBox="0 0 84 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1 4.25C0.585786 4.25 0.25 4.58579 0.25 5C0.25 5.41421 0.585786 5.75 1 5.75L1 4.25ZM84 5.00001L76.5 0.669879L76.5 9.33013L84 5.00001ZM1 5.75L77.25 5.75001L77.25 4.25001L1 4.25L1 5.75Z" fill="#FAFBFC"></path>
                    </svg>
                  </div>
                  <div>
                    <p class="text-lg font-semibold text-gray-200">Greetings on your return! We kindly request you to enter your details.</p>
                  </div>
                </div>
                <div class="flex items-center">
                  <div class="flex mr-4 items-center">
                    <img class="w-10 h-10" src="saturn-assets/images/sign-up/avatar-purple-border.png" alt="">
                    <img class="w-10 h-10 -ml-3" src="saturn-assets/images/sign-up/avatar-purple-border-4.png" alt="">

<section class="relative pt-20 pb-8 overflow-hidden">
  <img class="absolute top-0 left-0 min-w-max xs:min-w-0 w-112 xs:w-full h-full" src="saturn-assets/images/footers/background-dark.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-3xl mb-24 sm:mb-52 pr-8 sm:pr-0">
      <h1 class="font-heading text-4xl xs:text-5xl md:text-6xl font-semibold text-white mb-20">
        <span>Join &amp; Let's Build</span>
        <span class="font-serif italic">Magnificent</span>
        <span>Products</span>
      </h1>
      <div class="sm:flex items-center">
        <div class="sm:flex mb-6 sm:mb-0 sm:mr-12 items-center">
          <div class="flex mb-3 sm:mb-0 sm:mr-3 items-center justify-center w-12 h-12 bg-orange-900 rounded-full">
            <img src="saturn-assets/images/footers/map-pin-light.svg" alt="">
          </div>
          <div>
            <span class="block text-orange-50">1929, Bancangan, Sambit,</span>
            <span class="block text-orange-50">Wakanda Kidul</span>
          </div>
        </div>
        <div class="sm:flex items-center">
          <div class="flex mb-3 sm:mb-0 sm:mr-3 items-center justify-center w-12 h-12 bg-orange-900 rounded-full">
            <img src="saturn-assets/images/footers/envelope-light.svg" alt="">
          </div>
          <div>

<section class="relative py-20 lg:py-32 overflow-hidden">
  <img class="absolute bottom-0 left-0" src="saturn-assets/images/features/left-blue-center.png" alt="">
  <img class="absolute bottom-1/2 right-0 transform translate-y-1/2" src="saturn-assets/images/features/orange-right-top.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="flex flex-wrap items-center -mx-4 mb-24">
        <div class="w-full lg:w-1/2 px-4 order-last lg:order-first">
          <img class="block max-w-lg mx-auto lg:mx-0 w-full" src="saturn-assets/images/features/violet-image.png" alt="">
        </div>
        <div class="w-full lg:w-1/2 px-4 mb-24 lg:mb-0">
          <div class="max-w-lg mx-auto lg:mr-0">
            <h1 class="font-heading text-4xl xs:text-6xl font-bold text-gray-900 mb-6">
              <span class="font-serif italic">Simple &amp; fast</span>
              <span>international payment</span>
            </h1>
            <p class="max-w-md text-gray-400 mb-20">Use receiving accounts in a growing number of currencies and get paid like a local. Pay freelancer and customers anywhere in the world straight.</p>
            <p class="text-lg font-semibold text-gray-900 mb-6">“Transferring is very easy and super fast. I find the different way from Coca Pay. Perfect and smooth payment app for all”</p>
            <div class="flex items-center">
              <img src="saturn-assets/images/features/avatar-medium.png" alt="">
              <div class="ml-4">
                <span class="font-semibold">Jovanca Nirmala</span>
                <span class="block text-sm text-gray-400">CTO at Saturn</span>
              </div>
            </div>

<section class="relative py-20 md:py-24 lg:py-36 overflow-hidden bg-gray-900">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-5xl mx-auto">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-1/2 px-4 order-last lg:order-first">
          <img class="w-full max-w-lg lg:max-w-none mx-auto rounded-3xl" src="saturn-assets/images/http-codes/dog-photo.png" alt="">
        </div>
        <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
          <div class="relative max-w-sm mx-auto lg:ml-auto">
            <span class="inline-block py-2 px-3 mb-5 text-sm bg-red-50 text-red-900 font-semibold rounded-full">Page not found</span>
            <h4 class="font-heading text-5xl md:text-7xl font-bold text-white mb-6">Oh no! Error 404</h4>
            <div class="flex mb-14 items-start">
              <span class="flex-shrink-0 mt-2 mr-3">
                <svg width="46" height="10" viewBox="0 0 46 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 4.25C0.585786 4.25 0.25 4.58579 0.25 5C0.25 5.41421 0.585786 5.75 1 5.75L1 4.25ZM46 5L38.5 0.669876L38.5 9.33013L46 5ZM1 5.75L39.25 5.75L39.25 4.25L1 4.25L1 5.75Z" fill="#D5DAE1"></path>
                </svg>
              </span>
              <p class="text-xl font-semibold text-gray-400">Something went wrong, so this page is broken.</p>
            </div>
            <a class="relative group inline-block py-3 px-5 text-center text-sm font-semibold text-orange-50 hover:text-orange-900 bg-orange-900 rounded-full overflow-hidden transition duration-200" href="#">
              <div class="absolute top-0 right-full w-full h-full bg-white transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
              <span class="relative">Take me home</span>
            </a>
          </div>

<section class="py-20 md:py-24">
  <div class="container px-4 mx-auto">
    <div class="relative max-w-7xl mx-auto px-6 md:px-12 py-16 sm:py-28 rounded-4xl bg-orange-800 overflow-hidden">
      <img class="absolute top-0 left-1/2 transform -translate-x-1/2 h-full object-cover" src="saturn-assets/images/cta/circle-bg.svg" alt="">
      <div class="relative text-center">
        <span class="block text-2xl sm:text-3xl md:text-4xl font-semibold text-orange-400 mb-6">Ready to collaborate?</span>
        <h2 class="font-heading text-4xl sm:text-5xl md:text-6xl font-bold text-white mb-8">
          <span>Start your free trial</span>
          <span class="font-serif italic">today!</span>
        </h2>
        <a class="relative group inline-block w-full sm:w-auto py-4 px-6 text-orange-900 hover:text-white font-semibold bg-white rounded-md overflow-hidden transition duration-300" href="#">
          <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-110 transition duration-500"></div>
          <div class="relative flex items-center justify-center">
            <span class="mr-4">Get Started</span>
            <span>
              <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.83 5.28999L2.59 1.04999C2.49704 0.956266 2.38644 0.881872 2.26458 0.831103C2.14272 0.780334 2.01202 0.754196 1.88 0.754196C1.74799 0.754196 1.61729 0.780334 1.49543 0.831103C1.37357 0.881872 1.26297 0.956266 1.17 1.04999C0.983753 1.23736 0.879211 1.49081 0.879211 1.75499C0.879211 2.01918 0.983753 2.27263 1.17 2.45999L4.71 5.99999L1.17 9.53999C0.983753 9.72736 0.879211 9.98081 0.879211 10.245C0.879211 10.5092 0.983753 10.7626 1.17 10.95C1.26344 11.0427 1.37426 11.116 1.4961 11.1658C1.61794 11.2155 1.7484 11.2408 1.88 11.24C2.01161 11.2408 2.14207 11.2155 2.26391 11.1658C2.38575 11.116 2.49656 11.0427 2.59 10.95L6.83 6.70999C6.92373 6.61703 6.99813 6.50643 7.04889 6.38457C7.09966 6.26271 7.1258 6.13201 7.1258 5.99999C7.1258 5.86798 7.09966 5.73728 7.04889 5.61542C6.99813 5.49356 6.92373 5.38296 6.83 5.28999Z" fill="currentColor"></path>
              </svg>
            </span>
          </div>
        </a>
      </div>
    </div>
  </div>

<section class="relative py-20 md:py-24 overflow-hidden">
  <img class="absolute bottom-0 right-0" src="saturn-assets/images/newsletter/light-orange-right.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="relative max-w-7xl mx-auto py-20 lg:py-14 px-8 md:px-14 rounded-3xl bg-white shadow-xl overflow-hidden">
      <img class="absolute top-0 right-0 -mr-20 2xl:-mr-0 2xl:w-125" src="saturn-assets/images/newsletter/medium-half-right-star.png" alt="">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-1/2 px-4 order-last lg:order-first">
          <img class="block w-full max-w-md lg:max-w-none mx-auto" src="saturn-assets/images/newsletter/image-ghost-big-yellow.png" alt="">
        </div>
        <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
          <div class="relative z-10 max-w-md lg:max-w-lg mx-auto lg:ml-auto">
            <h4 class="font-heading text-4xl sm:text-5xl text-gray-900 font-bold mb-6">
              <span>Sign up for our</span>
              <span></span>
              <span class="text-orange-900">newsletter</span>
            </h4>
            <p class="max-w-xs text-lg font-semibold text-gray-400 mb-15">Stay in the loop with everything you need to know.</p>
            <div class="sm:flex mb-2 items-center">
              <input class="w-full mb-3 sm:mb-0 sm:mr-4 py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="email" placeholder="pat@saturn.dev">
              <button class="relative group inline-block flex-shrink-0 w-full sm:w-auto py-3 px-5 text-sm font-semibold text-orange-50 bg-orange-900 rounded-md overflow-hidden" type="submit">
                <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
                <div class="relative flex items-center justify-center">
                  <span class="mr-4">Subscribe</span>
                  <svg width="8" height="11" viewBox="0 0 8 11" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="relative overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="hidden xl:block absolute top-0 left-0 h-full w-full max-w-2xl xl:max-w-3xl 2xl:max-w-4xl">
    <img class="block h-full w-full object-cover" src="saturn-assets/images/sign-up/image-vr-woman.png" alt="">
    <div class="absolute bottom-0 w-full left-0 px-20 pb-18">
      <div class="max-w-2xl p-10 backdrop-blur-md backdrop-filter bg-black bg-opacity-30 rounded-5xl">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-5">
                <div x-ref="slide1" class="flex-shrink-0 h-full w-full p-5">
                    <h5 class="text-3xl text-white font-semibold mb-2">Selina Destin</h5>
                    <span class="block text-sm text-white font-semibold mb-6">Web Development Agency</span>
                    <p class="max-w-lg text-2xl text-white mb-15">"Untitled has become essential in starting every new project, we can't imagine working without it."</p>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 h-full w-full p-5">
                    <h5 class="text-3xl text-white font-semibold mb-2">Kristin Watson</h5>
                    <span class="block text-sm text-white font-semibold mb-6">Medical Assistant</span>
                    <p class="max-w-lg text-2xl text-white mb-15">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna."</p>
                </div>
                <div x-ref="slide3" class="flex-shrink-0 h-full w-full p-5">
                    <h5 class="text-3xl text-white font-semibold mb-2">Darrell Steward</h5>
                    <span class="block text-sm text-white font-semibold mb-6">Marketing Coordinator</span>
                    <p class="max-w-lg text-2xl text-white mb-15">"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
                </div>
            </div>
        </div>

<section class="relative py-20 md:py-28 lg:py-52 overflow-hidden bg-gray-900">
  <div class="relative container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <div class="max-w-md md:max-w-2xl lg:max-w-none mx-auto">
          <h2 class="font-heading text-4xl xs:text-6xl font-bold text-white mb-12">
            <span>Currently Updating-</span>
            <span class="block font-serif italic">Back soon!</span>
          </h2>
          <div class="sm:flex max-w-sm sm:max-w-lg">
            <div class="mb-6 sm:mb-0 sm:mr-3 pt-3">
              <svg width="84" height="10" viewBox="0 0 84 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 4.25C0.585786 4.25 0.25 4.58579 0.25 5C0.25 5.41421 0.585786 5.75 1 5.75L1 4.25ZM84 5.00001L76.5 0.669879L76.5 9.33013L84 5.00001ZM1 5.75L77.25 5.75001L77.25 4.25001L1 4.25L1 5.75Z" fill="#FAFBFC"></path>
              </svg>
            </div>
            <div class="max-w-md">
              <p class="sm:text-xl text-gray-400 font-semibold mb-14">Sorry, the page you are looking for doesn't exist or has been moved. Try searching our site:</p>
              <a class="relative group inline-block py-3 px-5 text-center text-sm font-semibold text-orange-50 hover:text-orange-900 bg-orange-900 rounded-full overflow-hidden transition duration-200" href="#">
                <div class="absolute top-0 right-full w-full h-full bg-white transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
                <span class="relative">Take me home</span>
              </a>
            </div>
          </div>
        </div>

<section class="relative py-20 md:py-24 overflow-hidden bg-gray-900">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
          <div class="relative z-10 max-w-lg mx-auto">
            <h4 class="font-heading text-4xl sm:text-5xl lg:text-6xl text-white font-bold mb-12">Sign up for our newsletter</h4>
            <div class="md:flex mb-16">
              <div class="mb-6 md:mb-0 md:mr-8 pt-2 text-gray-600">
                <svg width="84" height="9" viewBox="0 0 84 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 3.75C0.585786 3.75 0.25 4.08579 0.25 4.5C0.25 4.91421 0.585786 5.25 1 5.25L1 3.75ZM84 4.50001L76.5 0.169879L76.5 8.83013L84 4.50001ZM1 5.25L77.25 5.25001L77.25 3.75001L1 3.75L1 5.25Z" fill="white"></path>
                </svg>
              </div>
              <div class="max-w-xs">
                <p class="text-lg font-semibold text-gray-400">Stay in the loop with everything you need to know.</p>
              </div>
            </div>
            <div class="sm:flex mb-2 items-center">
              <input class="w-full mb-3 sm:mb-0 sm:mr-4 py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="email" placeholder="pat@saturn.dev">
              <button class="relative group inline-block flex-shrink-0 w-full sm:w-auto py-3 px-5 text-sm font-semibold text-orange-50 hover:text-orange-900 bg-orange-900 rounded-md overflow-hidden transition duration-300" type="submit">
                <div class="absolute top-0 right-full w-full h-full bg-white transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
                <div class="relative flex items-center justify-center">
                  <span class="mr-4">Subscribe</span>
                  <svg width="8" height="11" viewBox="0 0 8 11" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="relative pt-6 px-4 lg:px-6 pb-20 md:pb-32 overflow-hidden">
  <div class="relative max-w-7xl pt-12 sm:pt-28 mx-auto">
    <img class="absolute top-0 left-0 object-contain" src="saturn-assets/images/sign-up/background-gradient-color.png" alt="">
    <div class="relative container px-4 mx-auto">
      <div class="max-w-lg md:max-w-xl py-14 px-6 xs:px-12 lg:px-16 mx-auto bg-white rounded-4xl shadow-lg">
        <h3 class="font-heading text-4xl text-gray-900 font-semibold mb-4">Sign up to your account</h3>
        <p class="text-lg text-gray-500 mb-10">Greetings on your return! We kindly request you to enter your details.</p>
        <form action="">
          <div class="mb-6">
            <label class="block mb-1.5 text-sm text-gray-900 font-semibold" for="">Name</label>
            <input class="w-full py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="text" placeholder="Stefano Bojarski">
          </div>
          <div class="mb-6">
            <label class="block mb-1.5 text-sm text-gray-900 font-semibold" for="">Email</label>
            <input class="w-full py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="email" placeholder="pat@saturn.dev">
          </div>
          <div class="mb-6">
            <label class="block mb-1.5 text-sm text-gray-900 font-semibold" for="">Password</label>
            <div class="relative">
              <input class="w-full py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="password" placeholder="min 12 cars">
              <button class="absolute top-1/2 right-0 mr-3 transform -translate-y-1/2 inline-block hover:scale-110 transition duration-100">
                <img src="saturn-assets/images/sign-up/icon-eye.svg" alt="">
              </button>
            </div>

<section class="py-20 md:py-32 overflow-hidden bg-gray-900">
  <div class="container px-4 mx-auto">
    <div class="max-w-5xl mx-auto">
      <img class="block mb-4 mx-auto" src="saturn-assets/images/http-codes/alien-dark-2.svg" alt="">
      <div class="flex mb-8 items-end justify-center">
        <span class="text-9xl sm:text-11xl font-bold text-white">4</span>
        <img class="block mx-4" src="saturn-assets/images/http-codes/cry-face-icon.png" alt="">
        <span class="text-9xl sm:text-11xl font-bold text-white">4</span>
      </div>
      <h2 class="font-heading text-center text-4xl sm:text-5xl font-bold text-white mb-6">Oops! Can't Find That Page</h2>
      <p class="max-w-lg mx-auto text-xl font-semibold text-gray-400 mb-12 md:mb-20">Sorry, the page you are looking for doesn't exist or has been moved. Try searching our site:</p>
      <div class="text-center">
        <a class="relative group inline-block py-3 px-5 text-center text-sm font-semibold text-orange-50 hover:text-orange-900 bg-orange-900 rounded-full overflow-hidden transition duration-200" href="#">
          <div class="absolute top-0 right-full w-full h-full bg-white transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
          <span class="relative">Take me home</span>
        </a>
      </div>
    </div>
  </div>
</section>

<section class="py-20 sm:py-32 lg:py-64 overflow-hidden bg-gray-900">
  <div class="container px-4 mx-auto">
    <div class="sm:flex items-start justify-center max-w-5xl mx-auto">
      <img class="block mb-8 sm:mr-10 md:mr-14" src="saturn-assets/images/http-codes/sad-face-icon.svg" alt="">
      <div class="max-w-xs md:max-w-sm lg:max-w-2xl">
        <h1 class="font-heading text-4xl xs:text-6xl md:text-7xl font-bold text-white mb-6">
          <span>Oh no!</span>
          <span class="font-serif italic">Error 404</span>
        </h1>
        <p class="max-w-lg text-xl font-semibold text-gray-400 mb-14">Sorry, the page you are looking for doesn't exist or has been moved. Try searching our site:</p>
        <a class="relative group inline-block py-3 px-5 text-center text-sm font-semibold text-orange-50 hover:text-orange-900 bg-orange-900 rounded-full overflow-hidden transition duration-200" href="#">
          <div class="absolute top-0 right-full w-full h-full bg-white transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
          <span class="relative">Take me home</span>
        </a>
      </div>
    </div>
  </div>
</section>

<section class="relative py-20 xl:py-10 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
          <div class="max-w-md mx-auto lg:mx-0">
            <h3 class="font-heading text-4xl text-gray-900 font-semibold mb-4">Sign up to your account</h3>
            <p class="text-lg text-gray-500 mb-10">See our software in action with the demo version</p>
            <form action="">
              <div class="mb-5">
                <input class="w-full py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="text" placeholder="Enter your Name">
              </div>
              <div class="mb-5">
                <input class="w-full py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="text" placeholder="Enter your email">
              </div>
              <div class="mb-5">
                <div class="relative">
                  <input class="w-full py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="password" placeholder="min 12 cars">
                  <button class="absolute top-1/2 right-0 mr-3 transform -translate-y-1/2 inline-block hover:scale-110 transition duration-100">
                    <img src="saturn-assets/images/sign-up/icon-eye.svg" alt="">
                  </button>
                </div>
              </div>
              <div class="flex mb-6 items-center">

<section x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }" class="relative py-20 lg:py-10 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="flex flex-wrap -mx-4 xl:items-end">
        <div class="w-full lg:w-1/2 px-4 order-last lg:order-first">
          <div class="relative max-w-md mx-auto lg:mx-0 lg:max-w-2xl h-full">
            <img class="block w-full h-166 sm:h-full object-cover rounded-3xl" src="saturn-assets/images/sign-up/image-blue-scary.png" alt="">
            <div class="absolute top-0 left-0 h-full w-full p-8 pb-16 xs:p-16">
              <div class="flex flex-col h-full justify-between">
                <div class="flex items-start justify-between">
                  <a class="inline-block mt-2" href="#">
                    <img class="h-8" src="saturn-assets/logos/logo-saturn-light.svg" alt="">
                  </a>
                  <div>
                    <button x-on:click="activeSlide = 0, slideWidth = $refs['slide1'].offsetWidth * 0" :class="{'bg-orange-900': activeSlide === 0, 'bg-white hover:bg-orange-100': activeSlide !== 0 }" class="bg-orange-900 inline-block mr-2 h-1 w-5 rounded-full cursor-pointer"></button>
                    <button x-on:click="activeSlide = 1, slideWidth = $refs['slide2'].offsetWidth * 1" :class="{'bg-orange-900': activeSlide === 1, 'bg-white hover:bg-orange-100': activeSlide !== 1 }" class="bg-white hover:bg-orange-100 inline-block mr-2 h-1 w-5 rounded-full cursor-pointer"></button>
                    <button x-on:click="activeSlide = 2, slideWidth = $refs['slide3'].offsetWidth * 2" :class="{'bg-orange-900': activeSlide === 2, 'bg-white hover:bg-orange-100': activeSlide !== 2 }" class="bg-white hover:bg-orange-100 inline-block h-1 w-5 rounded-full cursor-pointer"></button>
                  </div>
                </div>
                <div class="max-w-sm">
                    <div class="overflow-hidden">
                        <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-5">
                            <div x-ref="slide1" class="flex-shrink-0 h-full w-full p-5">
                                <div class="flex mb-6 items-center">

<section class="py-20 md:py-32 overflow-hidden bg-gray-900">
  <div class="container px-4 mx-auto">
    <div class="max-w-5xl mx-auto">
      <img class="block mb-4 mx-auto" src="saturn-assets/images/http-codes/alien-dark-2.svg" alt="">
      <h3 class="text-center text-9xl sm:text-11xl font-bold text-white mb-6">404</h3>
      <h2 class="font-heading text-center text-4xl sm:text-5xl font-bold text-white mb-6">Oops! Can't Find That Page</h2>
      <p class="max-w-lg mx-auto text-xl font-semibold text-gray-400 mb-12 md:mb-20">Sorry, the page you are looking for doesn't exist or has been moved. Try searching our site:</p>
      <div class="text-center">
        <a class="relative group inline-block py-3 px-5 text-center text-sm font-semibold text-orange-50 hover:text-orange-900 bg-orange-900 rounded-full overflow-hidden transition duration-200" href="#">
          <div class="absolute top-0 right-full w-full h-full bg-white transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
          <span class="relative">Take me home</span>
        </a>
      </div>
    </div>
  </div>
</section>

<section x-data="{ mobileNavOpen: false }" class="bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
    <div class="container px-4 mx-auto">
        <nav class="flex justify-between items-center py-8">
            <a href="#">
                <img src="darkpro-assets/darkpro-logo.png" alt="" class="h-8">
            </a>
            <div class="lg:hidden">
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block hover:text-white text-neutral-300 focus:outline-none transition-colors duration-200">
                    <svg class="h-6 w-6" 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 lg:flex ml-auto mr-8 items-center w-auto space-x-8">
                <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Product</a></li>
                <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Solutions</a></li>
                <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Resources</a></li>
                <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Company</a></li>
            </ul>
            <a class="hidden lg:block px-4 py-2 text-sm font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-full transition-all duration-200 hover:shadow-lg" href="#">Get Started</a>
        </nav>
        
        <div class="flex flex-wrap items-center -mx-4 mt-8 lg:mt-12 pb-20">

<section class="relative pb-8 overflow-y-hidden bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <div class="hidden lg:block absolute top-0 left-0 bottom-0 w-2/5">
    <div class="relative h-full">
      <div class="absolute inset-0 opacity-20 bg-gradient-to-br from-purple-400 to-purple-900 rounded-2xl filter blur-3xl"></div>
      <div class="pr-1 pb-1 border border-white border-opacity-20 h-full rounded-br-2xl">
        <img class="relative object-cover w-full h-full border-r border-neutral-800 rounded-br-xl" src="https://images.unsplash.com/photo-1535957998253-26ae1ef29506?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHwxfHx3b3JrfGVufDB8MXx8fDE3NTAwNjA4NTV8MA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=960" alt="">
      </div>
    </div>
  </div>
  <div class="relative container px-4 mx-auto">
    <div class="w-full lg:w-3/5 lg:pl-16 ml-auto mb-12">
      <nav class="flex justify-between items-center py-8">
          <a href="#" class="lg:hidden">
              <img src="darkpro-assets/darkpro-logo.png" alt="" class="h-8">
          </a>
          <div class="lg:hidden ml-auto">
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block hover:text-white text-neutral-300 focus:outline-none transition-colors duration-200">
                <svg class="h-6 w-6" 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 lg:flex mr-auto mr-8 items-center w-auto space-x-8">

<section class="bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="flex justify-between items-center py-8">
        <a href="#">
            <img src="darkpro-assets/darkpro-logo.png" alt="" class="h-8">
        </a>
        <div class="lg:hidden">
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block hover:text-white text-neutral-300 focus:outline-none transition-colors duration-200">
                <svg class="h-6 w-6" 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 lg:flex ml-auto mr-8 items-center w-auto space-x-8">
            <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Product</a></li>
            <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Solutions</a></li>
            <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Resources</a></li>
            <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Company</a></li>
        </ul>
        <a class="hidden lg:block px-4 py-2 text-sm font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-full transition-all duration-200 hover:shadow-lg" href="#">Get Started</a>
    </nav>
    <div class="relative pt-12 md:pt-16 pb-20">
      <div class="max-w-2xl mb-16 mx-auto text-center">