<div class="bg-white shadow-md rounded-lg max-w-3xl p-6 border-2">
<div class="flex flex-col lg:flex-row">
<div class="flex-shrink-0">
<img src="https://picsum.photos/300" alt="Product Image" class="lg:w-64 h-64 object-cover rounded-lg w-full">
</div>
<div class="flex-1 lg:ml-6 mt-4 lg:mt-0 justify-between flex flex-col">
<div>
<h2 class=" text-2xl font-bold mb-2">Featured Product</h2>
<p class="max-w-md text-gray-600 leading-relaxed mb-4">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Fusce ullamcorper, enim vitae fermentum lobortis, nibh sapien ultrices dui, vel
sagittis enim mauris id ex.</p>
</div>
<div class="flex lg:justify-end gap-4 items-end justify-center">
<div class="flex flex-col items-end">
<span class="text-sm line-through">$109.99</span>
<span class="text-xl font-bold">$99.99</span>
</div>
<button class="flex gap-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
Add to Cart
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
</svg>
</button>
</div>
</div>
</div>
</div>
genaroibc