Homepage Hero Using Tailwind UI

This homepage hero tailwind component is A hero header is the use of images, text, and navigation elements at the top of a homepage or web page, it is use Tailwind CSS to create this beautiful homepage hero.

section

Loading component...

index.html

78 lines

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
  rel="stylesheet"
/>

<style>
  .body {
    font-family: "Plus Jakarta Sans", sans-serif;
  }
</style>

<section class="px-4 text-white my-14 sm:px-12">
  <div
    class="relative w-full px-4 py-16 mx-auto bg-center bg-cover rounded-2xl md:max-w-7xl sm:px-20"
    style="
      background-image: url(https://uploads-ssl.webflow.com/622072bb155784c16fe8ef39/64dc87e6d12c1cc492e658f6_goodnotes-homepage-kv-final-p-1600.webp);
    "
  >
    <div
      class="flex items-center justify-center w-full h-full md:justify-start"
    >
      <div class="">
        <div class="container">
          <div class="text-center md:text-start">
            <h1
              class="mt-24 mb-6 text-5xl font-bold sm:text-7xl md:text-7xl lg:text-8xl md:mt-0"
            >
              Notes<br />Reimagined
            </h1>
            <p class="mb-12 text-2xl font-medium md:text-3xl">
              Notes that
              <span class="italic font-light border-b"
                >finish your sentences</span
              >
            </p>
            <div class="flex items-center gap-x-6">
              <a href="#" target="_blank" class="">
                <img
                  src="https://uploads-ssl.webflow.com/622072bb155784c16fe8ef39/64cdccf068cb8c844719466d_goodnotes-ios-download-badge.svg"
                  loading="lazy"
                  height="60"
                  alt="Download on the App Store"
                  class="w-36 md:w-44"
                />
              </a>
              <a href="#" class="">
                <img
                  src="https://uploads-ssl.webflow.com/622072bb155784c16fe8ef39/6482e8f46590cb2cc50acea3_goodnotes-android-download-white.svg"
                  loading="lazy"
                  height="34"
                  width="30"
                  alt="Goodnotes for Android"
                  class="w-6 md:w-7"
                />
              </a>
              <div
                class="inline-block h-[50px] min-h-[1em] w-0.5 self-stretch bg-neutral-100 opacity-100"
              ></div>
              <a href="#" class="">
                <img
                  src="https://uploads-ssl.webflow.com/622072bb155784c16fe8ef39/6482e8f45c8be68a0851924c_goodnotes-windows-download-white.svg"
                  loading="lazy"
                  height="30"
                  width="30"
                  alt="Goodnotes for Windows"
                  class="w-6 md:w-7"
                />
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Homepage Hero Using Tailwind UI

Preview - Homepage Hero Using Tailwind UI