Tailwind css hero section with hero image and floating cards

Tailwind CSS offers a straightforward solution for designing captivating hero sections with hero images, titles, call-to-action buttons, and floating cards. This combination provides an engaging entry point for website visitors, encouraging interaction and conversion.
<!-- Start -->
    <section class="relative overflow-hidden md:pt-44 pt-36 md:pb-24 pb-16">
      <div class="sm:px-4 lg:px-11 xl:px-20 2xl:px-52 relative">
        <div
          class="grid md:grid-cols-2 grid-cols-1 items-center mt-8 gap-[30px] relative"
        >
          <div class="md:me-6">
            <h4
              class="font-bold lg:leading-normal leading-normal text-4xl lg:text-5xl mb-5 text-[#493329]"
            >
              Designing <span class="text-indigo-600">Hero Sections</span>
              <br />
              everybody Likes
            </h4>
            <p class="text-slate-400 text-lg max-w-xl">
              Utilizing Tailwind CSS for hero sections empowers website creators
              to infuse their digital spaces with personality and purpose.
              Whether showcasing products, promoting services, or sharing
              stories, this versatile approach allows for endless customization,
              ensuring that each hero section resonates with the unique identity
              and objectives of the website or brand.
            </p>

            <div class="mt-6">
              <a
                href="#"
                class="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-[#feb602] hover:bg-[#feb602]/80 border-[#feb602] hover:border-[#feb602]/90 text-[#493329] rounded-md me-2 mt-2"
              >
                Shop Now</a
              >
              <a
                href="#"
                class="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-transparent hover:bg-[#feb602] border-[#feb602] text-[#493329] hover:text-[#574137] rounded-md mt-2"
              >
                Contact Us</a
              >
            </div>
          </div>

          <div class="relative">
            <img
              src="https://res.cloudinary.com/djunzsydj/image/upload/v1711108456/tailwindsnippets/components/xlsey8muttoa1jxmhbev.png"
              class="mx-auto"
              alt=""
            />

            <div
              class="absolute flex justify-between items-center top-16 md:-start-10 -start-5 p-4 rounded-lg shadow-md bg-white w-44 m-3"
            >
              <div class="flex items-center">
                <div class="flex-1">
                  <h6 class="text-[#493329]">Customers</h6>
                  <p class="text-xl font-bold">
                    <span
                      class="counter-value text-[##493329]"
                      data-target="4589"
                      >2100</span
                    >
                  </p>
                </div>
              </div>

              <span class="text-green-700"> +15%</span>
            </div>

            <div
              class="absolute bottom-1/2 translate-y-1/2 lg:-end-7 -end-5 p-4 rounded-lg shadow-md bg-white w-48 m-3"
            >
              <div class="flex justify-between mt-3 mb-2">
                <span class="text-[#493329]">Customer Satisfaction</span>
                <span class="text-green-700">84%</span>
              </div>
              <div class="w-full bg-gray-100 rounded-full h-[6px]">
                <div
                  class="bg-[#493329] h-[6px] rounded-full"
                  style="width: 84%"
                ></div>
              </div>
            </div>

            <div
              class="absolute flex justify-between items-center bottom-16 md:start-10 -start-2 p-4 rounded-lg shadow-md bg-white w-52 m-3"
            >
              <div class="flex flex-col">
                <img
                  src="https://res.cloudinary.com/djunzsydj/image/upload/v1711108508/tailwindsnippets/components/xyqhk2v1ni2mlpscnpas.jpg"
                  class="h-14 w-14 rounded-full shadow-md me-3"
                  alt=""
                />
                <div class="flex-1">
                  <h6 class="text-lg font-semibold">Cristina</h6>
                  <p class="text-slate-400">
                    Absolutely Exquisite! A True Gem of a Dress Shop! 👗🌟
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--end grid-->
      </div>
      <!--end container-->
    </section>
    <!--end section-->
    <!-- End -->
Categories

Tailwind css hero section with hero image and floating cards
