Home
$@(\/)(\/)¥
Food delivery ecommerce Card

Food delivery ecommerce Card

This tailwind example is contributed by $@(\/)(\/)¥, on 10-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Product Showcase, Product card

Card Avatar Product

$$@(\/)(\/)¥ profile image$

Author $@(\/)(\/)¥

1.8k

Fork Fullscreen

<div class="w-full h-full flex flex-col justify-center items-center py-10">
        
        <p class="pb-2 text-lg lg:text-2xl text-rose-600 font-semibold">Category</p>
        <h2 class="text-3xl lg:text-5xl text-center font-serif font-semibold mb-10 dark:text-black text-white">Choose Your Best Food</h2>

<div class="flex gap-1 items-center justify-end text-2xl">
                        <ion-icon class="text-yellow-500" name="star"></ion-icon>
                        <p class="dark:text-black text-white font-bold pr-4">5.0</p>
                    </div>
                </div>

<h2 class="pl-4 text-2xl font-semibold group-hover:text-rose-600 cursor-pointer dark:text-black text-white">Pizza Slice</h2>
                <p class="pl-4 dark:text-gray-800 text-gray-300  mb-4">Cheese, Ham & Pineapple</p>
                <button class="w-fit ml-4 mb-6 text-xl text-rose-700 font-bold py-2 px-4 border border-gray-500 rounded-full uppercase">Order now</button>
            </div>
        </div>

<div class="flex flex-col gap-4 rounded-lg shadow-lg dark:bg-white bg-[#262525] group">
            
            <img class="w-[18rem] h-[10rem] sm:w-[22rem] sm:h-[14rem] object-center aspect-square rounded-t-lg" src="https://images.unsplash.com/photo-1626645738196-c2a7c87a8f58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwyfHxDaGlja2VuJTIwZm9vZHxlbnwwfDB8fHwxNzYxMTIwNzA3fDA&ixlib=rb-4.1.0&q=80&w=1080" alt="Card Image" />

<div class="flex gap-1 items-center justify-end text-2xl">
                        <ion-icon class="text-yellow-500" name="star"></ion-icon>
                        <p class="dark:text-black text-white font-bold pr-4">4.6</p>
                    </div>
                </div>

<h2 class="pl-4 text-2xl font-semibold group-hover:text-rose-600 cursor-pointer dark:text-black text-white">Chicken Paradise</h2>
                <p class="pl-4 dark:text-gray-800 text-gray-300  mb-4">Cheese, Ham & Pineapple</p>
                <button class="w-fit ml-4 mb-6 text-xl text-rose-700 font-bold py-2 px-4 border border-gray-500 rounded-full uppercase">Order now</button>
            </div>
        </div>

<div class="flex flex-col gap-4 rounded-lg shadow-lg dark:bg-white bg-[#262525] group">
            
            <img class="w-[18rem] h-[10rem] sm:w-[22rem] sm:h-[14rem] object-center aspect-square rounded-t-lg" src="https://images.unsplash.com/photo-1594212699903-ec8a3eca50f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxM3x8YnVyZ2VyfGVufDB8MHx8fDE3NjExMTc5NDJ8MA&ixlib=rb-4.1.0&q=80&w=1080" alt="Card Image" />

<h2 class="pl-4 text-2xl font-semibold group-hover:text-rose-600 cursor-pointer dark:text-black text-white">Hamburger</h2>
                <p class="pl-4 dark:text-gray-800 text-gray-300  mb-4">Cheese, Ham & Pineapple</p>
                <button class="w-fit ml-4 mb-6 text-xl text-rose-700 font-bold py-2 px-4 border border-gray-500 rounded-full uppercase">Order now</button>
            </div>
        </div>
</div>
    </div>
</div>

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

Related Examples