پێشبینی کۆدی ڕاستەوخۆ
بەشی کۆدەکان
HTML +
Tailwind CSS
HTML Code
<div class="bg-white dark:bg-gray-800 flex justify-center items-center w-screen h-screen p-5">
<div class="bg-white shadow-lg rounded-lg p-6 w-80 relative text-center">
<!-- Discount Badge -->
<div class="absolute top-4 right-4 bg-orange-500 text-white text-xs font-bold px-3 py-1 rounded-full">
25% OFF
</div>
<!-- Product Image -->
<img src="https://www.gadstyle.com/wp-content/uploads/2024/08/samsung-galaxy-watch-7-ai-smart-watch-40mm-44mm-2.webp" alt="Product Image" class="mx-auto w-40 h-40 object-contain">
<!-- Product Title -->
<h2 class="text-xl font-bold text-blue-600 mt-4">New Apple HomePod Mini</h2>
<!-- Product Description -->
<p class="text-gray-500 text-sm mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
<!-- CTA Button -->
<a class="mt-4 inline-flex items-center gap-2 px-5 py-2 bg-blue-600 text-white font-medium rounded-lg shadow-md hover:bg-blue-700 transition">
Shop Now
<span>➡️</span>
</a>
</div>
</div>
بینینەکان : 157
ناوی سەرچاوە
کارتی بەرهەم 60
وەسف
کارتی بەرهەم 60