پێشبینی کۆدی ڕاستەوخۆ
بەشی کۆدەکان
HTML +
Tailwind CSS
HTML Code
<div class="flex items-center justify-center ">
<div class="bg-white rounded-xl shadow-lg overflow-hidden w-full max-w-sm transition hover:shadow-2xl">
<!-- Food Image -->
<div class="relative">
<img src="https://images.unsplash.com/photo-1550547660-d9450f859349?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8YnVyZ2VyfGVufDB8fDB8fHww" alt="Food Image" class="w-full h-52 object-cover">
<span class="absolute top-2 left-2 bg-green-600 text-white text-xs font-semibold px-3 py-1 rounded-full shadow">
⭐ 4.8 (1.2K)
</span>
</div>
<!-- Content -->
<div class="p-5">
<!-- Restaurant Name -->
<p class="text-sm text-gray-500 font-medium">— The Gourmet Kitchen</p>
<!-- Food Name -->
<h2 class="text-xl font-semibold text-gray-900 mt-1">Classic Cheese Burger</h2>
<!-- Description -->
<p class="text-gray-600 text-sm mt-2">Juicy beef patty, melted cheddar, fresh lettuce, and our signature sauce.</p>
<!-- Orders and Quantity -->
<div class="flex items-center justify-between mt-4">
<p class="text-md text-gray-900 font-semibold">₹129/-</p>
<div class="flex items-center space-x-2">
<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 w-8 h-8 rounded-md flex items-center justify-center text-lg font-bold">−</button>
<span class="text-gray-800 font-medium">1</span>
<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 w-8 h-8 rounded-md flex items-center justify-center text-lg font-bold">+</button>
</div>
</div>
<!-- Order Button -->
<button class="mt-5 w-full bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-2.5 rounded-lg shadow-md transition">
Place Order
</button>
</div>
</div>
</div>
بینینەکان : 256
ناوی سەرچاوە
کارتی نمایشی خواردن بۆ چێشتخانەکان
وەسف
کارتی نمایشی خواردن بۆ چێشتخانەکان