Tailwind Banners Components in Shopal library

<section class="py-16 bg-white">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
          <div class="shadow rounded-md relative">
            <img class="img-fluid w-full h-80 border-2 border-black rounded-md object-cover" src="shopal-assets/images/banner1.png" alt="">
            <div class="absolute top-1/2 left-0 p-6 w-full text-center transform -translate-y-1/2">
              <h4 class="text-3xl font-black text-white mb-6">Banner Hero</h4>
              <a class="group relative inline-block h-12 w-full xs:w-34 text-center 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">Start Buying</span>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="shadow rounded-md relative">
            <img class="img-fluid w-full h-80 border-2 border-black rounded-md object-cover" src="shopal-assets/images/banner2.png" alt="">
            <div class="absolute top-1/2 left-0 p-6 w-full text-center transform -translate-y-1/2">
              <h4 class="text-3xl font-black text-white mb-6">Banner Hero</h4>
              <a class="group relative inline-block h-12 w-full xs:w-34 text-center 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">Start Buying</span>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>