پێشبینی کۆدی ڕاستەوخۆ

بەشی کۆدەکان

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