Home
Rajesh Maheshwari
Food Order Card

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 CSS v3. It is responsive. similar terms for this example are blog page template, article page template

Card Blog post page eCommerce

Author Rajesh Maheshwari

1.1k

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

Author:
Steven Kuhn

3 years ago

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

Author:
Noob

3 years ago

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

Author:
Noob

3 years ago

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

Author:
threehymns

2 years ago

18.6k
Product card
sleek and modern product card

Author:
OmKar Mehta

1 year ago

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

Author:
Robert Chunga

11 months ago

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

Author:
Ragnar lodbrok

11 months ago

1.5k
News Feed

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

9 months ago

1.5k
content section

Author:
Crimson

9 months ago

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

Author:
Abhiraj

9 months ago

1.2k
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.

Author:
SHARIFUL ISLAM

8 months ago

1.6k
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.

Author:
Ayyamperumal S

7 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components