Food Order Card

Ecommerce/Food order card layout

This tailwind example is contributed by Rajesh Maheshwari, on 27-Feb-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are blog page template, article page template

Card Blog post page eCommerce

Author Rajesh Maheshwari

Tailwind v3.4 1.6k 2

Fork Fullscreen

<div class="p-5">
            
            <p class="text-sm text-gray-500 font-medium">— The Gourmet Kitchen</p>

<h2 class="text-xl font-semibold text-gray-900 mt-1">Classic Cheese Burger</h2>

<p class="text-gray-600 text-sm mt-2">Juicy beef patty, melted cheddar, fresh lettuce, and our signature sauce.</p>

<div class="flex items-center justify-between mt-4">
                <p class="text-md text-gray-900 font-semibold">₹129/-</p>

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

Related Examples

Product card for eCommerce website

Steven Kuhn

4 years ago

13.3k
Product / Service Card
Example of a card that can be used as a blog, product, or service card with reviews.

Noob

4 years ago

18.7k
Products card grid
Example of product card grid with product image and pricing

Noob

3 years ago

24.8k
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

threehymns

2 years ago

20.1k
Product card
sleek and modern product card

OmKar Mehta

2 years ago

7.4k
Amazing E-commerce card
An amazing e-commerce card with stunning hover effect

Robert Chunga

1 year ago

3.3k
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Ragnar lodbrok

1 year ago

2.3k
News Feed

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

1 year ago

2.4k
content section

Crimson

1 year ago

1.6k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Abhiraj

1 year ago

1.9k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

SHARIFUL ISLAM

1 year ago

2.8k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Ayyamperumal S

1 year ago

1.7k