<section class="p-6">
<div class="relative bg-gray-900 overflow-hidden rounded-2xl">
<div class="flex flex-wrap">
<div class="w-full lg:w-1/2">
<div class="py-10 px-11">
<h3 class="mb-3 font-heading text-3xl text-gray-200">Flash Sale today</h3>
<h3 class="mb-14 font-heading text-6xl text-white">This deal won't last forever! Grab up to <span class="text-orange-900">60% off</span> on selected products now</h3>
<div class="flex flex-wrap gap-4">
<a href="#" class="bg-white border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 text-sm font-semibold px-8 h-12 inline-flex items-center transition duration-200">Shop Now</a>
<a href="#" class="bg-gray-900 border border-white rounded-full focus:ring-4 focus:ring-gray-200 text-white text-sm font-semibold px-5 h-12 inline-flex items-center transition duration-200">Watch Trending</a>
</div>
</div>
</div>
<div class="w-full lg:w-1/2">
<img class="mx-auto lg:absolute lg:right-0 lg:bottom-0 object-cover" style="height: 448px;" src="shopky-assets/call-to-action/sale.png" alt="">
</div>
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
