tailwind-css #49
Description
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
Purchase TK 200 or
.png)
---SALE FEVER---
Purchase TK 200 or
above & get 20% off
<div class="flex mx-40 mt-10">
<p class="font-semibold mx-30">use promo code </p>
<button class=" text-[14px] ml-2 px-4 bg-[#E527B2] py-1.5 border-[#E527B2] text-white rounded-md cursor-pointer hover:bg-transparent hover:text-gray-700 border font-semibold">SELL200</button>
</div>
<section
class="flex flex-col-reverse sm:flex-row my-[6rem] max-w-5xl mx-auto gap-5 px-4"
>
<div class="w-full space-y-8">
<!-- 1st part card section -->
<div>
<h1 class="text-[22px] font-bold">Kitchenware</h1>
<div class="mt-4 flex flex-col sm:flex-row gap-4">
<!-- 1st card for Kitchen -->
<div class="bg-white p-3 rounded-md flex-1">
<div class="bg-gray-200 rounded-md">
<img
src="./5210242_14551 1 (1).png"
alt=""
class="p-5 mx-auto"
/>
</div>
<div class="mt-5 flex gap-1 justify-center mb-1">
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
</div>
<h1 class="font-bold text-center">K. Accessories</h1>
<p class="text-gray-500 text-sm text-center">39.00 TK</p>
</div>
<!-- 2nd card for Kitchen -->
<div class="bg-white p-3 rounded-md flex-1">
<div class="bg-gray-200 rounded-md">
<img
src="./5210242_14551 1 (1).png"
alt=""
class="p-5 mx-auto"
/>
</div>
<div class="mt-5 flex gap-1 justify-center mb-1">
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
</div>
<h1 class="font-bold text-center">K. Accessories</h1>
<p class="text-gray-500 text-sm text-center">39.00 TK</p>
</div>
<!-- 3rd card for Kitchen -->
<div class="bg-white p-3 rounded-md flex-1">
<div class="bg-gray-200 rounded-md">
<img
src="./5210242_14551 1 (1).png"
alt=""
class="p-5 mx-auto"
/>
</div>
<div class="mt-5 flex gap-1 justify-center mb-1">
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
</div>
<h1 class="font-bold text-center">K. Accessories</h1>
<p class="text-gray-500 text-sm text-center">39.00 TK</p>
</div>
</div>
</div>
<!-- 2nd card sport -->
<div>
<h1 class="text-[22px] font-bold">Sportsware</h1>
<div class="mt-4 flex flex-col sm:flex-row gap-4">
<!-- 1st Sportsware -->
<div class="bg-white p-3 rounded-md flex-1">
<div class="bg-gray-200 rounded-md">
<img src="./pngwing 1.png" alt="" class="p-5 mx-auto" />
</div>
<div class="mt-5 flex gap-1 justify-center mb-1">
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
</div>
<h1 class="font-bold text-center">Sports cates </h1>
<p class="text-gray-500 text-sm text-center">66.00 use</p>
</div>
<!-- Sportsware 2nd -->
<div class="bg-white p-3 rounded-md flex-1">
<div class="bg-gray-200 rounded-md">
<img src="./pngwing 1.png" alt="" class="p-5 mx-auto" />
</div>
<div class="mt-5 flex gap-1 justify-center mb-1">
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
</div>
<h1 class="font-bold text-center">Sports cates</h1>
<p class="text-gray-500 text-sm text-center">66.00 use</p>
</div>
<!--2nd -->
<div class="bg-white p-3 rounded-md flex-1">
<div class="bg-gray-200 rounded-md">
<img src="./pngwing 1.png" alt="" class="p-5 mx-auto" />
</div>
<div class="mt-5 flex gap-1 justify-center mb-1">
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
<i class="fa-regular fa-star text-yellow-400"></i>
</div>
<h1 class="font-bold text-center">Sports cates</h1>
<p class="text-gray-500 text-sm text-center">66.00 use</p>
</div>
</div>
</div>
</div>
<div class="w-full sm:w-[40%] sm:mt-12">
<div class="bg-white p-4 rounded-lg">
<label class="text-lg font-semibold">Have Coupone?</label>
<div class="flex mt-4">
<input
type="text"
placeholder="Coupone code"
class="py-2 px-2 outline-none border border-gray-400 rounded-l-lg"
/>
<button
class="text-[14px] px-4 border bg-[#E527B2] py-2 border-[#E527B2] text-white rounded-r-lg cursor-pointer hover:bg-transparent hover:text-gray-700 font-semibold"
>
Apply
</button>
</div>
</div>
<div class="bg-white p-4 mt-4 rounded-lg">
<ol class="list-decimal pl-4">
<li class="font-semibold">Home Cooker</li>
<li class="font-semibold">Sports cates</li>
<li class="font-semibold">Home Cooker</li>
</ol>
<div class="w-full bg-gray-300 h-[.2px] mt-4"></div>
<ul class="mt-3">
<li class="font-semibold">
Total price:
<span class="text-gray-400 font-normal ml-1">257.00TK</span>
</li>
<li class="font-semibold">
Discount :
<span class="text-gray-400 font-normal ml-1">51.40TK</span>
</li>
<li class="font-semibold">
Total:
<span class="text-gray-400 font-normal ml-1">205.60 TK</span>
</li>
</ul>
<button
class="text-[14px] px-4 bg-[#E527B2] py-1.5 border-[#E527B2] text-white rounded-md cursor-pointer hover:bg-transparent hover:text-gray-700 border font-semibold w-full mt-5"
>
Make Purchase
</button>
</div>
</div>
</section>