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

274

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

2 years ago

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

Author:
Noob

2 years ago

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

Author:
Noob

2 years ago

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

Author:
threehymns

1 year ago

17.1k
Product card
sleek and modern product card

Author:
OmKar Mehta

1 year ago

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

Author:
Robert Chunga

6 months ago

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

Author:
Ragnar lodbrok

6 months ago

892
News Feed

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

4 months ago

829
content section

Author:
Crimson

4 months ago

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

Author:
Abhiraj

4 months ago

783
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

3 months ago

923
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

2 months ago

386

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components