នេះគឺ simple កូដសម្រាប់ធ្វើ card responsive screen ជាមួយ product model ដែលមានដូចខាងក្រោមនេះ
<body>
<!-- Global Container -->
<div class="flex items-center justify-center min-h-screen bg-slate-100">
<!-- Card container -->
<div class="flex flex-col md:flex-row p-6 m-3 bg-white shadow-2xl rounded-xl
space-y-10 md:space-y-0 md:space-x-10">
<!-- Image div -->
<div>
<img src="./shouw1.jpg" alt=""
class="mx-auto duration-200 w-60 hover:scale-105">
</div>
<!-- Content -->
<div class="flex flex-col">
<!-- Label -->
<div class="flex flex-col text-center space-y-3 md:text-left">
<div>
<div class="inline-block px-3 py-1 text-white text-sm bg-black rounded-full">
free shiping
</div>
</div>
<!-- Tittle -->
<div class="max-w-sm font-medium">
It is free stye for use any where
</div>
<!-- Price container -->
<div class="flex flex-col md:text-left">
<p class="line-through">10000 R</p>
<p class="text-3xl font-bold">5000 R</p>
<p class="text-sm font-light text-gray-500">
It can for travel business meeting al for anywere can use it
</p>
</div>
<!-- Button card group -->
<div class="group">
<button class="w-full bg-blue-500 text-white rounded-xl border-b-8 border-b-blue-700 duration-150
group-hover:border-t-8 group-hover:border-b-0 group-hover:bg-blue-700 group-hover:border-t-blue-700"
>
<div class="px-8 py-3">
Add to card
</div>
</button>
</div>
<!-- Stock -->
<div class="flex items-center space-x-3 group">
<div class="w-3 h-3 bg-emerald-400 rounded-full
group-hover:animate-ping"></div>
<div class="text-sm">10+ in stock</div>
</div>
<!-- Button mark -->
<div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
<button class="flex items-center justify-center border-2 border-gray-300 rounded-md px-5 py-2
hover:shadow-md hover:-translate-y-0.5 transition-all duration-150"
>
<img src="./shopping-cart.png" class="w-5" alt="">
<span class="m-1">Add to shopping</span>
</button>
<button class="flex items-center justify-center border-2 border-gray-300 rounded-md px-5 py-2
hover:shadow-md hover:-translate-y-0.5 transition-all duration-150"
>
<img src="./heart.png" class="w-5" alt="">
<span class="m-1">Add to shopping</span>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
0 Comments