Food delivery ecommerce Card

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

Card Avatar Product

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

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

Tailwind v3.4 2.8k 4

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

Product card for eCommerce website

Steven Kuhn

4 years ago

13.3k
Product card

Simon Scheffer

3 years ago

32.4k
Product card

Oliver Hansen

3 years ago

10.7k
Product card

Oliver Hansen

3 years ago

14.5k
Profile Card
Show more details on hover

Tamani Phiri

3 years ago

15.2k
Card Component
A Simple Card Component with full responsiveness and dark mode supported

Shariar Hasan

2 years ago

4k
Product card
sleek and modern product card

OmKar Mehta

2 years ago

7.4k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Mike Varen

2 years ago

5.2k
Minimal Card
This is awesome looking card

Shaik Sameer Basha

2 years ago

3.4k
Card-Product
Item or card to show products

Ameth Galarcio

2 years ago

5k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Ameth Galarcio

2 years ago

4.1k
Watch Card
Watch Cards

Anonymous

1 year ago

2.6k