Hero Center Section Using Tailwind UI

The Tailwind CSS-powered hero center section exudes a striking visual presence, ensuring your content takes center stage with style.
section
Loading component...
index.html
68 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>

</head>

<section class="text-gray-600 body-font bg-[#F3EDE6] py-12">
  <div class="container flex flex-col items-center justify-center px-5 mx-auto">
    <div class="w-full text-center lg:max-w-5xl">
      <h1 class="mb-4 text-4xl font-medium text-gray-900 title-font lg:text-7xl">Hassle-free incorporation and expert
        accounting for better businesses</h1>
      <div class="flex justify-center mt-8">
        <button
          class="inline-flex px-6 py-2 text-base text-white bg-indigo-500 border-0 rounded-full focus:outline-none hover:bg-indigo-600 md:text-lg">Get
          Started</button>
        <button
          class="inline-flex px-6 py-2 ml-4 text-base text-gray-700 border border-indigo-600 rounded-full focus:outline-none hover:bg-gray-200 md:text-lg">Watch
          Demo</button>
      </div>
      <div class="flex items-center justify-center mt-8 space-x-2">
        <img class="w-8 h-8" src="https://cdn.worldvectorlogo.com/logos/google-g-2015.svg" alt="">
        <span class="text-base font-normal text-black md:text-xl">4,0</span>
        <div class="flex items-center justify-center">
          <div class="flex items-center">
            <svg class="w-5 h-5 mx-1 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20">
              <path
                d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
            </svg>
            <svg class="w-5 h-5 mx-1 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20">
              <path
                d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
            </svg>
            <svg class="w-5 h-5 mx-1 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20">
              <path
                d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
            </svg>
            <svg class="w-5 h-5 mx-1 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20">
              <path
                d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
            </svg>
            <svg class="mx-1 w-5 h-5 fill-[#F3EDE6] text-yellow-500 stroke-current" xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20">
              <path
                d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
            </svg>
          </div>
        </div>
        <span class="text-base font-normal text-black md:text-xl">530 reviews</span>
      </div>
    </div>
    <img class="hidden object-cover object-center w-5/6 mt-10 md:block rounded-xl" alt="hero"
      src="https://strapi-cdn.osome.com/full_intro_sg_main_desktop_bcbe03c533.webp">
    <img class="object-cover object-center w-5/6 mt-10 md:hidden rounded-xl" alt="hero"
      src="https://strapi-cdn.osome.com/w327_intro_sg_main_mobile_992c8280f3.webp">
  </div>
</section>
Hero Center Section Using Tailwind UI

Preview - Hero Center Section Using Tailwind UI
