<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>