Redirecting to PayPal

Can't find the right component?

Describe it and Shuffle AI builds it in seconds, ready to edit and export.

Free to start Generate with AI

Tailwind CSS Hero section Components

Browse 366 ready-made Tailwind CSS hero section components from multiple UI libraries. Every variant is fully responsive – copy the code or customize it in the visual editor and export clean code.

Framework

UI Library

Components

Hero section from Saturn

Tailwind CSS

Saturn

Saturn Tech Startup Hero with Robotic Hand and CTA

A light-themed marketing hero section for a tech startup, featuring a large two-line heading with an italic serif accent word, a short mission statement, an orange call-to-action button, a trusted-by logo row, and a stats card beside a decorative robotic hand illustration.

<section x-data="{ mobileNavOpen: false }" class="relative pb-20 overflow-hidden">
  <img class="absolute top-0 right-0 w-52 md:w-auto" src="saturn-assets/images/headers/star-background-header.png" alt="">
  <img class="absolute top-0 right-0 mt-10 mr-10" src="saturn-assets/images/headers/light-orange-blue-1.png" alt="">
  <img class="absolute top-0 right-0 mt-64 sm:mt-80 lg:mt-64 w-2/5 animate-moveHand" src="saturn-assets/images/headers/robot-hand-header.png" alt="">
  <nav class="relative py-6 mb-12 md:mb-20 bg-transparent">
    <div class="container px-4 mx-auto">
      <div class="flex items-center">
        <a class="inline-block text-lg font-bold" href="#">
          <img class="h-10" src="saturn-assets/logos/logo-saturn-dark.svg" alt="" width="auto">
        </a>
        <div class="lg:hidden ml-auto">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex w-12 h-12 items-center justify-center bg-gray-100 hover:bg-gray-200 rounded-md transition duration-200">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3 12H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M3 6H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M3 18H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>
        <ul class="hidden lg:flex ml-14 lg:w-auto lg:space-x-12">
          <li class="group relative">
            <a class="inline-block text-sm text-gray-900 hover:text-orange-900 font-medium" href="#">Featured</a>
            <div class="hidden group-hover:block absolute top-full left-0 min-w-max max-w-xs p-4 z-30">
              <div class="-mb-2 ml-8 w-4 h-4 rounded-sm bg-white border-l border-t border-gray-200 transform rotate-45"></div>
              <div class="w-full max-w-xs bg-white border border-gray-100 rounded-3xl pt-4 pb-4 px-4">
                <div class="pb-3 mb-3 border-b border-gray-100"><a class="block py-3 px-4 text-sm text-gray-900 hover:bg-orange-50 rounded-lg" href="#">Featured</a><a class="block py-3 px-4 text-sm text-gray-900 hover:bg-orange-50 rounded-lg" href="#">Solutions</a></div>
                <div class="pb-3 mb-3 border-b border-gray-100">
                  <a class="flex mb-2 items-center py-3 px-4 text-sm text-gray-900 hover:bg-orange-50 rounded-lg" href="#">
                    <img src="saturn-assets/images/headers/icon-download.svg" alt="">
                    <span class="ml-3">Download</span>
                  </a>
                  <a class="flex mb-2 items-center py-3 px-4 text-sm text-gray-900 hover:bg-orange-50 rounded-lg" href="#">
                    <img src="saturn-assets/images/headers/icon-slack.svg" alt="">
                    <span class="ml-3">Community</span>
                  </a>
                  <a class="flex mb-2 items-center py-3 px-4 text-sm text-gray-900 hover:bg-orange-50 rounded-lg" href="#">
                    <img src="saturn-assets/images/headers/icon-help.svg" alt="">
                    <span class="ml-3">Help</span>
                  </a>
                </div>
                <div class="flex items-center pb-3 mb-3 border-b border-gray-100"><a class="inline-block px-4 py-3 mr-6 text-sm font-semibold text-orange-900 hover:text-gray-900" href="#">Sign In</a><a class="inline-block py-3 px-4 text-sm font-semibold text-orange-900 hover:text-white border border-gray-200 hover:border-orange-600 hover:bg-orange-900 rounded-md transition duration-200" href="#">Create an account</a></div>
                <div class="flex items-center">
                  <div class="flex w-10 h-10 items-center justify-center bg-orange-50 rounded-full">
                    <img src="saturn-assets/images/headers/icon-email-me.svg" alt="">
                  </div>
                  <div class="ml-3">
                    <span class="block text-xs text-gray-500">Drop us a line</span>
                    <a class="text-sm font-semibold text-black hover:text-orange-900" href="#">hello@shuffle.dev</a>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li><a class="inline-block text-sm text-gray-900 hover:text-orange-900 font-medium" href="#">Solutions</a></li>
          <li><a class="inline-block text-sm text-gray-900 hover:text-orange-900 font-medium" href="#">Products</a></li>
          <li><a class="inline-block text-sm text-gray-900 hover:text-orange-900 font-medium" href="#">Articles</a></li>
        </ul>
        <div class="hidden lg:block ml-auto">
          <div class="flex items-center">
            <a class="inline-block mr-9 text-sm font-semibold text-orange-900 hover:text-gray-900" href="#">Sign In</a>
            <a class="relative group inline-block py-3 px-4 text-sm font-semibold text-orange-900 hover:text-white border border-gray-200 rounded-md overflow-hidden transition duration-300" href="#">
              <div class="absolute top-0 right-full w-full h-full bg-orange-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
              <span class="relative">Create an account</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div class="relative container px-4 mx-auto">
    <div class="max-w-xl xl:max-w-4xl">
      <h1 class="font-heading text-5xl xs:text-6xl md:text-8xl xl:text-10xl font-bold text-gray-900 mb-8 sm:mb-14">
        <span>World Best Tech Startup</span>
        <span class="font-serif italic">Ever</span>
      </h1>
      <div class="md:flex mb-14 max-w-xs sm:max-w-sm md:max-w-none">
        <div class="mb-6 md:mb-0 md:mr-8 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="#1E254C"></path>
          </svg>
        </div>
        <div class="max-w-md">
          <p class="md:text-xl text-gray-900 font-semibold">Saturn is a startup that's making the world a&nbsp;better place! We've been working on our mission since 2021</p>
        </div>
      </div>
      <a class="relative group inline-block w-full sm:w-auto py-4 px-6 mb-24 text-white font-semibold rounded-md bg-orange-900 overflow-hidden" href="#">
        <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">Meet The Expert</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.29L2.59 1.05C2.49704 0.956274 2.38644 0.881879 2.26458 0.83111C2.14272 0.780342 2.01202 0.754204 1.88 0.754204C1.74799 0.754204 1.61729 0.780342 1.49543 0.83111C1.37357 0.881879 1.26297 0.956274 1.17 1.05C0.983753 1.23736 0.879211 1.49082 0.879211 1.755C0.879211 2.01919 0.983753 2.27264 1.17 2.46L4.71 6L1.17 9.54C0.983753 9.72736 0.879211 9.98082 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.71C6.92373 6.61704 6.99813 6.50644 7.04889 6.38458C7.09966 6.26272 7.1258 6.13201 7.1258 6C7.1258 5.86799 7.09966 5.73728 7.04889 5.61543C6.99813 5.49357 6.92373 5.38297 6.83 5.29Z" fill="#FFF2EE"></path>
            </svg>
          </span>
        </div>
      </a>
    </div>
    <div class="lg:flex">
      <div class="max-w-2xl mb-20 lg:mb-0 lg:mr-32">
        <span class="block mb-6 text-sm font-semibold text-gray-500">TRUSTED BY BIG COMPANIES</span>
        <div class="flex items-center -mx-4">
          <div class="w-1/3 px-4">
            <img class="block" src="saturn-assets/logos/brands/logo-example3.png" alt="">
          </div>
          <div class="w-1/3 px-4">
            <img class="block" src="saturn-assets/logos/brands/logo-example2.png" alt="">
          </div>
          <div class="w-1/3 px-4">
            <img class="block" src="saturn-assets/logos/brands/logo-example1.png" alt="">
          </div>
        </div>
      </div>
      <div class="relative lg:-mt-20 w-full max-w-md">
        <img class="absolute top-0 left-0 w-full" src="saturn-assets/images/headers/bg-folder.svg" alt="">
        <div class="relative flex flex-col">
          <div class="xs:w-100 max-w-xs pl-5 xs:pl-10 pt-10 pr-20 xs:pr-5 z-10">
            <h3 class="text-xl font-semibold text-gray-900">We are building the future together</h3>
          </div>
          <div class="xs:w-100 max-w-md -mt-10 px-5 xs:px-10 pb-12 pt-18 bg-orange-50 rounded-b-3xl">
            <div class="flex items-center">
              <div>
                <span class="text-3xl xs:text-5xl font-semibold text-gray-900">18k+</span>
                <span class="block text-sm text-gray-500">Projects Done</span>
              </div>
              <div class="h-12 w-px mx-auto bg-orange-200"></div>
              <div>
                <span class="text-3xl xs:text-5xl font-semibold text-gray-900">20+</span>
                <span class="block text-sm text-gray-500">Awards Winning</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-md z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="relative flex flex-col py-6 px-10 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-16">
        <a class="mr-auto text-2xl font-medium leading-none" href="#">
          <img class="h-10" src="saturn-assets/logos/logo-saturn-dark.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-6 w-6 text-gray-500 cursor-pointer hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <div>
        <ul class="mb-2">
          <li><a class="block py-4 px-5 text-gray-900 hover:bg-orange-50 rounded-lg" href="#">About Us</a></li>
          <li><a class="block py-4 px-5 text-gray-900 hover:bg-orange-50 rounded-lg" href="#">Featured</a></li>
          <li><a class="block py-4 px-5 text-gray-900 hover:bg-orange-50 rounded-lg" href="#">Solutions</a></li>
          <li><a class="block py-4 px-5 text-gray-900 hover:bg-orange-50 rounded-lg" href="#">Products</a></li>
          <li><a class="block py-4 px-5 text-gray-900 hover:bg-orange-50 rounded-lg" href="#">Articles</a></li>
        </ul>
        <div class="py-8 px-6 mb-6 border-t border-b border-gray-200">
          <a class="flex items-center text-sm font-semibold text-orange-900 hover:text-orange-600" href="#">
            <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.3337 6.05833C17.2811 5.9059 17.1854 5.77202 17.0582 5.67292C16.931 5.57381 16.7777 5.51374 16.617 5.5L11.8754 4.80833L9.75038 0.499999C9.68215 0.359106 9.5756 0.240284 9.44296 0.157143C9.31031 0.074003 9.15693 0.0299072 9.00039 0.0299072C8.84384 0.0299072 8.69046 0.074003 8.55781 0.157143C8.42517 0.240284 8.31862 0.359106 8.25039 0.499999L6.12539 4.8L1.38372 5.5C1.22949 5.52192 1.08449 5.58663 0.96518 5.6868C0.845868 5.78696 0.757021 5.91856 0.708721 6.06666C0.664509 6.21139 0.660541 6.36543 0.697245 6.51224C0.733948 6.65905 0.809936 6.7931 0.917055 6.9L4.35872 10.2333L3.52539 14.9667C3.49564 15.1229 3.51121 15.2844 3.57028 15.432C3.62935 15.5797 3.72943 15.7074 3.85872 15.8C3.98474 15.8901 4.13337 15.9433 4.28793 15.9536C4.44249 15.9639 4.59686 15.9309 4.73372 15.8583L9.00039 13.6333L13.2504 15.8667C13.3673 15.9326 13.4994 15.9671 13.6337 15.9667C13.8102 15.9673 13.9824 15.9118 14.1254 15.8083C14.2547 15.7157 14.3548 15.588 14.4138 15.4404C14.4729 15.2927 14.4885 15.1312 14.4587 14.975L13.6254 10.2417L17.067 6.90833C17.1874 6.8064 17.2763 6.67242 17.3235 6.52195C17.3707 6.37149 17.3742 6.21073 17.3337 6.05833ZM12.2087 9.39166C12.111 9.48619 12.0379 9.6032 11.9957 9.73247C11.9536 9.86175 11.9438 9.99937 11.9671 10.1333L12.5671 13.625L9.43372 11.9583C9.31315 11.8941 9.17865 11.8605 9.04205 11.8605C8.90546 11.8605 8.77095 11.8941 8.65039 11.9583L5.51705 13.625L6.11705 10.1333C6.14033 9.99937 6.13048 9.86175 6.08836 9.73247C6.04623 9.6032 5.97312 9.48619 5.87539 9.39166L3.37539 6.89166L6.88372 6.38333C7.01872 6.36455 7.14705 6.31295 7.25747 6.23304C7.36789 6.15313 7.45702 6.04736 7.51705 5.925L9.00039 2.75L10.5671 5.93333C10.6271 6.0557 10.7162 6.16147 10.8266 6.24137C10.9371 6.32128 11.0654 6.37289 11.2004 6.39166L14.7087 6.9L12.2087 9.39166Z" fill="currentColor"></path>
            </svg>
            <span class="ml-3">Upgrade to Premium</span>
          </a>
        </div>
        <div class="flex px-6 mb-16 items-center"><a class="inline-block mr-9 text-sm font-semibold text-orange-900 hover:text-gray-900" href="#">Sign In</a><a class="inline-block py-3 px-4 text-sm font-semibold text-orange-900 hover:text-white border border-gray-300 hover:border-orange-600 hover:bg-orange-900 rounded-md transition duration-200" href="#">Create an account</a></div>
        <div>
          <div class="flex w-20 h-20 mb-6 items-center justify-center bg-orange-50 rounded-full">
            <svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M25.3333 16.6667C24.9797 16.6667 24.6406 16.8072 24.3905 17.0572C24.1405 17.3073 24 17.6464 24 18V23.3334C24 23.687 23.8595 24.0261 23.6095 24.2762C23.3594 24.5262 23.0203 24.6667 22.6667 24.6667H4C3.64638 24.6667 3.30724 24.5262 3.05719 24.2762C2.80714 24.0261 2.66667 23.687 2.66667 23.3334V10.5467L10.5067 18.4C11.2567 19.1491 12.2733 19.5698 13.3333 19.5698C14.3933 19.5698 15.41 19.1491 16.16 18.4L18.3467 16.2134C18.5977 15.9623 18.7388 15.6218 18.7388 15.2667C18.7388 14.9116 18.5977 14.5711 18.3467 14.32C18.0956 14.069 17.7551 13.9279 17.4 13.9279C17.0449 13.9279 16.7044 14.069 16.4533 14.32L14.2667 16.5067C14.0174 16.751 13.6823 16.8878 13.3333 16.8878C12.9843 16.8878 12.6492 16.751 12.4 16.5067L4.54667 8.66669H13.3333C13.687 8.66669 14.0261 8.52622 14.2761 8.27617C14.5262 8.02612 14.6667 7.68698 14.6667 7.33336C14.6667 6.97974 14.5262 6.6406 14.2761 6.39055C14.0261 6.1405 13.687 6.00002 13.3333 6.00002H4C2.93913 6.00002 1.92172 6.42145 1.17157 7.1716C0.421427 7.92174 0 8.93916 0 10V23.3334C0 24.3942 0.421427 25.4116 1.17157 26.1618C1.92172 26.9119 2.93913 27.3334 4 27.3334H22.6667C23.7275 27.3334 24.7449 26.9119 25.4951 26.1618C26.2452 25.4116 26.6667 24.3942 26.6667 23.3334V18C26.6667 17.6464 26.5262 17.3073 26.2761 17.0572C26.0261 16.8072 25.687 16.6667 25.3333 16.6667ZM27.6133 5.05336L23.6133 1.05336C23.4865 0.93197 23.337 0.836817 23.1733 0.773358C22.8487 0.64 22.4846 0.64 22.16 0.773358C21.9963 0.836817 21.8468 0.93197 21.72 1.05336L17.72 5.05336C17.4689 5.30443 17.3279 5.64496 17.3279 6.00002C17.3279 6.35509 17.4689 6.69562 17.72 6.94669C17.9711 7.19776 18.3116 7.33881 18.6667 7.33881C19.0217 7.33881 19.3623 7.19776 19.6133 6.94669L21.3333 5.21336V12.6667C21.3333 13.0203 21.4738 13.3595 21.7239 13.6095C21.9739 13.8595 22.313 14 22.6667 14C23.0203 14 23.3594 13.8595 23.6095 13.6095C23.8595 13.3595 24 13.0203 24 12.6667V5.21336L25.72 6.94669C25.844 7.07166 25.9914 7.17086 26.1539 7.23855C26.3164 7.30624 26.4907 7.34109 26.6667 7.34109C26.8427 7.34109 27.017 7.30624 27.1794 7.23855C27.3419 7.17086 27.4894 7.07166 27.6133 6.94669C27.7383 6.82274 27.8375 6.67527 27.9052 6.51279C27.9729 6.35032 28.0077 6.17604 28.0077 6.00002C28.0077 5.82401 27.9729 5.64973 27.9052 5.48726C27.8375 5.32478 27.7383 5.17731 27.6133 5.05336Z" fill="black"></path>
            </svg>
          </div>
          <span class="block mb-3 text-sm text-gray-500">Drop us a line</span>
          <a class="font-semibold text-black" href="#">hello@shuffle.dev</a>
        </div>
      </div>
    </nav>
  </div>
</section>

Hero section from DarkPro

Tailwind CSS

DarkPro

Dark Hero Section with Headline, CTA Buttons, and Workplace Photo

A dark-themed landing page hero with a navigation bar, a large two-line headline, supporting paragraph, primary and secondary call-to-action buttons, and a trusted-by avatar row on the left. A rounded photograph of people working at computers sits on the right, serving as a promotional visual for a software product.

<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">
            <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
                <div class="mb-6">
                    <span class="text-sm text-neutral-400 font-medium">Frequent authentication</span>
                </div>
                
                <h1 class="max-w-2xl mb-6 text-4xl md:text-5xl lg:text-6xl font-medium leading-none text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">
                    Build products that users will really love
                </h1>
                
                <p class="max-w-xl mb-10 text-lg leading-relaxed text-neutral-300">
                    Transform your workflow with our intuitive platform designed for high-performing teams. Ship faster, collaborate better, and scale with confidence of a professional.
                </p>
                
                <div class="flex flex-col sm:flex-row gap-4">
                    <a class="inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-full transition-all duration-200 hover:shadow-lg group" href="#">
                        Get Started
                        <svg class="ml-1 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </a>
                    <a class="inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-white hover:text-white border border-neutral-700 hover:border-white hover:border-opacity-50 rounded-full transition-all duration-200" href="#">
                        Watch Demo
                    </a>
                </div>
                
                <div class="flex items-center space-x-6 mt-12">
                    <div class="text-sm text-neutral-400">
                        Trusted by 50,000+ teams
                    </div>
                    <div class="flex -space-x-2">
                        <div class="w-8 h-8 rounded-full p-px border border-white border-opacity-20 -ml-2">
                            <img src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=8&amp;w=300&amp;h=300&amp;q=80" alt="" class="rounded-full">
                        </div>
                        <div class="w-8 h-8 rounded-full p-px border border-white border-opacity-20">
                            <img src="https://images.unsplash.com/photo-1595152452543-e5fc28ebc2b8?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHw2fHxmYWNlfGVufDB8Mnx8fDE3NDg4OTE1NTh8MA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080&amp;w=450" alt="" class="rounded-full">
                        </div>
                        <div class="w-8 h-8 rounded-full p-px border border-white border-opacity-20">
                            <img src="https://images.unsplash.com/photo-1519699047748-de8e457a634e?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHwxOXx8ZmFjZXxlbnwwfDJ8fHwxNzQ4ODkxNTc4fDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080&amp;w=450" alt="" class="rounded-full">
                        </div>
                        <div class="w-8 h-8 rounded-full p-px border border-white border-opacity-20">
                            <img src="https://images.unsplash.com/photo-1506464253090-7af30fe60a71?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=300&amp;h=300&amp;q=80" alt="" class="rounded-full">
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="w-full lg:w-1/2 px-4">
                <div class="relative">
                    <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-400 to-purple-800 rounded-2xl filter blur-3xl"></div>
                    <div class="p-1 border border-white border-opacity-20 rounded-2xl">
                        <img class="relative object-cover w-full rounded-xl border border-neutral-800" src="https://images.unsplash.com/photo-1524749292158-7540c2494485?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHwxM3x8Y29tcHV0ZXIlMjB3b3JrfGVufDB8fHx8MTc0ODkzNjgyOHww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080&amp;w=850" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
        <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gradient-to-br from-neutral-950 via-neutral-900 to-neutral-950 opacity-75 filter blur-3xl"></div>
        <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-neutral-900 border-r border-neutral-800 overflow-y-auto">
            <div class="flex items-center mb-12">
                <a href="#" class="mr-auto">
                    <img src="darkpro-assets/darkpro-logo.png" alt="" class="h-8">
                </a>
                <button x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg class="h-6 w-6 cursor-pointer hover:text-white text-neutral-400 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <div>
                <ul>
                    <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Product</a></li>
                    <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Solutions</a></li>
                    <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Resources</a></li>
                    <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Company</a></li>
                </ul>
            </div>
            <div class="mt-auto">
                <div class="pt-6">
                    <a class="block px-6 py-3 text-sm text-center font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-lg transition-all duration-200" href="#">Get Started</a>
                </div>
                <p class="mt-6 mb-4 text-sm text-center text-neutral-500">
                    <span>© 2025 All rights reserved.</span>
                </p>
            </div>
        </nav>
    </div>
</section>

Hero section from Flaro

Tailwind CSS

Flaro

Flaro Mentorship Hero Section with Mentor Cards

A landing page hero section for a mentoring platform, featuring a navigation bar, a bold two-line headline, a subheading, primary and secondary call-to-action buttons, and a trusted-by logo row. On the right, floating mentor profile cards with avatars, names, roles, and session prices overlay a gradient circle graphic.

<section x-data="{ mobileNavOpen: false }" class="bg-blueGray-50">
  <div class="container mx-auto overflow-hidden">
    <div class="flex items-center justify-between px-4 py-5 bg-blueGray-50">
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto mr-14">
            <a href="#">
              <img class="h-8" src="flaro-assets/logos/flaro-logo-black.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center mr-16">
              <li class="mr-9 font-medium hover:text-gray-700"><a href="#">Features</a></li>
              <li class="mr-9 font-medium hover:text-gray-700"><a href="#">Solutions</a></li>
              <li class="mr-9 font-medium hover:text-gray-700"><a href="#">Resources</a></li>
              <li class="font-medium hover:text-gray-700"><a href="#">Pricing</a></li>
            </ul>
          </div>
          <div class="w-auto hidden lg:block">
            <div class="inline-block">
              <button class="py-3 px-5 w-full text-white font-semibold border border-indigo-700 rounded-xl focus:ring focus:ring-indigo-300 bg-indigo-600 hover:bg-indigo-700 transition ease-in-out duration-200" type="button">Try 14 Days Free Trial</button>
            </div>
          </div>
          <div class="w-auto lg:hidden">
            <button x-on:click="mobileNavOpen = !mobileNavOpen">
              <svg class="text-indigo-600" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
      <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
      <nav class="relative z-10 px-9 pt-8 bg-white h-full overflow-y-auto">
        <div class="flex flex-wrap justify-between h-full">
          <div class="w-full">
            <div class="flex items-center justify-between -m-2">
              <div class="w-auto p-2">
                <a class="inline-block" href="#">
                  <img class="h-8" src="flaro-assets/logos/flaro-logo-black.svg" alt="">
                </a>
              </div>
              <div class="w-auto p-2">
                <button x-on:click="mobileNavOpen = !mobileNavOpen">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </button>
              </div>
            </div>
          </div>
          <div class="flex flex-col justify-center py-16 w-full">
            <ul>
              <li class="mb-12"><a class="font-medium hover:text-gray-700" href="#">Features</a></li>
              <li class="mb-12"><a class="font-medium hover:text-gray-700" href="#">Solutions</a></li>
              <li class="mb-12"><a class="font-medium hover:text-gray-700" href="#">Resources</a></li>
              <li><a class="font-medium hover:text-gray-700" href="#">Pricing</a></li>
            </ul>
          </div>
          <div class="flex flex-col justify-end w-full pb-8">
            <div class="flex flex-wrap">
              <div class="w-full">
                <div class="block">
                  <button class="py-3 px-5 w-full text-white font-semibold border border-indigo-700 rounded-xl focus:ring focus:ring-indigo-300 bg-indigo-600 hover:bg-indigo-700 transition ease-in-out duration-200" type="button">Try 14 Days Free Trial</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </div>
  </div>
  <div class="overflow-hidden pt-16">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="inline-block mb-6 px-2 py-1 font-semibold bg-green-100 rounded-full">
            <div class="flex flex-wrap items-center -m-1">
              <div class="w-auto p-1"><a class="text-sm" href="">👋 We are hiring! View open roles</a></div>
              <div class="w-auto p-1">
                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.66667 3.41675L12.75 7.50008M12.75 7.50008L8.66667 11.5834M12.75 7.50008L2.25 7.50008" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </div>
          </div>
          <h1 class="mb-6 text-6xl md:text-8xl lg:text-10xl font-bold font-heading md:max-w-xl leading-none">Discover mentors that helps you grow</h1>
          <p class="mb-11 text-lg text-gray-900 font-medium md:max-w-md">Get the best-in-class group mentoring plans and professional benefits for your team</p>
          <div class="flex flex-wrap -m-2.5 mb-20">
            <div class="w-full md:w-auto p-2.5">
              <div class="block">
                <button class="py-4 px-6 w-full text-white font-semibold border border-indigo-700 rounded-xl focus:ring focus:ring-indigo-300 bg-indigo-600 hover:bg-indigo-700 transition ease-in-out duration-200" type="button">Join Free for 30 Days</button>
              </div>
            </div>
            <div class="w-full md:w-auto p-2.5">
              <div class="block">
                <button class="py-4 px-9 w-full font-semibold border border-gray-300 hover:border-gray-400 rounded-xl focus:ring focus:ring-gray-50 bg-transparent hover:bg-gray-100 transition ease-in-out duration-200" type="button">
                  <div class="flex flex-wrap justify-center items-center -m-1">
                    <div class="w-auto p-1">
                      <svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M2.75 3.75C2.75 2.92157 3.42157 2.25 4.25 2.25H6.70943C7.03225 2.25 7.31886 2.45657 7.42094 2.76283L8.5443 6.13291C8.66233 6.48699 8.50203 6.87398 8.1682 7.0409L6.47525 7.88737C7.30194 9.72091 8.77909 11.1981 10.6126 12.0247L11.4591 10.3318C11.626 9.99796 12.013 9.83767 12.3671 9.9557L15.7372 11.0791C16.0434 11.1811 16.25 11.4677 16.25 11.7906V14.25C16.25 15.0784 15.5784 15.75 14.75 15.75H14C7.7868 15.75 2.75 10.7132 2.75 4.5V3.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <div class="w-auto p-1">
                      <span>Book a call</span>
                    </div>
                  </div>
                </button>
              </div>
            </div>
          </div>
          <p class="mb-6 text-sm text-gray-500 font-semibold uppercase">Trusted and loved by 100+ tech first teams</p>
          <div class="flex flex-wrap -m-4 md:pb-20">
            <div class="w-auto p-4">
              <img class="h-7" src="flaro-assets/logos/brands/brand.png" alt="">
            </div>
            <div class="w-auto p-4">
              <img class="h-7" src="flaro-assets/logos/brands/brand2.png" alt="">
            </div>
            <div class="w-auto p-4">
              <img class="h-7" src="flaro-assets/logos/brands/brand3.png" alt="">
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 p-8">
          <img class="transform hover:-translate-y-16 transition ease-in-out duration-1000" src="flaro-assets/images/headers/header.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Hero section from Gradia

Tailwind CSS

Gradia

Dark gradient hero with remote team headline and profile cards

A dark gradient hero section for a remote team management product, featuring a bold headline, two CTA buttons, a testimonial quote, and a scattered grid of team member profile cards showing names, roles, and locations on the right.

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden" style="background: url(gradia-assets/images/hero/bg.png) no-repeat; background-size: cover;">
  <section>
    <div class="flex items-center justify-between px-8 py-5">
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto mr-14"><a href="#"><img src="gradia-assets/logos/gradia-name-white.svg" alt=""></a></div>
        </div>
      </div>
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center mr-10">
              <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Features</a></li>
              <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Solutions</a></li>
              <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Resources</a></li>
              <li class="font-heading text-white hover:text-gray-200 text-lg"><a href="#" >Pricing</a></li>
            </ul>
          </div>
          <div class="w-auto hidden lg:block">
            <button class="group relative font-heading block py-2 px-5 text-lg text-white border-2 border-white overflow-hidden rounded-10">
              <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-white transition ease-in-out duration-500"></div>
              <p class="relative z-10 group-hover:text-gray-800" >Start Free Trial</p>
            </button>
          </div>
          <div class="w-auto lg:hidden">
            <button x-on:click="mobileNavOpen = !mobileNavOpen">
              <svg class="text-gray-800" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
      <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
      <nav class="relative z-10 px-9 py-8 bg-white h-full">
        <div class="flex flex-wrap justify-between h-full">
          <div class="w-full">
            <div class="flex items-center justify-between -m-2">
              <div class="w-auto p-2"><a class="inline-block" href="#"><img src="gradia-assets/logos/gradia-name-black.svg" alt=""></a></div>
              <div class="w-auto p-2">
                <button x-on:click="mobileNavOpen = !mobileNavOpen">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </button>
              </div>
            </div>
          </div>
          <div class="flex flex-col justify-center py-8 w-full">
            <ul>
              <li class="mb-12"><a class="font-heading font-medium text-lg text-gray-900 hover:text-gray-700" href="#" >Features</a></li>
              <li class="mb-12"><a class="font-heading font-medium text-lg text-gray-900 hover:text-gray-700" href="#" >Solutions</a></li>
              <li class="mb-12"><a class="font-heading font-medium text-lg text-gray-900 hover:text-gray-700" href="#" >Resources</a></li>
              <li><a class="font-heading font-medium text-lg text-gray-900 hover:text-gray-700" href="#" >Pricing</a></li>
            </ul>
          </div>
          <div class="flex flex-col justify-end w-full">
            <div class="flex flex-wrap">
              <div class="w-full">
                <button class="p-0.5 font-heading block w-full text-lg text-gray-900 font-medium rounded-10">
                  <div class="py-2 px-5 rounded-10">
                    <p >Login</p>
                  </div>
                </button>
              </div>
              <div class="w-full">
                <button class="group relative p-0.5 font-heading block w-full text-lg text-gray-900 font-medium bg-gradient-cyan overflow-hidden rounded-10">
                  <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-gradient-cyan transition ease-in-out duration-500"></div>
                  <div class="py-2 px-5 bg-white rounded-lg">
                    <p class="relative z-10" >Start Free Trial</p>
                  </div>
                </button>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </div>
  </section>
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap justify-between -m-6 pt-32 pb-40">
      <div class="w-full lg:w-5/12 xl:w-1/2 p-6">
        <p class="mb-5 font-heading text-gray-400 font-medium text-xl" >Grow fast, get things done with ease</p>
        <h1 class="mb-14 font-heading text-7xl md:text-9xl xl:text-11xl text-white font-bold" >Manage remote team, anywhere, anytime.</h1>
        <div class="flex flex-wrap -m-3 mb-20">
          <div class="w-full lg:w-auto p-3">
            <button class="font-heading w-full px-6 py-4 text-base text-gray-900 bg-white hover:bg-gray-100 rounded-md" >Start 14 Days Free Trial</button>
          </div>
          <div class="w-full lg:w-auto p-3">
            <button class="font-heading w-full px-6 py-4 text-base text-white bg-transparent border border-gray-500 hover:border-gray-600 rounded-md" >How it works</button>
          </div>
        </div>
        <div class="lg:max-w-md">
          <div class="flex flex-wrap -m-3">
            <div class="w-auto p-3"><img class="w-14 h-14" src="gradia-assets/images/hero/avatar-man.png" alt=""></div>
            <div class="flex-1 p-3">
              <p class="mb-4 text-gray-300 text-base" >
                “You made it so simple. My new team is so much faster and easier to work with than my old site.
                I just choose the page, make the change.”
              </p>
              <p class="font-heading text-white text-base" >Denny Jones, founder of Growthio</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-7/12 xl:w-1/2 p-6">
        <div class="max-w-max mx-auto">
          <div class="flex flex-wrap justify-center -m-3 mb-3">
            <div class="w-full p-3">
              <div class="mx-auto w-64 p-3 bg-white transform hover:-translate-y-3 transition ease-out duration-1000 rounded-2xl">
                <div class="flex flex-wrap -m-2">
                  <div class="w-auto p-2"><img src="gradia-assets/images/hero/avatar-circle.png" alt=""></div>
                  <div class="w-auto p-2">
                    <p class="font-heading text-base text-gray-900" >Albert Flores</p>
                    <p class="mb-2 text-sm text-gray-500" >Software Engineer</p>
                    <div class="flex items-center px-2 py-1 bg-gray-100 rounded-full">
                      <svg class="mr-1" width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9.56413 9.02246C9.19416 9.39243 8.5298 10.0568 7.91404 10.6726C7.13299 11.4536 5.867 11.4536 5.08595 10.6725C4.4823 10.0689 3.82786 9.41446 3.43587 9.02246C1.7436 7.33019 1.7436 4.58648 3.43587 2.8942C5.12814 1.20193 7.87185 1.20193 9.56413 2.8942C11.2564 4.58648 11.2564 7.33019 9.56413 9.02246Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M8.125 5.95833C8.125 6.8558 7.39746 7.58333 6.5 7.58333C5.60253 7.58333 4.875 6.8558 4.875 5.95833C4.875 5.06087 5.60253 4.33333 6.5 4.33333C7.39746 4.33333 8.125 5.06087 8.125 5.95833Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                      <p class="text-xs text-gray-700 font-medium" >Wyoming, USA</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex flex-wrap justify-center max-w-max -m-3 mb-3">
            <div class="w-full sm:w-1/2 p-3">
              <div class="mx-auto w-64 p-3 bg-white transform hover:-translate-y-3 transition ease-out duration-1000 rounded-2xl">
                <div class="flex flex-wrap -m-2">
                  <div class="w-auto p-2"><img src="gradia-assets/images/hero/avatar-circle2.png" alt=""></div>
                  <div class="w-auto p-2">
                    <p class="font-heading text-base text-gray-900" >Darlene Robertson</p>
                    <p class="mb-2 text-sm text-gray-500" >Software Tester</p>
                    <div class="flex items-center px-2 py-1 bg-gray-100 rounded-full">
                      <svg class="mr-1" width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9.56413 9.02246C9.19416 9.39243 8.5298 10.0568 7.91404 10.6726C7.13299 11.4536 5.867 11.4536 5.08595 10.6725C4.4823 10.0689 3.82786 9.41446 3.43587 9.02246C1.7436 7.33019 1.7436 4.58648 3.43587 2.8942C5.12814 1.20193 7.87185 1.20193 9.56413 2.8942C11.2564 4.58648 11.2564 7.33019 9.56413 9.02246Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M8.125 5.95833C8.125 6.8558 7.39746 7.58333 6.5 7.58333C5.60253 7.58333 4.875 6.8558 4.875 5.95833C4.875 5.06087 5.60253 4.33333 6.5 4.33333C7.39746 4.33333 8.125 5.06087 8.125 5.95833Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                      <p class="text-xs text-gray-700 font-medium" >New York, USA</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-full sm:w-1/2 p-3">
              <div class="mx-auto w-64 p-3 bg-white transform hover:-translate-y-3 transition ease-out duration-1000 rounded-2xl">
                <div class="flex flex-wrap -m-2">
                  <div class="w-auto p-2"><img src="gradia-assets/images/hero/avatar-circle3.png" alt=""></div>
                  <div class="w-auto p-2">
                    <p class="font-heading text-base text-gray-900" >Kristin Watson</p>
                    <p class="mb-2 text-sm text-gray-500" >Project Manager</p>
                    <div class="flex items-center px-2 py-1 bg-gray-100 rounded-full">
                      <svg class="mr-1" width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9.56413 9.02246C9.19416 9.39243 8.5298 10.0568 7.91404 10.6726C7.13299 11.4536 5.867 11.4536 5.08595 10.6725C4.4823 10.0689 3.82786 9.41446 3.43587 9.02246C1.7436 7.33019 1.7436 4.58648 3.43587 2.8942C5.12814 1.20193 7.87185 1.20193 9.56413 2.8942C11.2564 4.58648 11.2564 7.33019 9.56413 9.02246Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M8.125 5.95833C8.125 6.8558 7.39746 7.58333 6.5 7.58333C5.60253 7.58333 4.875 6.8558 4.875 5.95833C4.875 5.06087 5.60253 4.33333 6.5 4.33333C7.39746 4.33333 8.125 5.06087 8.125 5.95833Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                      <p class="text-xs text-gray-700 font-medium" >Pennsylvania, USA</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex flex-wrap justify-center max-w-max -m-3 mb-3 xl:-ml-20">
            <div class="w-full sm:w-1/2 p-3">
              <div class="mx-auto w-64 p-3 bg-white transform hover:-translate-y-3 transition ease-out duration-1000 rounded-2xl">
                <div class="flex flex-wrap -m-2">
                  <div class="w-auto p-2"><img src="gradia-assets/images/hero/avatar-circle4.png" alt=""></div>
                  <div class="w-auto p-2">
                    <p class="font-heading text-base text-gray-900" >Guy Hawkins</p>
                    <p class="mb-2 text-sm text-gray-500" >Scrum Master</p>
                    <div class="flex items-center px-2 py-1 bg-gray-100 rounded-full">
                      <svg class="mr-1" width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9.56413 9.02246C9.19416 9.39243 8.5298 10.0568 7.91404 10.6726C7.13299 11.4536 5.867 11.4536 5.08595 10.6725C4.4823 10.0689 3.82786 9.41446 3.43587 9.02246C1.7436 7.33019 1.7436 4.58648 3.43587 2.8942C5.12814 1.20193 7.87185 1.20193 9.56413 2.8942C11.2564 4.58648 11.2564 7.33019 9.56413 9.02246Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M8.125 5.95833C8.125 6.8558 7.39746 7.58333 6.5 7.58333C5.60253 7.58333 4.875 6.8558 4.875 5.95833C4.875 5.06087 5.60253 4.33333 6.5 4.33333C7.39746 4.33333 8.125 5.06087 8.125 5.95833Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                      <p class="text-xs text-gray-700 font-medium" >North Carolina, USA</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-full sm:w-1/2 p-3">
              <div class="mx-auto w-64 p-3 bg-white transform hover:-translate-y-3 transition ease-out duration-1000 rounded-2xl">
                <div class="flex flex-wrap -m-2">
                  <div class="w-auto p-2"><img src="gradia-assets/images/hero/avatar-circle5.png" alt=""></div>
                  <div class="w-auto p-2">
                    <p class="font-heading text-base text-gray-900" >Annette Black</p>
                    <p class="mb-2 text-sm text-gray-500" >Software Engineer</p>
                    <div class="flex items-center px-2 py-1 bg-gray-100 rounded-full">
                      <svg class="mr-1" width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9.56413 9.02246C9.19416 9.39243 8.5298 10.0568 7.91404 10.6726C7.13299 11.4536 5.867 11.4536 5.08595 10.6725C4.4823 10.0689 3.82786 9.41446 3.43587 9.02246C1.7436 7.33019 1.7436 4.58648 3.43587 2.8942C5.12814 1.20193 7.87185 1.20193 9.56413 2.8942C11.2564 4.58648 11.2564 7.33019 9.56413 9.02246Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M8.125 5.95833C8.125 6.8558 7.39746 7.58333 6.5 7.58333C5.60253 7.58333 4.875 6.8558 4.875 5.95833C4.875 5.06087 5.60253 4.33333 6.5 4.33333C7.39746 4.33333 8.125 5.06087 8.125 5.95833Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                      <p class="text-xs text-gray-700 font-medium" >North Dakota, USA</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex flex-wrap justify-center max-w-max -m-3">
            <div class="w-full sm:w-1/2 p-3">
              <div class="mx-auto w-64 p-3 bg-white transform hover:-translate-y-3 transition ease-out duration-1000 rounded-2xl">
                <div class="flex flex-wrap -m-2">
                  <div class="w-auto p-2"><img src="gradia-assets/images/hero/avatar-circle.png" alt=""></div>
                  <div class="w-auto p-2">
                    <p class="font-heading text-base text-gray-900" >Robert Fox</p>
                    <p class="mb-2 text-sm text-gray-500" >UI/UX Designer</p>
                    <div class="flex items-center px-2 py-1 bg-gray-100 rounded-full">
                      <svg class="mr-1" width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9.56413 9.02246C9.19416 9.39243 8.5298 10.0568 7.91404 10.6726C7.13299 11.4536 5.867 11.4536 5.08595 10.6725C4.4823 10.0689 3.82786 9.41446 3.43587 9.02246C1.7436 7.33019 1.7436 4.58648 3.43587 2.8942C5.12814 1.20193 7.87185 1.20193 9.56413 2.8942C11.2564 4.58648 11.2564 7.33019 9.56413 9.02246Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M8.125 5.95833C8.125 6.8558 7.39746 7.58333 6.5 7.58333C5.60253 7.58333 4.875 6.8558 4.875 5.95833C4.875 5.06087 5.60253 4.33333 6.5 4.33333C7.39746 4.33333 8.125 5.06087 8.125 5.95833Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                      <p class="text-xs text-gray-700 font-medium" >Maine, USA</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-full sm:w-1/2 p-3">
              <div class="mx-auto w-64 p-3 bg-white transform hover:-translate-y-3 transition ease-out duration-1000 rounded-2xl">
                <div class="flex flex-wrap -m-2">
                  <div class="w-auto p-2"><img src="gradia-assets/images/hero/avatar-circle2.png" alt=""></div>
                  <div class="w-auto p-2">
                    <p class="font-heading text-base text-gray-900" >Cody Fisher</p>
                    <p class="mb-2 text-sm text-gray-500" >Ethical Hacker</p>
                    <div class="flex items-center px-2 py-1 bg-gray-100 rounded-full">
                      <svg class="mr-1" width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9.56413 9.02246C9.19416 9.39243 8.5298 10.0568 7.91404 10.6726C7.13299 11.4536 5.867 11.4536 5.08595 10.6725C4.4823 10.0689 3.82786 9.41446 3.43587 9.02246C1.7436 7.33019 1.7436 4.58648 3.43587 2.8942C5.12814 1.20193 7.87185 1.20193 9.56413 2.8942C11.2564 4.58648 11.2564 7.33019 9.56413 9.02246Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M8.125 5.95833C8.125 6.8558 7.39746 7.58333 6.5 7.58333C5.60253 7.58333 4.875 6.8558 4.875 5.95833C4.875 5.06087 5.60253 4.33333 6.5 4.33333C7.39746 4.33333 8.125 5.06087 8.125 5.95833Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                      <p class="text-xs text-gray-700 font-medium" >Alaska, USA</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Hero section from Solstice

Tailwind CSS

Solstice

Hero Section with Navigation and Feature Preview Cards for Learning Community

A landing page hero with a top navigation bar, a centered bold headline 'Unlock collective knowledge', supporting text, and an orange call-to-action button, followed by three illustrative UI preview cards showing a note, a Pomodoro timer, and a todo list with avatars.

<section class="overflow-hidden pb-24" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between py-6">
      <div class="flex items-center gap-6">
        <div class="pr-6 border-r-2 border-transparent lg:border-gray-200">
          <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
              <rect width="32" height="32" rx="8" fill="#282828"></rect>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M28 14L28 9C28 8.44772 27.5523 8 27 8L24 8C23.4477 8 23 8.44772 23 9L23 13C23 16.3137 20.3137 19 17 19L13 19C12.4477 19 12 19.4477 12 20L12 23C12 23.5523 12.4477 24 13 24L18 24C23.5228 24 28 19.5228 28 14Z" fill="white"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M4 18L4 23C4 23.5523 4.44772 24 5 24L8 24C8.55228 24 9 23.5523 9 23L9 19C9 15.6863 11.6863 13 15 13L19 13C19.5523 13 20 12.5523 20 12L20 9C20 8.44771 19.5523 8 19 8L14 8C8.47715 8 4 12.4772 4 18Z" fill="white"></path>
            </svg>
          </a>
        </div>
        <ul class="hidden lg:flex items-center gap-8">
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="group-hover:text-opacity-70 transition duration-200">Platform</span>
              <div class="group-hover:text-opacity-70 transition duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </li>
          <li class="hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
          <li class="hover:text-opacity-70 transition duration-200"><a href="#">Community</a></li>
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="group-hover:text-opacity-70 transition duration-200">Resources</span>
              <div class="group-hover:text-opacity-70 transition duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <a class="hidden lg:inline-block py-3 px-5 rounded-full bg-purple-900 border border-purple-700 shadow text-sm font-semibold text-white hover:bg-purple-800 focus:ring focus:ring-purple-800 transition duration-200" href="#">Get Started</a>
      <div class="lg:hidden">
        <a x-on:click.prevent="mobileNavOpen = !mobileNavOpen" href="#">
          <svg class="text-orange-500" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="56" height="56" rx="28" fill="currentColor"></rect>
            <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
    </div>
    <div :class="{ 'hidden': !mobileNavOpen, 'block': mobileNavOpen }" class="hidden navbar-menu fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
      <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
      <nav class="relative z-10 px-9 py-8 h-full overflow-y-auto bg-white flex flex-col justify-between">
        <div class="flex items-center justify-between">
          <a href="#">
            <img src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
          </a>
          <a x-on:click.prevent="mobileNavOpen = !mobileNavOpen" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
        <ul class="flex flex-col gap-12 py-12">
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="group-hover:text-opacity-70 transition duration-200">Platform</span>
              <div class="group-hover:text-opacity-70 transition duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </li>
          <li class="hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
          <li class="hover:text-opacity-70 transition duration-200"><a href="#">Community</a></li>
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="group-hover:text-opacity-70 transition duration-200">Resources</span>
              <div class="group-hover:text-opacity-70 transition duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </li>
        </ul>
        <a class="block text-center py-3 px-5 rounded-full bg-white border border-gray-200 shadow text-sm font-semibold hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Get Started</a>
      </nav>
    </div>
    <h1 class="mt-12 mb-6 text-center text-5xl lg:text-7xl font-bold font-heading max-w-2xl mx-auto">Unlock collective knowledge</h1>
    <p class="text-gray-600 text-lg text-center mb-10 max-w-xl mx-auto">Fuel your curiosity, expand your horizons, and achieve greatness by joining a vibrant community of learners.</p>
    <div class="flex justify-center mb-24"><a class="w-full sm:w-auto text-center h-16 inline-flex items-center justify-center py-4 px-6 rounded-full bg-orange-500 border border-orange-600 shadow font-bold font-heading text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">Study Together Now</a></div>
    <div class="flex flex-wrap">
      <div class="w-full lg:w-1/3 p-4">
        <img class="mx-auto h-full" src="solstice-assets/images/hero/summary-tile-secondary.png" alt="">
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <img class="mx-auto h-full" src="solstice-assets/images/hero/timer-tile-primary.png" alt="">
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <img class="mx-auto h-full" src="solstice-assets/images/hero/todos-tile-primary2.png" alt="">
      </div>
    </div>
  </div>
</section>

Hero section from Basko

Tailwind CSS

Basko

Dark Hero Section with Headline, CTAs, and Dashboard Preview for Brand Tool

A dark marketing hero section for the Basko brand-building tool, featuring a navigation bar, a serif headline, primary and secondary call-to-action buttons, social proof avatars, and a framed dashboard screenshot on a gradient border. The two-column layout places text on the left and the illustrative app preview on the right.

<section class="overflow-hidden" x-data="{ mobileNavOpen: false }">
  <div class="bg-black">
    <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 pr-2">
              <a href="#">
                <img src="basko-assets/logos/basko-logo-light.png" alt="">
              </a>
            </div>
          </div>
        </div>
        <div class="w-auto">
          <div class="flex flex-wrap items-center">
            <div class="w-auto hidden lg:block">
              <ul class="flex items-center mr-8">
                <li class="mr-14 font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Features</a></li>
                <li class="mr-14 font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Pricing</a></li>
                <li class="mr-8 font-medium text-white hover:text-gray-200 tracking-tight border-r border-gray-700 pr-8"><a href="#">Automation</a></li>
                <li class="font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Customer Login</a></li>
              </ul>
            </div>
            <div class="w-auto hidden lg:block">
              <div class="inline-block"><a class="inline-block px-5 py-3 text-white font-semibold text-center tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a></div>
            </div>
            <div class="w-auto lg:hidden">
              <button x-on:click="mobileNavOpen = !mobileNavOpen">
                <svg class="text-indigo-600" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                  <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
      <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
      <nav class="relative z-10 px-9 pt-8 bg-black h-full overflow-y-auto">
        <div class="flex flex-wrap justify-between h-full">
          <div class="w-full">
            <div class="flex items-center justify-between -m-2">
              <div class="w-auto p-2">
                <a class="inline-block" href="#">
                  <img src="basko-assets/logos/basko-logo-light.png" alt="">
                </a>
              </div>
              <div class="w-auto p-2">
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="text-white">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </button>
              </div>
            </div>
          </div>
          <div class="flex flex-col justify-center py-16 w-full">
            <ul>
              <li class="mb-12 font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Features</a></li>
              <li class="mb-12 font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Pricing</a></li>
              <li class="mb-12 font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Automation</a></li>
              <li class="font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Customer Login</a></li>
            </ul>
          </div>
          <div class="flex flex-col justify-end w-full pb-8"><a class="inline-block px-5 py-3 text-white font-semibold text-center tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a></div>
        </div>
      </nav>
    </div>
  </div>
  <div class="pt-16 lg:pt-32 pb-24 lg:pb-52 bg-black overflow-hidden">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="md:max-w-lg">
            <span class="inline-block mb-8 px-3 py-1 text-white font-semibold bg-gray-600 rounded-full">#1 Brand Building Tool</span>
            <h1 class="font-heading mb-12 text-6xl md:text-7xl text-white tracking-tighter">Boost brand's visibility and reach fast.</h1>
            <div class="flex flex-wrap -m-2 mb-14">
              <div class="w-auto p-2"><a class="inline-block px-5 py-4 text-white font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-400 transition duration-200" href="#">Try 14 Days Free Trial</a></div>
              <div class="w-auto p-2">
                <a class="inline-flex items-center px-5 py-4 bg-transparent hover:bg-indigo-600 border border-gray-600 hover:border-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">
                  <div class="inline-block">
                    <svg class="mr-2.5" width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3 12.5L3 13.25C3 14.4926 4.00736 15.5 5.25 15.5L12.75 15.5C13.9926 15.5 15 14.4926 15 13.25L15 12.5M12 9.5L9 12.5M9 12.5L6 9.5M9 12.5L9 3.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <span class="text-white font-semibold tracking-tight">Download IOS App</span>
                </a>
              </div>
            </div>
            <div class="max-w-md">
              <div class="flex flex-wrap -m-1.5">
                <div class="w-auto p-1.5">
                  <div class="flex flex-wrap">
                    <div class="w-auto">
                      <img src="basko-assets/images/headers/avatar.png" alt="">
                    </div>
                    <div class="w-auto -ml-5">
                      <img src="basko-assets/images/headers/avatar2.png" alt="">
                    </div>
                    <div class="w-auto -ml-5">
                      <img src="basko-assets/images/headers/avatar3.png" alt="">
                    </div>
                  </div>
                </div>
                <div class="flex-1 p-1.5">
                  <p class="text-white tracking-tight">Join other 12k+ Marketers and start building brands reputation now.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 p-8">
          <img class="transform hover:-translate-y-2 transition duration-500" src="basko-assets/images/headers/dashboard.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Hero section from Zanrly

Tailwind CSS

Zanrly

Split-screen hero with tablet photo and headline

A hero section with a navigation bar at top, a tablet photograph on the left, and a centered headline, supporting paragraph, and two call-to-action buttons on the right. The light background and split two-column layout distinguish it as a marketing introduction for a product.

<section class="pt-6 pb-20 bg-gray-50 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <div class="container mx-auto px-4">
    <div class="mb-6">
      <div class="flex items-center justify-between px-6 py-3.5 bg-white border border-gray-100 rounded-full">
        <div class="w-auto">
          <div class="flex flex-wrap items-center">
            <div class="w-auto">
              <a href="#">
                <img src="zanrly-assets/logos/zanrly-logo.svg" alt="">
              </a>
            </div>
          </div>
        </div>
        <div class="w-auto">
          <div class="flex flex-wrap items-center">
            <div class="w-auto hidden lg:block">
              <ul class="flex items-center justify-center">
                <li class="mr-9"><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Features</a></li>
                <li class="mr-9"><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Solutions</a></li>
                <li class="mr-9"><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Resources</a></li>
                <li><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Pricing</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="w-auto">
          <div class="flex flex-wrap items-center">
            <div class="w-auto hidden lg:block">
              <div class="flex flex-wrap -m-2">
                <div class="w-full md:w-auto p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-gray-900 font-bold bg-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 border rounded-full" href="#">Log In</a></div>
                <div class="w-full md:w-auto p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Get Started</a></div>
              </div>
            </div>
            <div class="w-auto lg:hidden">
              <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-block">
                <svg class="text-blue-500" width="45" height="45" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                  <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
        <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
        <nav class="relative z-10 px-9 pt-8 bg-white h-full overflow-y-auto">
          <div class="flex flex-wrap justify-between h-full">
            <div class="w-full">
              <div class="flex items-center justify-between -m-2">
                <div class="w-auto p-2">
                  <a class="inline-block" href="#">
                    <img src="zanrly-assets/logos/zanrly-logo.svg" alt="">
                  </a>
                </div>
                <div class="w-auto p-2">
                  <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-block">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
            <div class="flex flex-col justify-center py-8 w-full">
              <ul>
                <li class="mb-9"><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Features</a></li>
                <li class="mb-9"><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Solutions</a></li>
                <li class="mb-9"><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Resources</a></li>
                <li><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Pricing</a></li>
              </ul>
            </div>
            <div class="flex flex-col justify-end w-full pb-8">
              <div class="flex flex-wrap -m-2">
                <div class="w-full p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-gray-900 font-bold bg-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 border rounded-full" href="#">Log In</a></div>
                <div class="w-full p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Get Started</a></div>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </div>
    <div class="flex flex-wrap justify-center -m-4">
      <div class="w-full md:w-1/3 p-4">
        <img class="w-full object-cover rounded-3xl" style="height: 640px;" src="zanrly-assets/images/headers/device.png" alt="">
      </div>
      <div class="w-full md:flex-1 p-4">
        <div class="relative flex flex-col justify-center items-center p-8 h-full text-center bg-white overflow-hidden rounded-3xl">
          <div class="absolute bottom-0 left-1/2 min-w-max transform -translate-x-1/2">
            <div class="absolute bg-gradient-radial-white w-full h-full"></div>
            <img src="zanrly-assets/images/headers/pattern-grid-gray.svg" alt="">
          </div>
          <div class="relative max-w-lg">
            <span class="inline-block mb-3 text-sm text-blue-500 font-bold uppercase tracking-widest">Best caption here</span>
            <h1 class="font-heading mb-6 text-5xl text-gray-900 font-black tracking-tight">
              <span>Build better products</span>
              <span class="text-blue-500">faster</span>
              <span>than ever.</span>
            </h1>
            <p class="mb-8 text-xl font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis volutpat velit, quis iaculis velit bibendum a. Maecenas accumsan fermentum nisl.</p>
            <div class="flex flex-wrap justify-center -m-2">
              <div class="w-full md:w-auto p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Get Started</a></div>
              <div class="w-full md:w-auto p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-gray-900 font-bold bg-gray-50 hover:bg-gray-200 focus:ring-4 focus:ring-gray-200 rounded-full" href="#">Watch Video</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Hero section from Nightsable

Tailwind CSS

Nightsable

Dark Hero Section with Credit Card Promo for Nightsable Card

A dark full-width hero section with a top navigation bar, a large left-aligned headline about credit history, short supporting text, and a lime call-to-action button. A decorative gradient credit card illustration sits on the right side as an illustrative visual.

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

Hero section from Zeus

Tailwind CSS

Zeus

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

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

<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">
        <span class="font-semibold text-xs text-blue-400">What's new at Shuffle</span>
        <h2 class="mt-8 mb-6 lg:mb-12 text-4xl lg:text-5xl font-semibold font-heading">Take care of your performance every day.</h2>
        <div class="max-w-lg mb-6 lg:mb-12">
          <p class="text-xl text-gray-500">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
        <div class="flex flex-wrap"><a class="inline-block px-6 py-4 mb-3 mr-4 text-sm font-medium leading-normal bg-red-400 hover:bg-red-300 text-white rounded transition duration-200" href="#">Track your performance</a><a class="inline-block px-6 py-4 mb-3 text-sm font-medium leading-normal hover:text-gray-700 rounded border" href="#">Learn More</a></div>
      </div>
      <div class="relative w-full md:w-1/2 px-4">
        <img class="hidden lg:block lg:absolute top-0 right-0 z-10 lg:mt-28" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
        <img class="relative" src="zeus-assets/images/z-picture.png" alt="">
        <img class="hidden lg:block lg:absolute bottom-0 lg:left-0 lg:ml-6 lg:mb-20" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
      </div>
    </div>
  </div>
  <div :class="{ 'block': mobileNavOpen, 'hidden': !mobileNavOpen }" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-8">
        <a class="mr-auto text-lg font-semibold leading-none" href="#">
          <img class="h-7" src="zeus-assets/logo/logo-zeus-red.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-6 w-6 text-gray-500 cursor-pointer hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <div>
        <ul>
          <li class="mb-1"><a class="block p-4 text-sm font-medium text-gray-900 hover:bg-gray-50 rounded" href="#">About</a></li>
          <li class="mb-1"><a class="block p-4 text-sm font-medium text-gray-900 hover:bg-gray-50 rounded" href="#">Company</a></li>
          <li class="mb-1"><a class="block p-4 text-sm font-medium text-gray-900 hover:bg-gray-50 rounded" href="#">Services</a></li>
          <li class="mb-1"><a class="block p-4 text-sm font-medium text-gray-900 hover:bg-gray-50 rounded" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="mt-auto">
        <div class="pt-6"><a class="block py-3 text-center text-sm leading-normal bg-red-50 hover:bg-red-100 text-red-300 font-semibold rounded transition duration-200" href="#">Contact Us</a></div>
        <p class="mt-6 mb-4 text-sm text-center text-gray-500">
          <span>© 2021 All rights reserved.</span>
        </p>
      </div>
    </nav>
  </div>
</section>

Hero section from Artemis Dashboard

Tailwind CSS

Artemis Dashboard

Product Analysis Dashboard Page Header with Action Buttons

A horizontal page header for a dashboard showing a blue icon tile, bold title, muted subtitle, and three action buttons on the right: Download, Settings, and Report. The light background and simple row layout make it a compact header bar for an application dashboard view.

<section class="py-8 px-6">
  <div class="flex flex-wrap -mx-3 items-center">
    <div class="w-full lg:w-1/2 flex items-center mb-5 lg:mb-0 px-3">
      <span class="inline-flex justify-center items-center w-16 h-16 mr-4 bg-indigo-500 rounded">
        <svg class="h-7 w-7 text-white" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M23.4506 4.60603C23.4408 4.59562 23.4379 4.58178 23.4277 4.5716C23.4175 4.56143 23.4034 4.55834 23.393 4.5485C20.899 2.06256 17.5213 0.666656 14 0.666656C10.4787 0.666656 7.10093 2.06256 4.60698 4.5485C4.59649 4.55834 4.58249 4.56135 4.57223 4.5716C4.56198 4.58186 4.55913 4.5956 4.54937 4.60603C2.69104 6.47326 1.42749 8.84913 0.918186 11.4338C0.408879 14.0185 0.676641 16.6961 1.68768 19.1287C2.69872 21.5614 4.40772 23.64 6.59899 25.1022C8.79026 26.5645 11.3656 27.3449 14 27.3449C16.6343 27.3449 19.2097 26.5645 21.4009 25.1022C23.5922 23.64 25.3012 21.5614 26.3123 19.1287C27.3233 16.6961 27.5911 14.0185 27.0817 11.4338C26.5724 8.84913 25.3089 6.47326 23.4506 4.60603V4.60603ZM13.9999 24.6667C12.4029 24.6661 10.8265 24.3063 9.38745 23.6139C7.94839 22.9215 6.68353 21.9142 5.68657 20.6667H11.0403C11.411 21.0858 11.8666 21.4214 12.3768 21.6513C12.8871 21.8811 13.4403 22 13.9999 22C14.5595 22 15.1127 21.8811 15.623 21.6513C16.1332 21.4214 16.5888 21.0858 16.9595 20.6667H22.3133C21.3163 21.9142 20.0515 22.9215 18.6124 23.6139C17.1733 24.3063 15.5969 24.6661 13.9999 24.6667V24.6667ZM12.6666 18C12.6666 17.7363 12.7448 17.4785 12.8913 17.2592C13.0378 17.04 13.246 16.8691 13.4897 16.7681C13.7333 16.6672 14.0014 16.6408 14.26 16.6923C14.5187 16.7437 14.7562 16.8707 14.9427 17.0572C15.1292 17.2437 15.2562 17.4812 15.3076 17.7399C15.3591 17.9985 15.3327 18.2666 15.2317 18.5102C15.1308 18.7539 14.9599 18.9621 14.7407 19.1086C14.5214 19.2551 14.2636 19.3333 13.9999 19.3333C13.6464 19.333 13.3075 19.1924 13.0575 18.9424C12.8075 18.6924 12.6669 18.3535 12.6666 18V18ZM23.8802 18.0028L23.8664 18H17.9999C17.9974 17.1755 17.7397 16.372 17.2622 15.6998C16.7847 15.0275 16.1109 14.5196 15.3332 14.2457V9.99999C15.3332 9.64637 15.1928 9.30723 14.9427 9.05718C14.6927 8.80713 14.3535 8.66666 13.9999 8.66666C13.6463 8.66666 13.3071 8.80713 13.0571 9.05718C12.807 9.30723 12.6666 9.64637 12.6666 9.99999V14.2457C11.8889 14.5196 11.2151 15.0275 10.7376 15.6998C10.2601 16.372 10.0024 17.1755 9.9999 18H4.13337L4.11961 18.0028C3.7728 17.1471 3.53956 16.2496 3.42585 15.3333H4.66657C5.02019 15.3333 5.35933 15.1928 5.60937 14.9428C5.85942 14.6927 5.9999 14.3536 5.9999 14C5.9999 13.6464 5.85942 13.3072 5.60937 13.0572C5.35933 12.8071 5.02019 12.6667 4.66657 12.6667H3.42585C3.6641 10.7714 4.40997 8.97575 5.58462 7.46947L6.45758 8.34244C6.58138 8.46624 6.72835 8.56444 6.8901 8.63144C7.05185 8.69844 7.22521 8.73292 7.40029 8.73292C7.57537 8.73292 7.74873 8.69844 7.91048 8.63144C8.07223 8.56444 8.2192 8.46623 8.343 8.34244C8.4668 8.21864 8.565 8.07167 8.632 7.90992C8.699 7.74817 8.73348 7.5748 8.73348 7.39972C8.73348 7.22465 8.69899 7.05128 8.63199 6.88953C8.56499 6.72778 8.46679 6.58081 8.34299 6.45702L7.47011 5.58414C8.97629 4.40987 10.7717 3.66421 12.6666 3.42594V4.66666C12.6666 5.02028 12.807 5.35942 13.0571 5.60946C13.3071 5.85951 13.6463 5.99999 13.9999 5.99999C14.3535 5.99999 14.6927 5.85951 14.9427 5.60946C15.1928 5.35942 15.3332 5.02028 15.3332 4.66666V3.42594C17.2281 3.66421 19.0235 4.40987 20.5297 5.58414L19.6568 6.45702C19.4068 6.70704 19.2663 7.04614 19.2663 7.39972C19.2663 7.75331 19.4068 8.09241 19.6568 8.34244C19.9068 8.59246 20.2459 8.73292 20.5995 8.73292C20.9531 8.73292 21.2922 8.59246 21.5422 8.34244L22.4152 7.46947C23.5898 8.97575 24.3357 10.7714 24.574 12.6667H23.3332C22.9796 12.6667 22.6405 12.8071 22.3904 13.0572C22.1404 13.3072 21.9999 13.6464 21.9999 14C21.9999 14.3536 22.1404 14.6927 22.3904 14.9428C22.6405 15.1928 22.9796 15.3333 23.3332 15.3333H24.574C24.4602 16.2496 24.227 17.1471 23.8802 18.0028V18.0028Z" fill="currentColor"></path>
        </svg>
      </span>
      <div>
        <h2 class="mb-1 text-2xl font-bold">Product Analysis Dashboard</h2>
        <p class="text-sm text-gray-500 font-medium">Take care of your business. Achieve your goals and increase profits.</p>
      </div>
    </div>
    <div class="w-full lg:w-auto ml-auto px-3">
      <a class="inline-flex items-center py-2 px-3 mr-3 text-xs text-indigo-500 font-medium bg-white hover:bg-indigo-50 rounded" href="#">
        <span class="inline-block mr-1">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 9.33334C13.6 9.33334 13.3333 9.60001 13.3333 10V12.6667C13.3333 13.0667 13.0667 13.3333 12.6667 13.3333H3.33334C2.93334 13.3333 2.66668 13.0667 2.66668 12.6667V10C2.66668 9.60001 2.40001 9.33334 2.00001 9.33334C1.60001 9.33334 1.33334 9.60001 1.33334 10V12.6667C1.33334 13.8 2.20001 14.6667 3.33334 14.6667H12.6667C13.8 14.6667 14.6667 13.8 14.6667 12.6667V10C14.6667 9.60001 14.4 9.33334 14 9.33334ZM5.80001 5.13334L7.33334 3.60001V10C7.33334 10.4 7.60001 10.6667 8.00001 10.6667C8.40001 10.6667 8.66668 10.4 8.66668 10V3.60001L10.2 5.13334C10.4667 5.40001 10.8667 5.40001 11.1333 5.13334C11.4 4.86668 11.4 4.46668 11.1333 4.20001L8.46668 1.53334C8.20001 1.26668 7.80001 1.26668 7.53334 1.53334L4.86668 4.20001C4.60001 4.46668 4.60001 4.86668 4.86668 5.13334C5.13334 5.40001 5.53334 5.40001 5.80001 5.13334Z" fill="#8880EB"></path>
          </svg>
        </span>
        <span>Download</span>
      </a>
      <a class="inline-flex items-center py-2 px-3 mr-3 text-xs text-indigo-500 font-medium bg-white hover:bg-indigo-50 rounded" href="#">
        <span class="inline-block mr-1">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.2133 5.36665L11.9533 4.94665L12.5466 3.75998C12.6067 3.63577 12.6269 3.49596 12.6042 3.35983C12.5815 3.2237 12.5171 3.09797 12.4199 2.99998L10.9999 1.57998C10.9014 1.48137 10.7745 1.41612 10.637 1.3934C10.4994 1.37068 10.3582 1.39163 10.2333 1.45332L9.04659 2.04665L8.62659 0.786649C8.58223 0.65531 8.49803 0.541066 8.38572 0.459814C8.2734 0.378562 8.13854 0.334345 7.99992 0.333315H5.99992C5.86016 0.332954 5.72382 0.376528 5.61017 0.457877C5.49652 0.539225 5.41131 0.654235 5.36659 0.786649L4.94659 2.04665L3.75992 1.45332C3.63571 1.39317 3.4959 1.37305 3.35977 1.39574C3.22364 1.41843 3.09791 1.4828 2.99992 1.57998L1.57992 2.99998C1.48131 3.09849 1.41606 3.22543 1.39334 3.36295C1.37062 3.50047 1.39157 3.64166 1.45325 3.76665L2.04659 4.95332L0.786588 5.37332C0.655249 5.41767 0.541005 5.50187 0.459753 5.61419C0.378501 5.72651 0.334284 5.86136 0.333254 5.99998V7.99998C0.332893 8.13974 0.376467 8.27609 0.457815 8.38973C0.539164 8.50338 0.654174 8.58859 0.786588 8.63332L2.04659 9.05332L1.45325 10.24C1.39311 10.3642 1.37299 10.504 1.39568 10.6401C1.41837 10.7763 1.48274 10.902 1.57992 11L2.99992 12.42C3.09843 12.5186 3.22537 12.5838 3.36289 12.6066C3.50041 12.6293 3.64159 12.6083 3.76659 12.5466L4.95325 11.9533L5.37325 13.2133C5.41798 13.3457 5.50319 13.4607 5.61684 13.5421C5.73048 13.6234 5.86683 13.667 6.00659 13.6666H8.00659C8.14635 13.667 8.28269 13.6234 8.39634 13.5421C8.50999 13.4607 8.5952 13.3457 8.63992 13.2133L9.05992 11.9533L10.2466 12.5466C10.37 12.6053 10.5085 12.6246 10.6432 12.6019C10.7779 12.5793 10.9025 12.5157 10.9999 12.42L12.4199 11C12.5185 10.9015 12.5838 10.7745 12.6065 10.637C12.6292 10.4995 12.6083 10.3583 12.5466 10.2333L11.9533 9.04665L13.2133 8.62665C13.3446 8.58229 13.4588 8.4981 13.5401 8.38578C13.6213 8.27346 13.6656 8.1386 13.6666 7.99998V5.99998C13.6669 5.86022 13.6234 5.72388 13.542 5.61023C13.4607 5.49658 13.3457 5.41137 13.2133 5.36665ZM12.3333 7.51998L11.5333 7.78665C11.3493 7.84632 11.1805 7.9453 11.0386 8.07672C10.8967 8.20813 10.7851 8.36884 10.7116 8.5477C10.638 8.72656 10.6042 8.91928 10.6126 9.1125C10.6209 9.30572 10.6712 9.49481 10.7599 9.66665L11.1399 10.4266L10.4066 11.16L9.66659 10.76C9.49562 10.6748 9.30836 10.6274 9.11746 10.6208C8.92657 10.6143 8.7365 10.6489 8.56013 10.7222C8.38376 10.7956 8.22521 10.9059 8.0952 11.0459C7.96519 11.1858 7.86677 11.352 7.80659 11.5333L7.53992 12.3333H6.47992L6.21325 11.5333C6.15358 11.3494 6.0546 11.1806 5.92319 11.0387C5.79177 10.8968 5.63106 10.7852 5.4522 10.7116C5.27334 10.638 5.08062 10.6043 4.8874 10.6126C4.69419 10.621 4.5051 10.6713 4.33325 10.76L3.57325 11.14L2.83992 10.4066L3.23992 9.66665C3.32865 9.49481 3.37893 9.30572 3.38728 9.1125C3.39564 8.91928 3.36185 8.72656 3.28828 8.5477C3.21471 8.36884 3.10311 8.20813 2.96122 8.07672C2.81933 7.9453 2.65055 7.84632 2.46659 7.78665L1.66659 7.51998V6.47998L2.46659 6.21331C2.65055 6.15364 2.81933 6.05467 2.96122 5.92325C3.10311 5.79183 3.21471 5.63112 3.28828 5.45226C3.36185 5.2734 3.39564 5.08068 3.38728 4.88746C3.37893 4.69425 3.32865 4.50516 3.23992 4.33332L2.85992 3.59332L3.59325 2.85998L4.33325 3.23998C4.5051 3.32871 4.69419 3.379 4.8874 3.38735C5.08062 3.3957 5.27334 3.36191 5.4522 3.28834C5.63106 3.21477 5.79177 3.10317 5.92319 2.96128C6.0546 2.81939 6.15358 2.65061 6.21325 2.46665L6.47992 1.66665H7.51992L7.78659 2.46665C7.84626 2.65061 7.94524 2.81939 8.07665 2.96128C8.20807 3.10317 8.36878 3.21477 8.54764 3.28834C8.7265 3.36191 8.91922 3.3957 9.11244 3.38735C9.30566 3.379 9.49474 3.32871 9.66659 3.23998L10.4266 2.85998L11.1599 3.59332L10.7599 4.33332C10.6747 4.50428 10.6273 4.69155 10.6208 4.88244C10.6143 5.07334 10.6489 5.2634 10.7222 5.43977C10.7955 5.61614 10.9059 5.77469 11.0458 5.9047C11.1857 6.03471 11.352 6.13314 11.5333 6.19332L12.3333 6.45998V7.51998ZM6.99992 4.33332C6.4725 4.33332 5.95693 4.48971 5.5184 4.78273C5.07987 5.07575 4.73808 5.49222 4.53624 5.97949C4.33441 6.46676 4.2816 7.00294 4.38449 7.52022C4.48739 8.03751 4.74136 8.51266 5.1143 8.8856C5.48724 9.25854 5.9624 9.51252 6.47968 9.61541C6.99696 9.7183 7.53314 9.66549 8.02041 9.46366C8.50768 9.26183 8.92416 8.92003 9.21717 8.4815C9.51019 8.04297 9.66659 7.5274 9.66659 6.99998C9.66659 6.29274 9.38564 5.61446 8.88554 5.11436C8.38544 4.61427 7.70716 4.33332 6.99992 4.33332V4.33332ZM6.99992 8.33332C6.73621 8.33332 6.47843 8.25512 6.25916 8.10861C6.03989 7.9621 5.869 7.75386 5.76808 7.51023C5.66716 7.26659 5.64076 6.9985 5.69221 6.73986C5.74365 6.48122 5.87064 6.24364 6.05711 6.05717C6.24358 5.8707 6.48116 5.74371 6.7398 5.69227C6.99844 5.64082 7.26653 5.66723 7.51017 5.76814C7.7538 5.86906 7.96204 6.03996 8.10855 6.25922C8.25506 6.47849 8.33325 6.73627 8.33325 6.99998C8.33325 7.3536 8.19278 7.69274 7.94273 7.94279C7.69268 8.19284 7.35354 8.33332 6.99992 8.33332Z" fill="#8880EB"></path>
          </svg>
        </span>
        <span>Settings</span>
      </a>
      <a class="inline-flex items-center py-2 px-3 text-xs text-white font-medium bg-indigo-500 hover:bg-indigo-600 rounded" href="#">
        <span class="inline-block mr-1">
          <svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.66667 12.3333H3.33333C2.8029 12.3333 2.29419 12.1226 1.91912 11.7476C1.54405 11.3725 1.33333 10.8638 1.33333 10.3333V3.66668C1.33333 3.48987 1.2631 3.3203 1.13807 3.19527C1.01305 3.07025 0.843478 3.00001 0.666667 3.00001C0.489856 3.00001 0.320286 3.07025 0.195262 3.19527C0.0702379 3.3203 0 3.48987 0 3.66668V10.3333C0 11.2174 0.351189 12.0652 0.976311 12.6904C1.60143 13.3155 2.44928 13.6667 3.33333 13.6667H8.66667C8.84348 13.6667 9.01305 13.5964 9.13807 13.4714C9.2631 13.3464 9.33333 13.1768 9.33333 13C9.33333 12.8232 9.2631 12.6536 9.13807 12.5286C9.01305 12.4036 8.84348 12.3333 8.66667 12.3333ZM4.66667 7.66668C4.66667 7.84349 4.7369 8.01306 4.86193 8.13808C4.98695 8.26311 5.15652 8.33334 5.33333 8.33334H8.66667C8.84348 8.33334 9.01305 8.26311 9.13807 8.13808C9.2631 8.01306 9.33333 7.84349 9.33333 7.66668C9.33333 7.48987 9.2631 7.3203 9.13807 7.19527C9.01305 7.07025 8.84348 7.00001 8.66667 7.00001H5.33333C5.15652 7.00001 4.98695 7.07025 4.86193 7.19527C4.7369 7.3203 4.66667 7.48987 4.66667 7.66668ZM12 4.96001C11.9931 4.89877 11.9796 4.83843 11.96 4.78001V4.72001C11.9279 4.65146 11.8852 4.58845 11.8333 4.53334V4.53334L7.83333 0.533343C7.77822 0.481488 7.71521 0.438731 7.64667 0.406677C7.62677 0.40385 7.60657 0.40385 7.58667 0.406677C7.51894 0.367838 7.44415 0.342906 7.36667 0.333344H4.66667C4.13623 0.333344 3.62753 0.544057 3.25245 0.91913C2.87738 1.2942 2.66667 1.80291 2.66667 2.33334V9.00001C2.66667 9.53044 2.87738 10.0392 3.25245 10.4142C3.62753 10.7893 4.13623 11 4.66667 11H10C10.5304 11 11.0391 10.7893 11.4142 10.4142C11.7893 10.0392 12 9.53044 12 9.00001V5.00001C12 5.00001 12 5.00001 12 4.96001ZM8 2.60668L9.72667 4.33334H8.66667C8.48986 4.33334 8.32029 4.26311 8.19526 4.13808C8.07024 4.01306 8 3.84349 8 3.66668V2.60668ZM10.6667 9.00001C10.6667 9.17682 10.5964 9.34639 10.4714 9.47141C10.3464 9.59644 10.1768 9.66668 10 9.66668H4.66667C4.48986 9.66668 4.32029 9.59644 4.19526 9.47141C4.07024 9.34639 4 9.17682 4 9.00001V2.33334C4 2.15653 4.07024 1.98696 4.19526 1.86194C4.32029 1.73691 4.48986 1.66668 4.66667 1.66668H6.66667V3.66668C6.66847 3.89411 6.70905 4.11956 6.78667 4.33334H5.33333C5.15652 4.33334 4.98695 4.40358 4.86193 4.52861C4.7369 4.65363 4.66667 4.8232 4.66667 5.00001C4.66667 5.17682 4.7369 5.34639 4.86193 5.47141C4.98695 5.59644 5.15652 5.66668 5.33333 5.66668H10.6667V9.00001Z" fill="#8880EB"></path>
          </svg>
        </span>
        <span>Report</span>
      </a>
    </div>
  </div>
</section>

Hero section from Wrexa

Tailwind CSS

Wrexa

Split-screen furniture hero with product card

A split-screen hero section with a photo of two people on the left and a dark panel on the right containing a large heading "Find your editor and create your home." A purple Discover Now button and a floating white product card for the Kirk Oak armchair overlap the image.

<section class="pb-64 bg-gray-100 overflow-hidden" x-data="{ mobileNavOpen: false, slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <nav class="relative bg-gray-900 px-6 sm:px-12 pt-4">
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10">
      <a class="inline-block" href="#">
        <img src="wrexa-assets/logos/logo-wrexa.svg" alt="" width="auto">
      </a>
    </div>
    <div class="3xl:hidden pb-4">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex ml-auto items-center justify-center w-14 h-14 rounded-full bg-white hover:bg-gray-200">
        <svg width="20" height="9" viewBox="0 0 20 9" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="0.75" y1="1.25" x2="19.25" y2="1.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line><line x1="0.75" y1="8.25" x2="13.25" y2="8.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line></svg>
      </button>
    </div>
    <div class="hidden 3xl:block">
      <div class="pb-2"><a class="inline-block mr-6 text-xs text-gray-400 hover:text-gray-300" href="#">Account</a><a class="inline-block text-xs text-gray-400 hover:text-gray-300" href="#">Saved</a></div>
      <div>
        <div class="flex relative">
          <div class="w-5/12 mr-auto">
            <div class="pt-5 pr-24 border-t border-gray-100 border-opacity-10">
              <ul class="flex items-center justify-end">
                <li class="mr-6">
                  <a class="inline-flex items-center pb-5 pr-8 text-sm text-white hover:text-gray-200" href="#">
                    <span class="mr-4">Collection</span>
                    <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10 2L6 6L2 2" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
                    </svg>
                  </a>
                  <div class="border-b-4 border-lime-900"></div>
                </li>
                <li class="pb-6 mr-20"><a class="inline-block text-sm text-white hover:text-gray-200" href="#">Projects</a></li>
                <li class="pb-6"><a class="inline-block text-sm text-white hover:text-gray-200" href="#">About</a></li>
              </ul>
            </div>
          </div>
          <div class="w-auto 3xl:w-3/12 mr-4 3xl:mr-12">
            <div class="pt-5 2xl:pl-10 3xl:pl-24 border-t border-gray-100 border-opacity-10">
              <div style="height: 1px;"></div>
              <ul class="flex items-center">
                <li class="pb-6 mr-12">
                  <a class="inline-flex items-center text-sm text-white hover:text-gray-200" href="#">
                    <span class="mr-4">How to Start</span>
                    <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10 2L6 6L2 2" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
                    </svg>
                  </a>
                </li>
                <li class="pb-6"><a class="inline-block text-sm text-white hover:text-gray-200" href="#">Design</a></li>
              </ul>
            </div>
          </div>
          <div class="w-auto flex-shrink-0">
            <div class="flex -mt-4 items-center">
              <a class="inline-block w-full sm:w-auto px-7 py-4 mr-12 text-center font-medium text-white border border-white hover:border-gray-200 hover:text-gray-200 rounded" href="#">Get Started</a>
              <button class="flex items-center justify-center w-14 h-14 rounded-full bg-white hover:bg-gray-200">
                <svg width="20" height="9" viewBox="0 0 20 9" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="0.75" y1="1.25" x2="19.25" y2="1.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line><line x1="0.75" y1="8.25" x2="13.25" y2="8.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line></svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div class="flex flex-wrap">
    <div class="w-full lg:w-2/5 xl:w-1/2 relative order-last lg:order-first">
      <img class="block w-full h-192 object-cover" src="wrexa-assets/images/people-havinf-fun-placeholder.png" alt="">
      <div class="h-26 bg-white"></div>
      <div class="absolute bottom-0 right-0 w-full sm:w-auto -mb-32 sm:mr-6 xl:mr-24 px-4">
        <div class="max-w-sm mx-auto px-6 pt-5 pb-18 bg-white shadow rounded-xl">
          <div class="flex mb-16 items-center justify-between">
            <button class="inline-flex items-center justify-center w-10 h-10 bg-indigo-500 hover:bg-indigo-600 text-white rounded" role="button">
              <svg width="10" height="10" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3.60156" width="2.4" height="10.4" rx="1" fill="currentColor"></rect><rect x="9.60156" y="4" width="2.4" height="9.6" rx="1" transform="rotate(90 9.60156 4)" fill="currentColor"></rect></svg>
            </button>
            <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="17" cy="18" r="16.5" stroke="black" stroke-opacity="0.12"></circle>
              <path d="M16.8645 1.27174C26.1782 1.27174 33.7285 8.82201 33.7285 18.1357" stroke="#5B2FE2" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </div>
          <div class="flex items-center justify-center">
            <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-block">
              <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5 10L1 6L5 2" stroke="#232126" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
              </svg>
            </button>
            <div class="overflow-hidden">
                <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                    <div x-ref="slide1" class="flex-shrink-0 w-full">
                        <img class="block mx-auto mb-12" src="wrexa-assets/images/green-chair.png" alt="">
                        <a class="block mx-14 text-center" href="#">
                          <h3 class="text-2xl">Kirk Oak</h3>
                          <span class="text-xs text-gray-400">New in</span>
                        </a>
                    </div>
                    <div x-ref="slide2" class="flex-shrink-0 w-full">
                        <img class="block mx-auto mb-12" src="wrexa-assets/images/green-chair.png" alt="">
                        <a class="block mx-14 text-center" href="#">
                          <h3 class="text-2xl">Ashwood Manor</h3>
                          <span class="text-xs text-gray-400">New in</span>
                        </a>
                    </div>
                    <div x-ref="slide3" class="flex-shrink-0 w-full">
                        <img class="block mx-auto mb-12" src="wrexa-assets/images/green-chair.png" alt="">
                        <a class="block mx-14 text-center" href="#">
                          <h3 class="text-2xl">Cedar Crest</h3>
                          <span class="text-xs text-gray-400">New in</span>
                        </a>
                    </div>
                </div>
            </div>
            <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-block">
              <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2 2L6 6L2 10" stroke="#232126" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="w-full lg:w-3/5 xl:w-1/2 bg-gray-800 relative">
      <div class="px-4 pt-32 pb-16">
        <div class="max-w-lg mx-auto">
          <div class="mb-32">
            <h1 class="font-heading text-5xl sm:text-6xl text-white mb-10">Find your editor and create your home.</h1>
            <a class="inline-flex items-center text-lg text-white" href="#">
              <span class="mr-6">Exploring the shift of today</span>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.9983 2.97487L12.8444 2.94712L12.9539 11.4487L1.76433 0.259107L0.261729 1.76171L11.4513 12.9513L2.94974 12.8418L2.97749 14.9957L15.1552 15.1525L14.9983 2.97487Z" fill="white"></path>
              </svg>
            </a>
          </div>
          <a class="inline-block w-full sm:w-auto px-7 py-4 mb-40 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Discover Now</a>
          <div><a class="inline-block mr-24 text-gray-500 hover:text-gray-400 text-sm" href="#">Let’s talk</a><a class="inline-block text-gray-500 hover:text-gray-400 text-sm" href="#">Scroll for more</a></div>
        </div>
      </div>
      <div class="hidden sm:block absolute bottom-0 right-0 h-26 w-26 bg-white">
        <div class="absolute bottom-0 left-1/2 mb-8 transform translate-x-1/2">
          <div class="h-26 w-px bg-white"></div>
          <div class="h-18 w-px bg-gray-800"></div>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
    <nav class="relative flex flex-col pt-12 pb-40 h-full w-full bg-gray-200 overflow-y-auto">
      <div class="px-12">
        <div>
          <a class="inline-block mb-52" href="#">
            <img src="wrexa-assets/logos/logo-wrexa.svg" alt="" width="auto">
          </a>
          <button type="button" aria-label="Close"></button>
        </div>
        <ul>
          <li class="mb-6">
            <a class="flex items-center justify-between" href="#">
              <span>Collection</span>
              <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 2L6 6L2 2" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
              </svg>
            </a>
          </li>
          <li class="mb-6"><a class="inline-block" href="#">Projects</a></li>
          <li class="mb-16"><a class="inline-block" href="#">About</a></li>
          <li class="mb-6"><a class="inline-block" href="#">How to Start</a></li>
          <li><a class="inline-block" href="#">Design</a></li>
        </ul>
      </div>
    </nav>
    <div class="absolute bottom-0 left-0 w-full">
      <a class="flex items-center pt-4 pb-5 pl-6 pr-4 bg-white" href="#">
        <div class="relative mr-4">
          <img class="w-12 h-12 rounded-full" src="wrexa-assets/images/avatar2.png" alt="">
          <div class="absolute bottom-0 left-0 -ml-2 flex items-center justify-center w-6 h-6 bg-green-800 rounded-full text-white text-xs">1</div>
        </div>
        <div class="pr-5 mr-auto">
          <h4 class="text-xs text-gray-400">Account</h4>
          <span>matloay</span>
        </div>
        <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 2L6 6L2 2" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
        </svg>
      </a>
    </div>
  </div>
</section>

Hero section from Zospace

Tailwind CSS

Zospace

Zospace Hero with App Mockups and Get Started CTA

A dark, full-width marketing hero for the Zospace app, featuring a large left-aligned headline, a subheading, and a blue Get started button. Two tilted phone mockups on the right display app screens, and a simple navigation bar sits at the top.

<section class="relative pb-20 bg-gray-800 overflow-hidden" x-data="{ mobileNavOpen: false, slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="absolute bottom-0 inset-x-0 h-full bg-gradient-zospace-1"></div>
  <div class="absolute bottom-0 inset-x-0 h-3/5 w-2full -ml-64 -mb-12 bg-gradient-zospace-2 transform -rotate-6"></div>
  <nav class="relative">
    <div class="flex py-8 px-4 lg:px-8 justify-between items-center">
      <button class="p-2" x-on:click="mobileNavOpen = !mobileNavOpen">
        <svg class="w-10 h-3" width="39" height="13" viewBox="0 0 39 13" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="39" height="2" rx="1" fill="#C4C4C4"></rect><rect x="19" y="11" width="20" height="2" rx="1" fill="#C4C4C4"></rect></svg>
      </button>
      <div class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2">
        <a class="text-2xl text-white font-bold" href="#">
          <img class="h-7" src="zospace-assets/logos/zospace-logo.svg" alt="" width="auto">
        </a>
      </div>
      <div class="hidden lg:block"><a class="inline-block mr-10 text-lg text-white hover:text-gray-50 font-bold border-b border-gray-200" href="#">Try for free!</a><a class="inline-block px-12 py-4 text-white font-bold border border-gray-200 hover:border-white rounded-full" href="#">Sign Up</a></div>
    </div>
  </nav>
  <div class="relative container px-4 pt-12 md:pt-20 mx-auto">
    <div class="hidden 2xl:block absolute bottom-0 w-3/5 mb-40 h-2 border-b border-white"></div>
    <div class="relative flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 2xl:w-2/5 px-4 mb-12 mb:mb-0">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                <div x-ref="slide1" class="flex-shrink-0 w-full">
                    <span class="text-xl lg:text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-br from-yellow-200 to-orange-600">Two ways to start!</span>
                    <h2 class="max-w-lg lg:max-w-md 2xl:max-w-none mt-7 mb-12 mb:mb-20 text-6xl lg:text-7xl 2xl:text-9xl text-white font-bold font-heading">Get perfect app for your project</h2>
                    <p class="mb-12 lg:mb-24 text-lg text-white opacity-90">Discover how it works and start for free.</p>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full">
                    <span class="text-xl lg:text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-br from-yellow-200 to-orange-600">Ready to Begin?</span>
                    <h2 class="max-w-lg lg:max-w-md 2xl:max-w-none mt-7 mb-12 mb:mb-20 text-6xl lg:text-7xl 2xl:text-9xl text-white font-bold font-heading">Find Your Ideal Workspace Solution</h2>
                    <p class="mb-12 lg:mb-24 text-lg text-white opacity-90">Explore the Possibilities and Launch Your Project Today</p>
                </div>
                <div x-ref="slide3" class="flex-shrink-0 w-full">
                    <span class="text-xl lg:text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-br from-yellow-200 to-orange-600">Let's Dive In!</span>
                    <h2 class="max-w-lg lg:max-w-md 2xl:max-w-none mt-7 mb-12 mb:mb-20 text-6xl lg:text-7xl 2xl:text-9xl text-white font-bold font-heading">Unlock Your Creative Potential with Our Tools</h2>
                    <p class="mb-12 lg:mb-24 text-lg text-white opacity-90">Learn the Features and Begin Crafting Your Masterpiece for Free</p>
                </div>
            </div>
        </div>
        <div class="flex flex-wrap items-center">
            <a class="inline-block mr-14 px-12 py-5 text-lg text-white font-bold bg-blue-500 hover:bg-blue-600 rounded-full transition duration-200" href="#">Get started</a>
            <div class="w-full sm:w-auto mt-8 sm:mt-0 flex">
            <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="p-2">
                <svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.7597 18.6258C11.0801 18.942 11.0801 19.4502 10.7597 19.7641C10.4393 20.0781 9.92164 20.0792 9.60124 19.7641L0.240298 10.569C-0.0801018 10.255 -0.0801017 9.74688 0.240298 9.43061L9.60124 0.235462C9.92164 -0.0784849 10.4393 -0.0784848 10.7597 0.235462C11.0801 0.550571 11.0801 1.05986 10.7597 1.37381L2.22247 10.0004L10.7597 18.6258Z" fill="white"></path>
                </svg>
            </button>
            <span class="py-2 px-4">
                <svg width="2" height="24" viewBox="0 0 2 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 0L1 24" stroke="white" stroke-opacity="0.24"></path>
                </svg>
            </span>
            <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="p-2">
                <svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.2403 1.37424C-0.0801003 1.05797 -0.0801003 0.549844 0.2403 0.235898C0.5607 -0.0780496 1.07836 -0.0792131 1.39876 0.235898L10.7597 9.43104C11.0801 9.74499 11.0801 10.2531 10.7597 10.5694L1.39876 19.7645C1.07836 20.0785 0.560699 20.0785 0.240298 19.7645C-0.0801019 19.4494 -0.0801019 18.9401 0.240298 18.6262L8.77752 9.99964L0.2403 1.37424Z" fill="white"></path>
                </svg>
            </button>
            </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 2xl:w-3/5 px-4">
        <img class="w-full h-full object-contain" src="zospace-assets/images/two-phones.png" alt="">
      </div>
    </div>
  </div>
  <div :class="{ 'hidden': !mobileNavOpen, 'block': mobileNavOpen }" class="fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50 hidden">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
    <nav class="relative flex flex-col py-8 h-full w-full bg-white overflow-y-auto">
      <div class="flex items-center mb-16 pr-6">
        <a class="ml-10 mr-auto text-2xl text-gray-800 font-bold" href="#">
          <img class="h-7" src="zospace-assets/logos/zospace-dark-logo.svg" alt="" width="auto">
        </a>
      </div>
      <div>
        <ul>
          <li class="mb-1 px-10"><a class="block pl-8 py-4 text-xl text-gray-800 hover:bg-blueGray-50 rounded-xl" href="#">Product</a></li>
          <li class="mb-1 px-10"><a class="block pl-8 py-4 text-xl text-gray-800 hover:bg-blueGray-50 rounded-xl" href="#">Story</a></li>
          <li class="mb-1 px-10"><a class="block pl-8 py-4 text-xl text-gray-800 hover:bg-blueGray-50 rounded-xl" href="#">Features</a></li>
          <li class="mb-1 px-10"><a class="block pl-8 py-4 text-xl text-gray-800 hover:bg-blueGray-50 rounded-xl" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="mt-auto px-10">
        <div class="pt-6"><a class="block mb-4 py-4 px-12 text-gray-800 text-center font-bold border border-gray-50 hover:border-gray-100 rounded-full" href="#">Sign in</a><a class="block py-4 px-12 text-white text-center font-bold bg-blue-500 hover:bg-blue-600 rounded-full transition duration-200" href="#">Sign up</a></div>
        <p class="mt-6 mb-4 text-lg text-center">
          <span>2021 © Zospace. All rights reserved.</span>
        </p>
      </div>
    </nav>
  </div>
</section>

Hero section from Flex

Tailwind CSS

Flex

Flex SaaS Hero Section with Office Photo and Dual CTAs

A dark-themed hero section for the Flex SaaS business platform, with a top navigation bar, a large two-line headline, a supporting paragraph, and Request a Demo and Sign Up buttons on the left, paired with an office photograph and decorative gold and blue accents on the right.

<section class="relative bg-white overflow-hidden">
  <div x-data="{ mobileNavOpen: false }" class="bg-coolGray-900">
    <nav class="flex justify-between p-6 px-4">
      <div class="flex justify-between items-center w-full">
        <div class="w-1/2 xl:w-1/3">
          <a class="block max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green.svg" alt="">
          </a>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <ul class="hidden xl:flex xl:justify-center">
            <li class="mr-12"><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Product</a></li>
            <li class="mr-12"><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Features</a></li>
            <li class="mr-12"><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Resources</a></li>
            <li><a class="text-coolGray-400 hover:text-coolGray-50 font-medium" href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="w-1/2 xl:w-1/3">
          <div class="hidden xl:flex items-center justify-end"><a class="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-400 hover:text-coolGray-50 bg-transparent font-medium rounded-md" href="#">Log In</a><a class="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md" href="#">Sign Up</a></div>
        </div>
      </div>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-burger self-center xl:hidden">
        <svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect class="text-coolGray-800" width="32" height="32" rx="6" fill="currentColor"></rect>
          <path class="text-coolGray-400" d="M7 12H25C25.2652 12 25.5196 11.8946 25.7071 11.7071C25.8946 11.5196 26 11.2652 26 11C26 10.7348 25.8946 10.4804 25.7071 10.2929C25.5196 10.1054 25.2652 10 25 10H7C6.73478 10 6.48043 10.1054 6.29289 10.2929C6.10536 10.4804 6 10.7348 6 11C6 11.2652 6.10536 11.5196 6.29289 11.7071C6.48043 11.8946 6.73478 12 7 12ZM25 15H7C6.73478 15 6.48043 15.1054 6.29289 15.2929C6.10536 15.4804 6 15.7348 6 16C6 16.2652 6.10536 16.5196 6.29289 16.7071C6.48043 16.8946 6.73478 17 7 17H25C25.2652 17 25.5196 16.8946 25.7071 16.7071C25.8946 16.5196 26 16.2652 26 16C26 15.7348 25.8946 15.4804 25.7071 15.2929C25.5196 15.1054 25.2652 15 25 15ZM25 20H7C6.73478 20 6.48043 20.1054 6.29289 20.2929C6.10536 20.4804 6 20.7348 6 21C6 21.2652 6.10536 21.5196 6.29289 21.7071C6.48043 21.8946 6.73478 22 7 22H25C25.2652 22 25.5196 21.8946 25.7071 21.7071C25.8946 21.5196 26 21.2652 26 21C26 20.7348 25.8946 20.4804 25.7071 20.2929C25.5196 20.1054 25.2652 20 25 20Z" fill="currentColor"></path>
        </svg>
      </button>
    </nav>
    <div x-show="mobileNavOpen" class="navbar-menu fixed top-0 left-0 z-50 w-full h-full bg-coolGray-900 bg-opacity-50">
      <div class="fixed top-0 left-0 bottom-0 w-full w-4/6 max-w-xs bg-coolGray-900">
        <nav class="relative p-6 h-full overflow-y-auto">
          <div class="flex flex-col justify-between h-full">
            <a class="inline-block" href="#">
              <img class="h-8" src="flex-ui-assets/logos/flex-ui-green.svg" alt="">
            </a>
            <ul class="py-6">
              <li><a class="block py-3 px-4 text-coolGray-400 hover:text-white font-medium hover:bg-coolGray-800 rounded-md" href="#">Product</a></li>
              <li><a class="block py-3 px-4 text-coolGray-400 hover:text-white font-medium hover:bg-coolGray-800 rounded-md" href="#">Features</a></li>
              <li><a class="block py-3 px-4 text-coolGray-400 hover:text-white font-medium hover:bg-coolGray-800 rounded-md" href="#">Pricing</a></li>
              <li><a class="block py-3 px-4 text-coolGray-400 hover:text-white font-medium hover:bg-coolGray-800 rounded-md" href="#">Resources</a></li>
            </ul>
            <div class="flex flex-wrap">
              <div class="w-full mb-2"><a class="inline-block py-2 px-4 w-full text-sm leading-5 text-coolGray-400 hover:text-white bg-transparent font-medium text-center rounded-md" href="#">Log In</a></div>
              <div class="w-full"><a class="inline-block py-2 px-4 w-full text-sm leading-5 text-white bg-green-500 hover:bg-green-600 font-medium text-center focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md" href="#">Sign Up</a></div>
            </div>
          </div>
        </nav>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-close absolute top-5 p-4 right-3">
          <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.94004 5.99988L11.14 1.80655C11.2656 1.68101 11.3361 1.51075 11.3361 1.33321C11.3361 1.15568 11.2656 0.985415 11.14 0.859879C11.0145 0.734344 10.8442 0.663818 10.6667 0.663818C10.4892 0.663818 10.3189 0.734344 10.1934 0.859879L6.00004 5.05988L1.80671 0.859879C1.68117 0.734344 1.51091 0.663819 1.33337 0.663819C1.15584 0.663819 0.985576 0.734344 0.860041 0.859879C0.734505 0.985415 0.66398 1.15568 0.66398 1.33321C0.66398 1.51075 0.734505 1.68101 0.860041 1.80655L5.06004 5.99988L0.860041 10.1932C0.797555 10.2552 0.747959 10.3289 0.714113 10.4102C0.680267 10.4914 0.662842 10.5785 0.662842 10.6665C0.662842 10.7546 0.680267 10.8417 0.714113 10.9229C0.747959 11.0042 0.797555 11.0779 0.860041 11.1399C0.922016 11.2024 0.99575 11.252 1.07699 11.2858C1.15823 11.3197 1.24537 11.3371 1.33337 11.3371C1.42138 11.3371 1.50852 11.3197 1.58976 11.2858C1.671 11.252 1.74473 11.2024 1.80671 11.1399L6.00004 6.93988L10.1934 11.1399C10.2554 11.2024 10.3291 11.252 10.4103 11.2858C10.4916 11.3197 10.5787 11.3371 10.6667 11.3371C10.7547 11.3371 10.8419 11.3197 10.9231 11.2858C11.0043 11.252 11.0781 11.2024 11.14 11.1399C11.2025 11.0779 11.2521 11.0042 11.286 10.9229C11.3198 10.8417 11.3372 10.7546 11.3372 10.6665C11.3372 10.5785 11.3198 10.4914 11.286 10.4102C11.2521 10.3289 11.2025 10.2552 11.14 10.1932L6.94004 5.99988Z" fill="#8896AB"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
  <div class="py-20 md:py-28 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap xl:items-center -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
          <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-white bg-green-500 uppercase rounded-9xl">Header</span>
          <h1 class="mb-6 text-3xl md:text-5xl lg:text-6xl leading-tight text-white font-bold tracking-tight">A small business is only as good as its tools.</h1>
          <p class="mb-8 text-lg md:text-xl text-coolGray-400 font-medium">We&rsquo;re different. Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
          <div class="flex flex-wrap">
            <div class="w-full md:w-auto py-1 md:py-0 md:mr-4"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-green-50 font-medium text-center bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Request a Demo</a></div>
            <div class="w-full md:w-auto py-1 md:py-0"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-coolGray-100 font-medium text-center bg-coolGray-700 hover:bg-coolGray-800 focus:ring-2 focus:ring-coolGray-700 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Sign Up</a></div>
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="relative mx-auto md:mr-0 max-w-max">
            <img class="absolute z-10 -left-8 -top-8 w-28 md:w-auto text-yellow-400" src="flex-ui-assets/elements/circle3-yellow.svg" alt="">
            <img class="absolute z-10 -right-7 -bottom-8 w-28 md:w-auto text-blue-500" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
            <img class="relative rounded-7xl" src="flex-ui-assets/images/headers/header.jpg" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="wave-bottom w-full text-coolGray-900">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 51.4091H1090.08C833.336 51.4091 580.229 116 360 116C139.771 116 0 51.4091 0 51.4091V0H1440V51.4091Z" fill="currentColor"></path>
    </svg>
  </div>
</section>

Hero section from Uinel

Tailwind CSS

Uinel

Uinel Hero Section with Header and Product Showcase

A marketing hero section for the Uinel product with a top navigation bar, a headline reading "A thousand tools for design", an email signup field with a Get started button, and an illustrated composition of floating tool badges, a task card with tabs, and a blue team card.

<div x-data="{ mobileNavOpen: false }">
  <div class="text-gray-700 font-heading font-medium relative bg-gray-50 bg-opacity-50">
    <nav class="flex justify-between px-6 lg:px-12 py-8">
      <div class="flex w-full items-center">
        <a href="#">
          <img class="h-12" src="uinel-assets/logos/uinel-gray-black.svg" alt="">
        </a>
        <ul class="hidden xl:flex px-4 ml-32">
          <li class="mr-16"><a class="text-gray-400 hover:text-gray-500" href="#">New tools</a></li>
          <li class="mr-16">
            <a class="flex items-center text-gray-400 hover:text-gray-500" href="#">
              <span class="mr-4">Products</span>
              <svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.97291 0.193232C7.20854 -0.0644107 7.58938 -0.0644107 7.82328 0.193232C8.05804 0.450875 8.05978 0.867141 7.82328 1.12478L4.42529 4.80677C4.19053 5.06441 3.81056 5.06441 3.57406 4.80677L0.176073 1.12478C-0.0586909 0.868102 -0.0586909 0.450875 0.176073 0.193232C0.411706 -0.0644107 0.792544 -0.0644107 1.02644 0.193232L4.00098 3.21284L6.97291 0.193232Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li><a class="text-gray-400 hover:text-gray-500" href="#">Pricing</a></li>
        </ul>
        <div class="hidden xl:flex items-center ml-auto">
          <a class="text-gray-400 hover:text-gray-500" href="#">
            <svg width="20" height="23" viewBox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.5219 18.016H2.70312V8.5933C2.70313 6.719 3.48375 4.92147 4.87328 3.59614C6.2628 2.27081 8.1474 1.52625 10.1125 1.52625C12.0776 1.52625 13.9622 2.27081 15.3517 3.59614C16.7412 4.92147 17.5219 6.719 17.5219 8.5933V18.016Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M1 18.0121H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M8.87891 22H10.8789" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <div class="w-px h-12 bg-gray-200 bg-opacity-50 ml-9 mr-11"></div>
          <a class="flex items-center mr-12" href="#">
            <span>Sona</span>
            <img class="ml-6" src="uinel-assets/elements/navigations/avatar-online.png" alt="">
            <img class="ml-6" src="uinel-assets/elements/navigations/arrow-down-gray.svg" alt="">
          </a>
          <button class="uppercase text-sm font-bold font-body border-2 border-gray-200 border-opacity-50 rounded-full py-3 px-5 tracking-wide hover:border-gray-300">
            <span class="block mt-px">New project</span>
          </button>
        </div>
      </div>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="self-center xl:hidden text-gray-400 hover:text-gray-500 focus:outline-none">
        <svg width="25" height="16" viewBox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="25" height="2" fill="currentColor"></rect><rect y="14" width="25" height="2" fill="currentColor"></rect></svg>
      </button>
    </nav>
    <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
      <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
      <nav class="relative flex flex-col py-8 h-full w-full bg-white overflow-y-auto">
        <div class="flex items-center pl-16 mb-8">
          <a class="text-2xl text-gray-800 font-bold" href="#">
            <img class="h-12" src="uinel-assets/logos/uinel-gray-black.svg" alt="">
          </a>
        </div>
        <div class="flex items-center mb-10 px-10">
          <a class="flex items-center ml-1" href="#">
            <img class="ml-6" src="uinel-assets/elements/navigations/avatar-online.png" alt="">
            <img class="ml-6" src="uinel-assets/elements/navigations/arrow-down-gray.svg" alt="">
          </a>
          <a class="text-gray-400 hover:text-gray-500 ml-auto" href="#">
            <svg width="20" height="23" viewBox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.5219 18.016H2.70312V8.5933C2.70313 6.719 3.48375 4.92147 4.87328 3.59614C6.2628 2.27081 8.1474 1.52625 10.1125 1.52625C12.0776 1.52625 13.9622 2.27081 15.3517 3.59614C16.7412 4.92147 17.5219 6.719 17.5219 8.5933V18.016Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M1 18.0121H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M8.87891 22H10.8789" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
        <div>
          <ul>
            <li class="mb-1 px-10"><a class="block pl-8 py-4 text-body text-lg rounded-full hover:shadow-2xl" href="#">New tools</a></li>
            <li class="mb-1 px-10">
              <a class="flex items-center pl-8 py-4 text-body text-lg rounded-full hover:shadow-2xl" href="#">
                <span>Products</span>
                <svg class="ml-4" width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.97291 0.193232C7.20854 -0.0644107 7.58938 -0.0644107 7.82328 0.193232C8.05804 0.450875 8.05978 0.867141 7.82328 1.12478L4.42529 4.80677C4.19053 5.06441 3.81056 5.06441 3.57406 4.80677L0.176073 1.12478C-0.0586909 0.868102 -0.0586909 0.450875 0.176073 0.193232C0.411706 -0.0644107 0.792544 -0.0644107 1.02644 0.193232L4.00098 3.21284L6.97291 0.193232Z" fill="currentColor"></path>
                </svg>
              </a>
            </li>
            <li class="mb-1 px-10"><a class="block pl-8 py-4 text-body text-lg rounded-full hover:shadow-2xl" href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="mt-auto px-10">
          <button class="py-3 px-5 mt-6 w-full text-body font-body font-bold uppercase tracking-wide text-sm border-2 border-gray-200 hover:border-gray-300 border-opacity-50 rounded-full">
            <span class="block mt-px">New project</span>
          </button>
          <p class="mt-6 mb-4 text-center">
            <span class="text-sm text-darkBlueGray-400">2021 © Uinel. All rights reserved.</span>
          </p>
        </div>
      </nav>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="absolute top-5 p-6 right-5">
        <div class="absolute top-3">
          <span class="absolute w-px h-6 bg-black transform -rotate-45"></span>
          <span class="absolute w-px h-6 bg-black transform rotate-45"></span>
        </div>
      </button>
    </div>
  </div>
  <section class="pb-16 2xl:pb-20 overflow-hidden">
    <div class="relative bg-blueGray-100 rounded-b-10xl">
      <div class="container px-4 mx-auto">
        <div class="flex flex-wrap items-center -mx-4 pt-16 pb-20">
          <div class="w-full lg:w-1/2 px-4 mb-24 lg:mb-0">
            <span class="block mb-9 font-medium tracking-widest uppercase text-sm text-gray-300">Better communication and work</span>
            <h1 class="max-w-xl mb-16 font-heading font-medium text-9xl md:text-10xl xl:text-13xl leading-none">
              <span>A thousand tools for</span>
              <span class="relative inline-block">
                <span class="absolute inset-0 xl:-left-8 xl:-right-8">
                  <img class="absolute inset-0 w-full max-w-non" src="uinel-assets/elements/heroes/lines-blue1.svg" alt="">
                  <img class="absolute inset-0 mt-1 lg:mt-2 xl:ml-4 w-full max-w-none" src="uinel-assets/elements/heroes/lines-blue2.svg" alt="">
                </span>
                <span class="relative z-10">design</span>
              </span>
            </h1>
            <p class="mb-16 lg:mb-24 text-xl text-darkBlueGray-400 leading-snug">Fusce sem lectus, pretium at pellentesque a sagittis non.</p>
            <div class="flex flex-col sm:flex-row">
              <input class="py-5 px-10 text-xl text-darkBlueGray-400 placeholder-darkBlueGray-400 outline-none rounded-xl" type="text" placeholder="Enter email">
              <button class="py-5 px-10 mt-3 sm:mt-0 sm:-ml-4 font-heading font-medium tracking-tighter text-xl text-white text-center bg-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 hover:bg-blue-600 rounded-xl">Get started</button>
            </div>
          </div>
          <div class="w-full lg:w-1/2 px-4">
            <div class="relative max-w-sm xl:max-w-none mx-auto">
              <img class="relative xl:max-w-max z-10" src="uinel-assets/images/heroes/widget.png" alt="">
              <img class="absolute -top-3 -left-24 xl:max-w-max" src="uinel-assets/images/heroes/elipse.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

Hero section from Yofte

Tailwind CSS

Yofte

E-commerce hero with header navigation and promotional banner

A full-width storefront hero section with a top navigation bar containing logo, search, category links, and cart, followed by a bold discount headline, a call-to-action button, and a product image with a floating product card. A row of partner brand logos appears at the bottom.

<section class="relative bg-gray-100 overflow-x-hidden" x-data="{ mobileNavOpen: false, slideWidth: 0, activeSlide: 0, slideCount: 2 }">
  <nav class="flex justify-between bg-gray-100 border-b">
    <div class="px-12 py-8 flex w-full items-center">
      <a class="lg:mr-8 2xl:mr-20 text-3xl font-bold font-heading" href="#">
        <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
      </a>
      <div class="hidden xl:flex max-w-xs py-3 pl-8 pr-2 bg-white rounded-lg">
        <svg class="w-8 h-10 mr-2" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M17.5 17.1309L12.5042 11.9551" stroke="black" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M7.27524 13.8672C10.8789 13.8672 13.8002 10.945 13.8002 7.34033C13.8002 3.73565 10.8789 0.813477 7.27524 0.813477C3.67159 0.813477 0.750244 3.73565 0.750244 7.34033C0.750244 10.945 3.67159 13.8672 7.27524 13.8672Z" stroke="black" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        <input class="w-full border-0 focus:ring-transparent focus:outline-none py-2" type="text" placeholder="">
        <select class="pl-6 pr-6 border-0 border-l border-gray-100 focus:border-gray-100 focus:ring-transparent focus:outline-none cursor-pointer" name="" id="">
          <option>All&nbsp;items</option>
          <option>Collection</option>
          <option>Option</option>
        </select>
      </div>
      <ul class="hidden xl:flex px-4 mx-auto font-semibold font-heading">
        <li class="mr-12"><a class="hover:text-gray-600" href="#">Category</a></li>
        <li class="mr-12"><a class="hover:text-gray-600" href="#">Collection</a></li>
        <li class="mr-12"><a class="hover:text-gray-600" href="#">Story</a></li>
        <li><a class="hover:text-gray-600" href="#">Brand</a></li>
      </ul>
      <div class="hidden xl:flex items-center">
        <a class="mr-10 hover:text-gray-600" href="#">
          <svg width="23" height="20" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.4998 19.2061L2.70115 9.92527C1.92859 9.14433 1.41864 8.1374 1.24355 7.04712C1.06847 5.95684 1.23713 4.8385 1.72563 3.85053V3.85053C2.09464 3.10462 2.63366 2.45803 3.29828 1.96406C3.9629 1.47008 4.73408 1.14284 5.5483 1.00931C6.36252 0.875782 7.19647 0.939779 7.98144 1.19603C8.7664 1.45228 9.47991 1.89345 10.0632 2.48319L11.4998 3.93577L12.9364 2.48319C13.5197 1.89345 14.2332 1.45228 15.0182 1.19603C15.8031 0.939779 16.6371 0.875782 17.4513 1.00931C18.2655 1.14284 19.0367 1.47008 19.7013 1.96406C20.3659 2.45803 20.905 3.10462 21.274 3.85053V3.85053C21.7625 4.8385 21.9311 5.95684 21.756 7.04712C21.581 8.1374 21.071 9.14433 20.2984 9.92527L11.4998 19.2061Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
        <a class="flex items-center hover:text-gray-600" href="#">
          <svg class="mr-3" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="inline-block w-6 h-6 text-center bg-white rounded-full font-semibold font-heading">3</span>
        </a>
      </div>
    </div>
    <a class="hidden xl:flex items-center px-12 border-l font-semibold font-heading hover:text-gray-600" href="#">
      <svg class="mr-3" width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M16.0006 16.3154C19.1303 16.3154 21.6673 13.799 21.6673 10.6948C21.6673 7.59064 19.1303 5.07422 16.0006 5.07422C12.871 5.07422 10.334 7.59064 10.334 10.6948C10.334 13.799 12.871 16.3154 16.0006 16.3154Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M24.4225 23.8963C23.6678 22.3507 22.4756 21.0445 20.9845 20.1298C19.4934 19.2151 17.7647 18.7295 15.9998 18.7295C14.2349 18.7295 12.5063 19.2151 11.0152 20.1298C9.52406 21.0445 8.33179 22.3507 7.57715 23.8963" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <span>Sign&nbsp;In</span>
    </a>
    <a class="xl:hidden flex mr-6 items-center text-gray-900" href="#">
      <svg class="mr-2" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <span class="inline-block w-6 h-6 text-center bg-white rounded-full font-semibold font-heading">3</span>
    </a>
    <button x-on:click="mobileNavOpen = !mobileNavOpen" class="self-center mr-12 xl:hidden">
      <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1 2H19C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2ZM19 10H1C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H19C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10ZM19 5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6C0 6.26522 0.105357 6.51957 0.292893 6.70711C0.48043 6.89464 0.734784 7 1 7H19C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5Z" fill="#8594A5"></path>
      </svg>
    </button>
  </nav>
  <div class="relative container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-12 lg:mb-0 pt-20 lg:py-32">
        <div class="max-w-md">
          <div class="mb-8 overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-3">
              <div x-ref="slide1" class="flex-shrink-0 w-full p-3">
                <h2 class="mb-8 text-5xl lg:text-6xl font-semibold font-heading">Get 10% off site-wide when you spend $30 with code: new</h2>
                <p class="text-lg text-gray-600">Discover more products and inspiration.</p>
              </div>
              <div x-ref="slide2" class="flex-shrink-0 w-full p-3">
                <h2 class="mb-8 text-5xl lg:text-6xl font-semibold font-heading">Enjoy 10% off on your entire purchase when you spend $30 or more</h2>
                <p class="text-lg text-gray-600">Discover more products and inspiration.</p>
              </div>
            </div>
          </div>
          <a class="inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-6 px-8 rounded-md uppercase transition duration-200" href="#">Shop Now</a>
        </div>
      </div>
      <div class="relative w-full md:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="hidden lg:block absolute top-0 transform translate-y-1/2 right-0 w-1">
          <a x-on:click.prevent="activeSlide = 0, slideWidth = $refs['slide1'].offsetWidth * 0" :class="{'bg-blue-600': activeSlide == 0, 'bg-gray-300': activeSlide !== 0}" class="block w-1/2 h-40 bg-blue-600" href="#"></a>
          <a x-on:click.prevent="activeSlide = 1, slideWidth = $refs['slide2'].offsetWidth * 1" :class="{'bg-blue-600': activeSlide == 1, 'bg-gray-300': activeSlide !== 1}" class="block w-1/2 h-40 bg-gray-300" href="#"></a>
        </div>
        <div class="absolute bottom-1/2 -mb-24 lg:right-6 inline-block bg-white rounded-lg" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 2 }">
          <div class="flex p-3">
            <div class="w-52 pt-5 px-4 lg:px-9">
              <div class="overflow-hidden">
                <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-3">
                  <div x-ref="slide1" class="flex-shrink-0 w-full p-3">
                    <h3 class="mb-2 text-xl font-bold font-heading w-32">Set gym V2G in&nbsp;colors</h3>
                    <p class="mb-4 lg:mb-0 text-lg font-semibold font-heading text-blue-500">$6.40</p>
                  </div>
                  <div x-ref="slide2" class="flex-shrink-0 w-full p-3">
                    <h3 class="mb-2 text-xl font-bold font-heading w-32">Gym set V1G in&nbsp;colors</h3>
                    <p class="mb-4 lg:mb-0 text-lg font-semibold font-heading text-blue-500">$14.30</p>
                  </div>
                </div>
              </div>
              <a x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" :class="{'hidden': activeSlide == 0 }" class="lg:absolute lg:-left-1 bottom-0 flex hidden items-center justify-center w-12 h-12 lg:-mb-6 bg-orange-300 hover:bg-orange-400 text-white rounded-md" href="#">
                <svg class="transform rotate-180" width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M4.97656 6.00252L0.851562 1.87752L2.02957 0.699219L7.33258 6.00252L2.02957 11.3058L0.851562 10.1275L4.97656 6.00252Z" fill="white"></path>
                </svg>
              </a>
              <a x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="lg:absolute bottom-0 flex items-center justify-center w-12 h-12 lg:-mb-6 bg-orange-300 hover:bg-orange-400 text-white rounded-md" href="#">
                <svg class="w-2 h-4" width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M4.97656 6.00252L0.851562 1.87752L2.02957 0.699219L7.33258 6.00252L2.02957 11.3058L0.851562 10.1275L4.97656 6.00252Z" fill="white"></path>
                </svg>
              </a>
            </div>
            <div class="w-auto">
              <img class="h-full lg:h-36 rounded-xl object-cover" src="yofte-assets/images/pexels-photo.png" alt="">
            </div>
          </div>
        </div>
        <img class="mx-auto h-96 lg:h-auto" src="yofte-assets/images/water-bottles-mockup.png" alt="">
      </div>
    </div>
    <div class="w-full lg:w-5/6 xl:absolute left-0 bottom-0 right-0 bg-white py-12 px-8 lg:ml-auto">
      <div class="flex flex-wrap items-center justify-center -mx-2 -mb-12">
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/exxon.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/ea-sports.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/eurosport.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/nike.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/aol.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 px-2 mb-12">
          <img class="mx-auto h-6" src="yofte-assets/brands/north-face.svg" alt="">
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-8">
        <a class="mr-auto text-3xl font-bold font-heading" href="#">
          <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-2 w-2 text-gray-500 cursor-pointer" width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.00002 1L1 9.00002M1.00003 1L9.00005 9.00002" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div class="flex mb-8 justify-between">
        <a class="inline-flex items-center font-semibold font-heading" href="#">
          <svg class="mr-3" width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16.0006 16.3154C19.1303 16.3154 21.6673 13.799 21.6673 10.6948C21.6673 7.59064 19.1303 5.07422 16.0006 5.07422C12.871 5.07422 10.334 7.59064 10.334 10.6948C10.334 13.799 12.871 16.3154 16.0006 16.3154Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M24.4225 23.8963C23.6678 22.3507 22.4756 21.0445 20.9845 20.1298C19.4934 19.2151 17.7647 18.7295 15.9998 18.7295C14.2349 18.7295 12.5063 19.2151 11.0152 20.1298C9.52406 21.0445 8.33179 22.3507 7.57715 23.8963" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span>Sign&nbsp;In</span>
        </a>
        <div class="flex items-center">
          <a class="mr-10" href="#">
            <svg width="23" height="20" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.4998 19.2061L2.70115 9.92527C1.92859 9.14433 1.41864 8.1374 1.24355 7.04712C1.06847 5.95684 1.23713 4.8385 1.72563 3.85053V3.85053C2.09464 3.10462 2.63366 2.45803 3.29828 1.96406C3.9629 1.47008 4.73408 1.14284 5.5483 1.00931C6.36252 0.875782 7.19647 0.939779 7.98144 1.19603C8.7664 1.45228 9.47991 1.89345 10.0632 2.48319L11.4998 3.93577L12.9364 2.48319C13.5197 1.89345 14.2332 1.45228 15.0182 1.19603C15.8031 0.939779 16.6371 0.875782 17.4513 1.00931C18.2655 1.14284 19.0367 1.47008 19.7013 1.96406C20.3659 2.45803 20.905 3.10462 21.274 3.85053V3.85053C21.7625 4.8385 21.9311 5.95684 21.756 7.04712C21.581 8.1374 21.071 9.14433 20.2984 9.92527L11.4998 19.2061Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <a class="flex items-center" href="#">
            <svg class="mr-3" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span class="inline-block w-6 h-6 text-center bg-gray-100 rounded-full font-semibold font-heading">3</span>
          </a>
        </div>
      </div>
      <input class="block mb-10 py-5 px-8 bg-gray-100 rounded-md border-transparent focus:ring-blue-300 focus:border-blue-300 focus:outline-none" type="search" placeholder="Search">
      <ul class="text-3xl font-bold font-heading">
        <li class="mb-8"><a href="#">Category</a></li>
        <li class="mb-8"><a href="#">Collection</a></li>
        <li class="mb-8"><a href="#">Story</a></li>
        <li><a href="#">Brand</a></li>
      </ul>
    </nav>
  </div>
</section>

Hero section from Shopal

Tailwind CSS

Shopal

Shopal Ecommerce Hero Banner with Product Photos

A light hero section for the Shopal storefront featuring a bold centered headline, supporting text, and two call-to-action buttons, flanked by product photographs of a mouse, phone, headphones, and keyboard on blue decorative panels. The layout uses a centered stack with a top navigation bar and carousel dots below.

<section class="relative pb-32 overflow-hidden" x-data="{ mobileNavOpen: false, slideWidth: 0, activeSlide: 0, slideCount: 6 }">
  <nav class="relative z-10">
    <div class="flex h-20 py-6 px-6 items-center justify-between bg-transparent relative">
      <a class="inline-block text-2xl font-bold mr-10" href="#">
        <img src="shopal-assets/logos/shopal-logo.svg" alt="">
      </a>
      <ul class="hidden lg:flex items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
        <li class="mr-6">
          <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
            <span class="mr-2">Category</span>
            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
            </svg>
            <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
              <div class="p-2 bg-white border-2 border-black rounded-md shadow">
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a>
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 2</a>
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 3</a>
              </div>
            </div>
          </button>
        </li>
        <li class="mr-6">
          <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
            <span class="mr-2">Collection</span>
            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
            </svg>
            <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
              <div class="p-2 bg-white border-2 border-black rounded-md shadow">
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a>
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 2</a>
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 3</a>
              </div>
            </div>
          </button>
        </li>
        <li class="mr-6"><a class="inline-block font-bold text-gray-900 hover:text-indigo-500" href="#">Story</a></li>
        <li><a class="inline-block font-bold text-gray-900 hover:text-indigo-500" href="#">Brand</a></li>
      </ul>
      <div class="inline-flex items-center">
        <div class="hidden lg:flex">
          <a class="inline-block mr-6 text-green-500 hover:text-orange-500 transition duration-200" href="#">
            <svg width="20" height="24" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.44 0.100006C12.63 0.100006 11.01 0.980006 10 2.33001C8.99 0.980006 7.37 0.100006 5.56 0.100006C2.49 0.100006 0 2.60001 0 5.69001C0 6.88001 0.19 7.98001 0.52 9.00001C2.1 14 6.97 16.99 9.38 17.81C9.72 17.93 10.28 17.93 10.62 17.81C13.03 16.99 17.9 14 19.48 9.00001C19.81 7.98001 20 6.88001 20 5.69001C20 2.60001 17.51 0.100006 14.44 0.100006Z" fill="currentColor"></path>
            </svg>
          </a>
          <a class="inline-block mr-6 text-green-500 hover:text-orange-500 transition duration-200" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.24 5.58H18.84L15.46 2.2C15.19 1.93 14.75 1.93 14.47 2.2C14.2 2.47 14.2 2.91 14.47 3.19L16.86 5.58H7.14L9.53 3.19C9.8 2.92 9.8 2.48 9.53 2.2C9.26 1.93 8.82 1.93 8.54 2.2L5.17 5.58H4.77C3.87 5.58 2 5.58 2 8.14C2 9.11 2.2 9.75 2.62 10.17C2.86 10.42 3.15 10.55 3.46 10.62C3.75 10.69 4.06 10.7 4.36 10.7H19.64C19.95 10.7 20.24 10.68 20.52 10.62C21.36 10.42 22 9.82 22 8.14C22 5.58 20.13 5.58 19.24 5.58Z" fill="currentColor"></path>
              <path d="M19.0499 12H4.86991C4.24991 12 3.77991 12.55 3.87991 13.16L4.71991 18.3C4.99991 20.02 5.74991 22 9.07991 22H14.6899C18.0599 22 18.6599 20.31 19.0199 18.42L20.0299 13.19C20.1499 12.57 19.6799 12 19.0499 12ZM10.6099 18.45C10.6099 18.84 10.2999 19.15 9.91991 19.15C9.52991 19.15 9.21991 18.84 9.21991 18.45V15.15C9.21991 14.77 9.52991 14.45 9.91991 14.45C10.2999 14.45 10.6099 14.77 10.6099 15.15V18.45ZM14.8899 18.45C14.8899 18.84 14.5799 19.15 14.1899 19.15C13.8099 19.15 13.4899 18.84 13.4899 18.45V15.15C13.4899 14.77 13.8099 14.45 14.1899 14.45C14.5799 14.45 14.8899 14.77 14.8899 15.15V18.45Z" fill="currentColor"></path>
            </svg>
          </a>
          <a class="inline-block mr-6 text-green-500 hover:text-orange-500 transition duration-200" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.01 20.02C15.9861 20.02 20.02 15.9861 20.02 11.01C20.02 6.03391 15.9861 2 11.01 2C6.03391 2 2 6.03391 2 11.01C2 15.9861 6.03391 20.02 11.01 20.02Z" fill="currentColor"></path>
              <path d="M21.9901 18.95C21.6601 18.34 20.9601 18 20.0201 18C19.3101 18 18.7001 18.29 18.3401 18.79C17.9801 19.29 17.9001 19.96 18.1201 20.63C18.5501 21.93 19.3001 22.22 19.7101 22.27C19.7701 22.28 19.8301 22.28 19.9001 22.28C20.3401 22.28 21.0201 22.09 21.6801 21.1C22.2101 20.33 22.3101 19.56 21.9901 18.95Z" fill="currentColor"></path>
            </svg>
          </a>
          <a class="inline-block mr-6 text-green-500 hover:text-orange-500 transition duration-200" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" fill="currentColor"></path>
              <path d="M11.9999 14.5C6.98991 14.5 2.90991 17.86 2.90991 22C2.90991 22.28 3.12991 22.5 3.40991 22.5H20.5899C20.8699 22.5 21.0899 22.28 21.0899 22C21.0899 17.86 17.0099 14.5 11.9999 14.5Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex p-1 items-center lg:text-green-500 hover:text-orange-500">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>
  <div class="hidden lg:block absolute bottom-0 left-0 max-w-2xs lg:max-w-sm">
    <img class="relative img-fluid w-64 xl:w-96 2xl:w-112" src="shopal-assets/background/purple-bg-shape2.png" alt="">
    <img class="absolute top-0 left-0 w-64 2xl:w-80 -mt-16 ml-6 img-fluid" src="shopal-assets/images/placeholder-photo1.png" alt="">
  </div>
  <div class="hidden lg:block max-w-2xs lg:max-w-md absolute top-0 right-0">
    <img class="relative img-fluid w-72 xl:w-96 2xl:w-112" src="shopal-assets/background/purple-bg-shape.png" alt="">
    <img class="absolute bottom-0 right-0 w-64 2xl:w-88 mr-6 -mb-24 img-fluid" src="shopal-assets/images/placeholder-photo2.png" alt="">
  </div>
  <div class="container px-4 pt-20 lg:pt-40 mx-auto relative">
    <div class="max-w-md xl:max-w-lg 2xl:max-w-xl mx-auto text-center">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                <div x-ref="slide1" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Take care of your performance every day.</h1>
                    <p class="max-w-md mx-auto text-lg font-bold mb-12">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Elevating Your Brand Every Day.</h1>
                    <p class="max-w-md mx-auto text-lg font-bold mb-12">Crafting a Memorable Brand Identity Through Daily Dedication and Sustained Effort, Building Trust and Resonance with Your Audience Over Time.</p>
                </div>
                <div x-ref="slide3" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Cultivating Excellence in Performance.</h1>
                    <p class="max-w-md mx-auto text-lg font-bold mb-12">Harnessing Daily Efforts to Nurture a Brand That Captivates, Infusing Each Interaction with Authenticity and Quality to Forge Lasting Connections.</p>
                </div>
                <div x-ref="slide4" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Daily Practices for Brand Development.</h1>
                    <p class="max-w-md mx-auto text-lg font-bold mb-12">Sculpting a Resonant Brand Image through Consistent Effort, Fostering Growth and Recognition Through Daily Refinement and Attention to Detail.</p>
                </div>
                <div x-ref="slide5" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Sustaining Excellence.</h1>
                    <p class="max-w-md mx-auto text-lg font-bold mb-12">Nurturing Your Brand’s Reputation Through Daily Commitment, Cultivating a Culture of Excellence and Reliability to Inspire Loyalty and Confidence.</p>
                </div>
                <div x-ref="slide6" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">The Path to a Beloved Brand.</h1>
                    <p class="max-w-md mx-auto text-lg font-bold mb-12">Embracing Daily Rituals to Cultivate an Exceptional Brand Experience, Infusing Every Interaction with Care and Purpose to Build Lasting Relationships and Recognition.</p>
                </div>
            </div>
        </div>
      <div class="sm:flex mb-24 items-center justify-center">
        <a class="group relative inline-block h-12 w-full sm:w-48 mb-2 sm:mb-0 sm:mr-6 bg-blueGray-900 rounded-md" href="#">
          <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
            <div class="flex h-full w-full items-center justify-center bg-green-600 border-2 border-black rounded-md">
              <span class="text-base font-black text-black">Check our Catalog</span>
            </div>
          </div>
        </a>
        <a class="group relative inline-block h-12 w-full sm:w-36 bg-blueGray-900 rounded-md" href="#">
          <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
            <div class="flex h-full w-full items-center justify-center bg-orange-500 border-2 border-black rounded-md">
              <span class="text-base font-black text-white">Start Buying</span>
            </div>
          </div>
        </a>
      </div>
      <div class="flex items-center justify-center">
        <button x-on:click="activeSlide = 0, slideWidth = $refs['slide1'].offsetWidth * 0" class="inline-block mr-3 w-2 h-2 border-2 border-black rounded-full bg-green-500 hover:bg-green-500" :class="{ 'bg-green-500': activeSlide == 0 }"></button>
        <button x-on:click="activeSlide = 1, slideWidth = $refs['slide2'].offsetWidth * 1" class="inline-block mr-3 w-2 h-2 border-2 border-black rounded-full hover:bg-green-500" :class="{ 'bg-green-500': activeSlide == 1 }"></button>
        <button x-on:click="activeSlide = 2, slideWidth = $refs['slide3'].offsetWidth * 2" class="inline-block mr-3 w-2 h-2 border-2 border-black rounded-full hover:bg-green-500" :class="{ 'bg-green-500': activeSlide == 2 }"></button>
        <button x-on:click="activeSlide = 3, slideWidth = $refs['slide4'].offsetWidth * 3" class="inline-block mr-3 w-2 h-2 border-2 border-black rounded-full hover:bg-green-500" :class="{ 'bg-green-500': activeSlide == 3 }"></button>
        <button x-on:click="activeSlide = 4, slideWidth = $refs['slide5'].offsetWidth * 4" class="inline-block mr-3 w-2 h-2 border-2 border-black rounded-full hover:bg-green-500" :class="{ 'bg-green-500': activeSlide == 4 }"></button>
        <button x-on:click="activeSlide = 5, slideWidth = $refs['slide6'].offsetWidth * 5" class="inline-block mr-3 w-2 h-2 border-2 border-black rounded-full hover:bg-green-500" :class="{ 'bg-green-500': activeSlide == 5 }"></button>
      </div>
    </div>
  </div>
  <div class="lg:hidden flex flex-wrap justify-between mt-32">
    <div class="w-full md:w-1/2 lg:w-1/3 mb-8 sm:mb-0">
      <div class="relative max-w-xs">
        <img class="relative img-fluid w-full" src="shopal-assets/background/purple-bg-shape2.png" alt="">
        <img class="absolute top-0 left-0 -mt-16 px-4 md:ml-6 img-fluid" src="shopal-assets/images/placeholder-photo1.png" alt="">
      </div>
    </div>
    <div class="w-full md:w-1/2 lg:w-1/3">
      <div class="relative max-w-xs ml-auto">
        <img class="relative img-fluid w-full" src="shopal-assets/background/purple-bg-shape.png" alt="">
        <img class="absolute bottom-0 right-0 px-4 md:mr-6 -mb-24 img-fluid" src="shopal-assets/images/placeholder-photo2.png" alt="">
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 backdrop-blur-xl backdrop-filter bg-gray-900 bg-opacity-80"></div>
    <nav class="relative pt-7 pb-8 bg-white h-full overflow-y-auto">
      <div class="flex flex-col px-6 h-full">
        <a class="inline-block ml-4 mb-7" href="#">
          <img src="shopal-assets/logos/shopal-logo.svg" alt="">
        </a>
        <ul class="w-full mb-auto pb-16">
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Category</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Pages</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Products</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6"><a class="inline-block pl-1 font-bold" href="#">Blog</a></li>
          <li class="mb-6"><a class="inline-block pl-1 font-bold" href="#">Shop</a></li>
          <li><a class="inline-block pl-1 font-bold" href="#">Contact</a></li>
        </ul>
        <div class="w-full">
          <button class="block w-full py-4 px-4 mb-4 font-bold border-2 border-gray-900 rounded-md shadow">Log in</button>
          <button class="block w-full py-4 px-4 mb-8 font-bold border-2 border-gray-900 rounded-md shadow text-gray-900 bg-green-500">Sign up</button>
          <p class="pl-2 text-sm">2022 © Shuffle</p>
        </div>
      </div>
    </nav>
  </div>
</section>

Hero section from Nigodo

Tailwind CSS

Nigodo

Nigodo Hero Section with Email Signup and Palm Tree Image

A marketing hero section for the Nigodo SaaS platform featuring a top navigation bar, a bold headline with supporting text, an email input with a Get Started button, and a rounded palm tree photograph on a teal background. The layout splits content into a left text column and a right image panel.

<section class="relative pb-24" x-data="{ mobileNavOpen: false }">
  <img class="hidden md:block absolute top-0 right-0 w-36 sm:w-1/2 lg:w-auto lg:h-full object-contain" src="nigodo-assets/background/background-green-right.svg" alt="">
  <nav class="flex mb-24 justify-between items-center py-6 px-10 relative">
    <a class="text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block 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 xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>
    <div class="hidden xl:flex items-center"><a class="inline-block mr-6 text-lg font-extrabold hover:text-indigo-800" href="#">Log In</a><a class="inline-block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Sign Up</a></div>
  </nav>
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="lg:max-w-lg">
          <span class="text-xl md:text-2xl font-extrabold text-green-500">Section label</span>
          <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold font-heading mt-1 mb-6">Business is only as good as its tools.</h1>
          <p class="text-xl md:text-2xl font-extrabold leading-8 mb-10">We’re different. Nogodo is the only SaaS business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
          <div class="flex flex-wrap -mx-2 mb-6">
            <div class="w-full md:w-auto lg:w-7/12 px-2 mb-2 md:mb-0">
              <input class="block w-full p-4 text-lg font-extrabold placeholder-indigo-900 shadow border-2 border-indigo-900 rounded" type="email" placeholder="hello@shuffle.dev">
            </div>
            <div class="w-full md:w-auto lg:w-5/12 px-2"><a class="inline-flex w-full md:w-auto items-center justify-center h-full py-4 px-5 leading-6 text-md text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 rounded transition duration-200" href="#">Get Started</a></div>
          </div>
          <div class="flex flex-wrap items-center">
            <div class="flex mr-8 items-center">
              <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-green.svg" alt="">
              <span class="text-lg font-extrabold">No Credit Card required</span>
            </div>
            <div class="flex items-center">
              <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-green.svg" alt="">
              <span class="text-lg font-extrabold">Free updates</span>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <img class="block h-128 lg:h-140 w-full xl:max-w-lg object-cover border-3 border-indigo-900 rounded-2xl shadow-lg" src="nigodo-assets/headers/palms.jpg" alt="">
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden relative z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="fixed top-0 left-0 bottom-0 flex flex-col w-full md:w-5/6 max-w-sm py-8 px-8 bg-green-200 border-r overflow-y-auto">
      <div class="flex items-center mb-8">
        <a class="mr-auto text-2xl font-bold leading-none" href="#">
          <img class="h-6" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-6 w-6 text-gray-500 cursor-pointer hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <div class="my-auto">
        <ul class="py-10">
          <li class="mb-1"><a class="block p-4 text-lg font-extrabold hover:bg-green-300 rounded" href="#">Product</a></li>
          <li class="mb-1"><a class="block p-4 text-lg font-extrabold hover:bg-green-300 rounded" href="#">Features</a></li>
          <li class="mb-1"><a class="block p-4 text-lg font-extrabold hover:bg-green-300 rounded" href="#">Pricing</a></li>
          <li class="mb-1"><a class="block p-4 text-lg font-extrabold hover:bg-green-300 rounded" href="#">Resources</a></li>
        </ul>
      </div>
      <div><a class="block mb-6 text-center leading-6 text-lg font-extrabold hover:text-indigo-800" href="#">Log In</a><a class="block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Sign Up</a></div>
    </nav>
  </div>
</section>

Hero section from Atis

Tailwind CSS

Atis

Hero Section with Navigation Header and Office Conference Room Image

A landing page hero with a navigation bar at the top, a bold two-line headline with green accent text, supporting paragraph, and primary and secondary call-to-action buttons on the left. A large rounded photograph of a conference room sits on the right with decorative green shapes and dot patterns.

<section class="skewed-bottom-right" x-data="{ mobileNavOpen: false }">
  <nav class="relative px-6 py-6 flex justify-between items-center bg-gray-50">
    <a class="text-3xl font-bold leading-none" href="#">
      <img class="h-12" src="atis-assets/logo/atis/atis-mono-black.svg" alt="" width="auto">
    </a>
    <div class="lg:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center text-gray-400 p-3">
        <svg class="block h-4 w-4 fill-current" 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:mx-auto lg:flex lg:items-center lg:w-auto lg:space-x-6">
      <li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Start</a></li>
      <li class="text-gray-800">
        <svg class="w-4 h-4 current-fill" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
        </svg>
      </li>
      <li><a class="text-sm text-green-600 font-bold" href="#">About Us</a></li>
      <li class="text-gray-800">
        <svg class="w-4 h-4 current-fill" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
        </svg>
      </li>
      <li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Services</a></li>
      <li class="text-gray-800">
        <svg class="w-4 h-4 current-fill" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
        </svg>
      </li>
      <li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Platform</a></li>
      <li class="text-gray-800">
        <svg class="w-4 h-4 current-fill" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
        </svg>
      </li>
      <li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Testimonials</a></li>
    </ul>
    <a class="hidden lg:inline-block py-2 px-6 bg-white hover:bg-gray-50 text-sm text-green-600 font-bold rounded-l-xl rounded-t-xl transition duration-200" href="#">Contact Us</a>
  </nav>
  <div class="bg-gray-50 pt-12 lg:pt-20 pb-20 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-12 md:mb-20 lg:mb-0 flex items-center">
          <div class="w-full text-center lg:text-left">
            <div class="max-w-md mx-auto lg:mx-0">
              <h2 class="mb-3 text-4xl lg:text-5xl font-bold font-heading">
                <span>Build &amp; Launch without</span>
                <span class="text-green-600">problems</span>
              </h2>
            </div>
            <div class="max-w-sm mx-auto lg:mx-0">
              <p class="mb-6 text-gray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
              <div><a class="inline-block mb-3 lg:mb-0 lg:mr-3 w-full lg:w-auto py-2 px-6 leading-loose bg-green-600 hover:bg-green-700 text-white font-semibold rounded-l-xl rounded-t-xl transition duration-200" href="#">Get Started</a><a class="inline-block w-full lg:w-auto py-2 px-6 leading-loose font-semibold bg-white hover:bg-gray-50 rounded-l-xl rounded-t-xl transition duration-200" href="#">How it works</a></div>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4 flex items-center justify-center">
          <div class="relative" style="z-index: 0;">
            <img class="h-128 w-full max-w-lg object-cover rounded-3xl md:rounded-br-none" src="https://images.unsplash.com/photo-1462826303086-329426d1aef5?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
            <img class="hidden md:block absolute" style="top:-2rem; right: 3rem; z-index: -1;" src="atis-assets/elements/green-dark-up.svg" alt="">
            <img class="hidden md:block absolute" style="bottom:-2rem; right: -2rem; z-index: -1;" src="atis-assets/elements/wing-green-down.svg" alt="">
            <img class="hidden md:block absolute" style="top:3rem; right: -3rem; z-index: -1;" src="atis-assets/elements/bullets-gray-right.svg" alt="">
            <img class="hidden md:block absolute" style="bottom:2.5rem; left: -4.5rem; z-index: -1;" src="atis-assets/elements/bullets-gray-left.svg" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 0 0 10"></polygon>
    </svg>
  </div>
  <div :class="{ 'hidden': !mobileNavOpen }" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="relative flex flex-col py-6 px-6 h-full w-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-8">
        <a class="mr-auto text-3xl font-bold leading-none" href="#">
          <img class="h-10" src="atis-assets/logo/atis/atis-mono-black.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-6 w-6 text-gray-400 cursor-pointer hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <div>
        <ul>
          <li class="mb-1"><a class="block p-4 text-sm font-semibold text-gray-400 hover:bg-green-50 hover:text-green-600 rounded" href="#">Start</a></li>
          <li class="mb-1"><a class="block p-4 text-sm font-semibold text-gray-400 hover:bg-green-50 hover:text-green-600 rounded" href="#">About Us</a></li>
          <li class="mb-1"><a class="block p-4 text-sm font-semibold text-gray-400 hover:bg-green-50 hover:text-green-600 rounded" href="#">Services</a></li>
          <li class="mb-1"><a class="block p-4 text-sm font-semibold text-gray-400 hover:bg-green-50 hover:text-green-600 rounded" href="#">Platform</a></li>
          <li class="mb-1"><a class="block p-4 text-sm font-semibold text-gray-400 hover:bg-green-50 hover:text-green-600 rounded" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="mt-auto">
        <div class="pt-6"><a class="block px-4 py-3 mb-3 leading-loose text-xs text-center font-semibold leading-none bg-gray-50 hover:bg-gray-100 rounded-l-xl rounded-t-xl" href="#">Sign In</a><a class="block px-4 py-3 mb-2 leading-loose text-xs text-center text-white font-semibold bg-green-600 hover:bg-green-700 rounded-l-xl rounded-t-xl" href="#">Sign Up</a></div>
        <p class="my-4 text-xs text-center text-gray-400">
          <span>© 2020 All rights reserved.</span>
        </p>
        <div class="text-center">
          <a class="inline-block px-1" href="#">
            <img src="atis-assets/social/facebook.svg" alt="">
          </a>
          <a class="inline-block px-1" href="#">
            <img src="atis-assets/social/twitter.svg" alt="">
          </a>
          <a class="inline-block px-1" href="#">
            <img src="atis-assets/social/instagram.svg" alt="">
          </a>
        </div>
      </div>
    </nav>
  </div>
</section>

Hero section from Pstls.

Tailwind CSS

Pstls.

Hero Section with Serif Headline, Photo, and Details CTA

A marketing hero section with a top navigation bar, a large serif headline with a lavender accent word, a short paragraph, a black Details button, and a photo of a smiling person on the left. Social links are placed vertically on the left edge and carousel-style pagination dots appear below the image.

<section class="pb-24 relative" x-data="{ mobileNavOpen: false, slideWidth: 0, activeSlide: 0, slideCount: 4 }">
  <div class="absolute top-0 left-0 hidden xl:block h-full bg-yellow-100 max-w-sm w-full" style="background-image: url('pstls-assets/images/headers/shadows-color.png'); background-repeat: no-repeat; background-size: cover;" ></div>
  <nav class="relative py-10"   data-config-="data-config-">
    <div class="container px-4 mx-auto">
      <div class="flex items-center justify-between relative"><a class="inline-block" href="#"  ><img src="pstls-assets/logos/pstls-logo-md.svg" alt="" width="116"></a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#000"></path>
          </svg>
        </button>
        <div class="hidden lg:block absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
          <ul class="inline-flex">
            <li class="mr-8"><a class="inline-block font-bold hover:text-gray-900" aria-current="page" href="#" >Home</a></li>
            <li class="mr-8"><a class="inline-block font-bold hover:text-gray-900" href="#" >Products</a></li>
            <li class="mr-8"><a class="inline-block font-bold hover:text-gray-900" href="#" >Resources</a></li>
            <li><a class="inline-block font-bold hover:text-gray-900" href="#" >Pricing</a></li>
          </ul>
        </div>
        <div class="hidden lg:block ml-auto"><a class="inline-block mr-8 font-bold hover:text-gray-900" href="#" >Log In</a><a class="inline-block px-8 py-3 text-white font-bold bg-black hover:bg-gray-900 transition duration-200" href="#" >Sign Up</a></div>
      </div>
    </div>
  </nav>
  
  <div class="relative container px-4 mx-auto">
    <div class="flex flex-wrap justify-between">
      <div class="relative hidden lg:flex items-center top-0 left-0 -ml-32 pr-32 w-full lg:w-auto">
        <div class="absolute flex" style="transform: rotate(-90deg);"><a class="mr-14 text-xs font-bold text-black" href="#" >Facebook</a><a class="mr-14 text-xs font-bold text-black" href="#" >Twitter</a><a class="text-xs font-bold text-black" href="#" >Instagram</a></div>
      </div>
      <div class="w-full lg:w-5/12 md:flex lg:hidden items-center mb-8">
        <ul class="max-w-lg mx-auto text-center flex justify-center md:justify-between">
          <li class="mr-6"><a class="text-xs text-black font-bold" href="#" >Twitter</a></li>
          <li class="mr-6"><a class="text-xs text-black font-bold" href="#" >Facebook</a></li>
          <li><a class="text-xs text-black font-bold" href="#" >Instagram</a></li>
        </ul>
      </div>
      <div class="w-full lg:w-5/12 mb-6">
        <div class="flex flex-col items-center">
          
          <div class="mb-9"><img src="pstls-assets/images/headers/header-1-woman.jpg" alt="" ></div>
          <ul class="flex justify-center items-center">
            <li class="mr-3"><button x-on:click="activeSlide = 0, slideWidth = $refs['slide1'].offsetWidth * 0" class="inline-block w-2 h-2 bg-black rounded-full" :class="{ 'bg-black': activeSlide == 0, 'bg-gray-100': activeSlide != 0 }"></button></li>
            <li class="mr-3"><button x-on:click="activeSlide = 1, slideWidth = $refs['slide2'].offsetWidth * 1" class="inline-block w-2 h-2 bg-gray-100 rounded-full" :class="{ 'bg-black': activeSlide == 1, 'bg-gray-100': activeSlide != 1 }"></button></li>
            <li class="mr-3"><button x-on:click="activeSlide = 2, slideWidth = $refs['slide3'].offsetWidth * 2" class="inline-block w-2 h-2 bg-gray-100 rounded-full" :class="{ 'bg-black': activeSlide == 2, 'bg-gray-100': activeSlide != 2 }"></button></li>
            <li><button x-on:click="activeSlide = 3, slideWidth = $refs['slide4'].offsetWidth * 3" class="inline-block w-2 h-2 bg-gray-100 rounded-full" :class="{ 'bg-black': activeSlide == 3, 'bg-gray-100': activeSlide != 3 }"></button></li>
          </ul>
        </div>
      </div>
      <div class="w-full lg:w-5/12 flex items-center">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-3">
                <div x-ref="slide1" class="flex-shrink-0 w-full p-3">
                    <div class="max-w-lg mx-auto">
                      <h1 class="text-5xl lg:text-6xl font-heading mb-6"><span >Created for</span> <span class="text-indigo-200" >ambitious</span> <span >businesses.</span></h1>
                      <p class="leading-8 md:max-w-md xl:max-w-sm mb-6" >Pstls. Kit uses attractive colors and modern typography to make you look good, no matter what business you’re in.</p>
                      <div class="ml-auto"><a class="inline-block w-full md:w-auto text-center px-8 py-3 text-white font-bold bg-black hover:bg-gray-900 transition duration-200" href="#" >Details</a></div>
                    </div>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full p-3">
                    <div class="max-w-lg mx-auto">
                      <h1 class="text-5xl lg:text-6xl font-heading mb-6"><span >Revolutionize</span> <span class="text-indigo-200" >Your Presence</span> <span >with AuraPlus.</span></h1>
                      <p class="leading-8 md:max-w-md xl:max-w-sm mb-6" >AuraPlus combines contemporary design elements with captivating visuals, ensuring your brand leaves a lasting impression, regardless of your industry.</p>
                      <div class="ml-auto"><a class="inline-block w-full md:w-auto text-center px-8 py-3 text-white font-bold bg-black hover:bg-gray-900 transition duration-200" href="#" >Details</a></div>
                    </div>
                </div>
                <div x-ref="slide3" class="flex-shrink-0 w-full p-3">
                    <div class="max-w-lg mx-auto">
                      <h1 class="text-5xl lg:text-6xl font-heading mb-6"><span >Elevate Your</span> <span class="text-indigo-200" >Brand Aesthetic</span> <span >with ChromaPro.</span></h1>
                      <p class="leading-8 md:max-w-md xl:max-w-sm mb-6" >ChromaPro's sleek design and vibrant color palette elevate your brand's image, ensuring you stand out in any industry.</p>
                      <div class="ml-auto"><a class="inline-block w-full md:w-auto text-center px-8 py-3 text-white font-bold bg-black hover:bg-gray-900 transition duration-200" href="#" >Details</a></div>
                    </div>
                </div>
                <div x-ref="slide4" class="flex-shrink-0 w-full p-3">
                    <div class="max-w-lg mx-auto">
                      <h1 class="text-5xl lg:text-6xl font-heading mb-6"><span >Empower</span> <span class="text-indigo-200" >Your Business</span> <span >with PrismTech.</span></h1>
                      <p class="leading-8 md:max-w-md xl:max-w-sm mb-6" >PrismTech's dynamic design and bold typography empower your brand to command attention and project professionalism across all sectors.</p>
                      <div class="ml-auto"><a class="inline-block w-full md:w-auto text-center px-8 py-3 text-white font-bold bg-black hover:bg-gray-900 transition duration-200" href="#" >Details</a></div>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="fixed top-0 left-0 bottom-0 w-3/4 max-w-xs z-50"   data-config-="data-config-">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-black bg-opacity-75"></div>
    <nav class="relative flex flex-col h-full p-8 bg-white">
      <div class="flex items-center justify-between mb-12">
        <a class="items-center" href="#"  ><img src="pstls-assets/logos/pstls-logo-md.svg" alt="" width="102"></a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-block focus:outline-none" type="button" aria-label="Close"><img src="pstls-assets/images/navigations/x2.svg" alt=""></button>
      </div>
      <div>
        <ul>
          <li class="py-3"><a class="inline-block font-bold hover:text-gray-900" href="#" >Home</a></li>
          <li class="py-3"><a class="inline-block font-bold hover:text-gray-900" href="#" >Products</a></li>
          <li class="py-3"><a class="inline-block font-bold hover:text-gray-900" href="#" >Resources</a></li>
          <li class="py-3"><a class="inline-block font-bold hover:text-gray-900" href="#" >Pricing</a></li>
        </ul>
      </div>
      <div class="mt-auto">
        <div><a class="block py-3 text-center font-bold" href="#" >Log In</a><a class="block px-8 py-3 text-center text-white font-bold bg-black hover:bg-gray-900" href="#" >Sign Up</a></div>
      </div>
    </nav>
  </div>
</section>

Hero section from BoldUI

Tailwind CSS

BoldUI

Dark Hero Section with Bold Headline and Yellow CTA

A dark landing-page hero with a large uppercase headline, a yellow "Start for free" call-to-action button, and a circular-masked portrait photo on the right. A logo row of brand names along the bottom suggests social proof.

<section class="relative bg-black overflow-hidden" x-data="{ mobileNavOpen: false }">
  <div class="relative w-2/3 ml-auto">
    <div class="absolute top-0 left-0 mt-20 lg:-ml-0 rounded-full h-20 lg:h-96 xl:h-160 w-80 md:w-96 lg:w-160">
      <img class="object-contain transform scale-200" src="boldui-assets/elements/shadow-blue-full.svg" alt="">
    </div>
    <div class="absolute top-1/2 right-0 -mr-64 mt-40 lg:mt-20 rounded-full h-20 lg:h-96 xl:h-160 w-80 md:w-96 lg:w-160">
      <img class="object-contain transform scale-200" src="boldui-assets/elements/shadow-light-7.svg" alt="">
    </div>
    <div class="absolute top-0 right-0 -mt-52 lg:-mt-0 -mr-64">
      <div class="transform rotate-45 clip-path md:-mt-20">
        <img class="mt-40 lg:mt-0 transform -rotate-45 h-full" src="boldui-assets/images/photo-women.png" alt="">
      </div>
    </div>
  </div>
  <nav class="relative flex px-16 justify-between bg-transparent border-b">
    <div class="pr-14 py-8 lg:border-r">
      <a class="inline-block text-xl text-white font-medium font-heading" href="#">
        <img class="h-8" width="auto" src="boldui-assets/logo/logo-boldui-light.svg" alt="">
      </a>
    </div>
    <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden self-center">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="6" width="24" height="2" fill="white"></rect><rect y="11" width="24" height="2" fill="white"></rect><rect y="16" width="24" height="2" fill="white"></rect></svg>
    </button>
    <div class="hidden lg:flex items-center pl-16 py-8 border-l">
      <div class="flex items-center">
        <a class="inline-block text-sm text-white hover:underline font-heading" href="#">Sign In</a>
        <span class="mx-2 text-white">/</span>
        <a class="inline-block text-sm text-white hover:underline font-heading" href="#">Support</a>
      </div>
    </div>
  </nav>
  <div class="relative container mx-auto px-4">
    <div class="flex py-24 lg:pb-52">
      <div class="w-full md:w-1/2 lg:mt-16">
        <div class="max-w-sm">
          <h2 class="mb-10 text-2xl sm:text-3xl md:text-5xl text-white uppercase font-heading">Take care of your performance every day</h2>
          <a class="inline-flex items-center py-4 px-6 rounded-full bg-yellow-300 hover:bg-yellow-400 transform duration-200" href="#">
            <svg class="mr-3" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 3.16553H0V5.24886H12.01V8.37386L16 4.20719L12.01 0.0405273V3.16553Z" fill="black"></path>
            </svg>
            <span class="text-sm uppercase font-heading">Start for free</span>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="relative border-t pb-8 lg:pb-6">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap py-10 -mb-6 lg:-mb-4 -mx-4">
        <div class="w-1/2 lg:w-1/5 py-6 lg:py-4 px-4">
          <img class="mx-auto h-8" src="boldui-assets/brands/slack.svg" alt="">
        </div>
        <div class="w-1/2 lg:w-1/5 py-6 lg:py-4 px-4">
          <img class="mx-auto h-8" src="boldui-assets/brands/dropbox.svg" alt="">
        </div>
        <div class="w-1/2 lg:w-1/5 py-6 lg:py-4 px-4">
          <img class="mx-auto h-8" src="boldui-assets/brands/spotify.svg" alt="">
        </div>
        <div class="w-1/2 lg:w-1/5 py-6 lg:py-4 px-4">
          <img class="mx-auto h-8" src="boldui-assets/brands/stripe.svg" alt="">
        </div>
        <div class="w-1/2 lg:w-1/5 py-6 lg:py-4 px-4">
          <img class="mx-auto h-8" src="boldui-assets/brands/netflix.svg" alt="">
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="relative flex flex-col py-8 px-10 w-full h-full bg-black border-r overflow-y-auto">
      <a class="inline-block text-xl text-white font-medium font-heading mb-16 md:mb-32" href="#">
        <img class="h-8" width="auto" src="boldui-assets/logo/logo-boldui-light.svg" alt="">
      </a>
      <ul class="mb-32">
        <li class="mb-10">
          <a class="flex items-center" href="#">
            <span class="mr-3 text-lg text-white">About</span>
            <svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 3.48047H0V5.57278H12.01V8.71124L16 4.52663L12.01 0.34201V3.48047Z" fill="#FFEC3E"></path>
            </svg>
          </a>
        </li>
        <li class="mb-10">
          <a class="flex items-center" href="#">
            <span class="mr-3 text-lg text-white">Company</span>
            <svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 3.48047H0V5.57278H12.01V8.71124L16 4.52663L12.01 0.34201V3.48047Z" fill="#FFEC3E"></path>
            </svg>
          </a>
        </li>
        <li class="mb-10">
          <a class="flex items-center" href="#">
            <span class="mr-3 text-lg text-white">Services</span>
            <svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 3.48047H0V5.57278H12.01V8.71124L16 4.52663L12.01 0.34201V3.48047Z" fill="#FFEC3E"></path>
            </svg>
          </a>
        </li>
        <li>
          <a class="flex items-center" href="#">
            <span class="mr-3 text-lg text-white">Contact</span>
            <svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 3.48047H0V5.57278H12.01V8.71124L16 4.52663L12.01 0.34201V3.48047Z" fill="#FFEC3E"></path>
            </svg>
          </a>
        </li>
      </ul>
      <a class="flex mb-8 items-center justify-center py-4 px-6 rounded-full bg-yellow-300 hover:bg-yellow-400 transform duration-200" href="#">
        <svg class="mr-3" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12.01 3.16553H0V5.24886H12.01V8.37386L16 4.20719L12.01 0.0405273V3.16553Z" fill="black"></path>
        </svg>
        <span class="text-sm font-medium uppercase tracking-wider">Sign Up</span>
      </a>
      <a class="flex mb-10 items-center text-white hover:underline" href="#">
        <span class="mr-2 text-sm">Log In</span>
        <svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12.01 3.95383H0V6.04614H12.01V9.1846L16 4.99998L12.01 0.815369V3.95383Z" fill="#FFEC3E"></path>
        </svg>
      </a>
      <p class="text-sm text-gray-500">All rights reserved © BoldUI 2021</p>
    </nav>
  </div>
</section>

The header is the section at the very top of the page. It is not just a navigation bar, which you will find in another category. Tailwind header component is a combination of menu and layout of the first view available to the user. It is a critical section in the viewer's interaction with the page. It determines whether the user stays and explores its content or abandons the session. That is why in Shuffle components we pay great attention to aesthetics and visibility of key information.

Choose from many variations of Tailwind headers. Presented here are variants available in various UI libraries. You will also find many other types of components that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.

Get access to all Tailwind headers, code and our editor. Try the demo for free!

Try for Free →

The easiest way to create beautiful websites

Developer

Team License

monthly

$24/month

That's $0.80/day

annual

$99/year

That's $0.27/day

lifetime

$249/paid once

Best value

Lifetime License

Create an account

OR USE EMAIL

Pay with card

Pay with PayPal™

I agree to the terms of use and privacy policy.

We issue VAT invoices. Already have an account? Sign in

Why creators choose Shuffle

From idea to beautiful design in minutes.

Shuffle pairs an AI visual editor with 80+ UI libraries, so you can design, build and export production‑ready code without starting from scratch.

An AI Agent that builds with you Describe a page, watch it come to life, then fine-tune it visually or with a prompt.
Pick the best model for every task GPT-6 Astra, Claude Opus 5.5 and Gemini 3.8 in one place.
13,400+ professionally designed components Prefer building by hand? Drag in pixel-perfect sections crafted by professional designers.
Export to the stack you love Tailwind CSS, Bootstrap, Next.js, Laravel, WordPress and beyond.

“Its AI-powered features have transformed how I work! Designing and building websites has become faster, easier, and far more efficient.”

Est. 2019

Helping web builders ship since 2019 7 years of steady development.

Build websites faster with an AI Visual Editor

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS Hero section Components

Framework

UI Library

Components

Hero section from Saturn

Saturn Tech Startup Hero with Robotic Hand and CTA

Hero section from DarkPro

Dark Hero Section with Headline, CTA Buttons, and Workplace Photo

Hero section from Flaro

Flaro Mentorship Hero Section with Mentor Cards

Your next website starts here

Hero section from Gradia

Dark gradient hero with remote team headline and profile cards

Hero section from Solstice

Hero Section with Navigation and Feature Preview Cards for Learning Community

Hero section from Basko

Dark Hero Section with Headline, CTAs, and Dashboard Preview for Brand Tool

Hero section from Zanrly

Split-screen hero with tablet photo and headline

Hero section from Nightsable

Dark Hero Section with Credit Card Promo for Nightsable Card

Hero section from Zeus

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

Hero section from Artemis Dashboard

Product Analysis Dashboard Page Header with Action Buttons

Hero section from Wrexa

Split-screen furniture hero with product card

Hero section from Zospace

Zospace Hero with App Mockups and Get Started CTA

Hero section from Flex

Flex SaaS Hero Section with Office Photo and Dual CTAs

Hero section from Uinel

Uinel Hero Section with Header and Product Showcase

Hero section from Yofte

E-commerce hero with header navigation and promotional banner

Hero section from Shopal

Shopal Ecommerce Hero Banner with Product Photos

Hero section from Nigodo

Nigodo Hero Section with Email Signup and Palm Tree Image

Hero section from Atis

Hero Section with Navigation Header and Office Conference Room Image

Hero section from Pstls.

Hero Section with Serif Headline, Photo, and Details CTA

Hero section from BoldUI

Dark Hero Section with Bold Headline and Yellow CTA

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support