Hero Feature Layout Using Tailwind UI

An engaging hero section with responsive layout and modern style, implemented using Tailwind CSS.
section
Loading component...
index.html
49 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>

<!-- design inspired by https://valet.club/?ref=land-book.com -->
<section class="text-gray-600 body-font bg-[#f8ed59] md:p-10 p-4 mx-4 md:mx-28 my-12 rounded-xl">
  <div class="container flex flex-col-reverse items-start px-5 mx-auto py-11 md:flex-row">
    <div
      class="flex flex-col items-center w-full h-full mb-16 text-center lg:flex-grow md:w-2/3 lg:pr-16 md:pr-8 md:items-start md:text-left md:mb-0">
      <p class="mb-8 text-base font-medium text-[#008982] text-center md:text-left">RESET is formulated to reduce the
        side effects of alcohol consumption. With results that are validated by real science and people, you’ll see why
        this is the better way to drink.</p>
      <h1 class="sm:text-5xl text-4xl font-medium text-[#008982] text-center md:text-left">This is mindful indulgence in
        your pocket.</h1>
      <div class="flex flex-col items-center mt-8 space-y-4 md:flex-row md:space-y-0 md:space-x-4 xl:mt-48">
        <div class="flex flex-col items-start justify-start">
          <div class="inline-flex items-center justify-center w-12 h-12 mb-5 rounded-full">
            <img src="https://valet.club/wp-content/uploads/2023/05/[email protected]" alt="">
          </div>
          <h2 class="text-[#008982] text-sm font-medium">Reduce flushing & hot spells.</h2>
        </div>
        <div class="flex flex-col items-start">
          <div class="inline-flex items-center justify-center w-12 h-12 mb-5 rounded-full">
            <img src="https://valet.club/wp-content/uploads/2023/05/[email protected]" alt="">
          </div>
          <h2 class="text-[#008982] text-sm font-medium">Ease discomfort during drinking.</h2>
        </div>
        <div class="flex flex-col items-start">
          <div class="inline-flex items-center justify-center w-12 h-12 mb-5 rounded-full">
            <img src="https://valet.club/wp-content/uploads/2023/05/[email protected]" alt="">
          </div>
          <h2 class="text-[#008982] text-sm font-medium">Wake up feeling refreshed the next day.</h2>
        </div>
      </div>
    </div>

    <div class="justify-center w-full mx-auto mb-8 md:w-1/3 md:mb-0">
      <img class="rounded-lg" src="https://valet.club/wp-content/uploads/2023/05/DSC3439-Edit-1-576x864.jpg" alt="">
    </div>
  </div>
</section>
Hero Feature Layout Using Tailwind UI

Preview - Hero Feature Layout Using Tailwind UI
