Home
Anonymous
Restaurant menu card

Restaurant menu card

This tailwind example is contributed by Anonymous, on 30-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Other

Author Anonymous

3.5k

Fork Fullscreen

<div class="max-w-2xl mx-auto py-16 px-8">
  <div class="bg-white shadow-md rounded-lg overflow-hidden">
    <div class="bg-green-600 text-white py-4 px-6 text-center">
      <h1 class="text-2xl font-semibold">Le Petit Bistro</h1>
      <p class="text-sm">Fine French Cuisine</p>
    </div>
    <div class="py-8 px-6">
      <h2 class="text-xl font-semibold mb-4">Appetizers</h2>
      <ul class="mb-8">
        <li class="flex justify-between mb-2">
          <span class="font-semibold">Escargots à la Bourguignonne</span>
          <span class="text-gray-600">$12</span>
        </li>
        <li class="flex justify-between mb-2">
          <span class="font-semibold">Soupe à l'Oignon Gratinée</span>
          <span class="text-gray-600">$8</span>
        </li>
        <li class="flex justify-between mb-2">
          <span class="font-semibold">Tartine aux Champignons</span>
          <span class="text-gray-600">$10</span>
        </li>
      </ul>
      <h2 class="text-xl font-semibold mb-4">Main Courses</h2>
      <ul class="mb-8">
        <li class="flex justify-between mb-2">
          <span class="font-semibold">Coq au Vin</span>
          <span class="text-gray-600">$22</span>
        </li>
        <li class="flex justify-between mb-2">
          <span class="font-semibold">Boeuf Bourguignon</span>
          <span class="text-gray-600">$26</span>
        </li>
        <li class="flex justify-between mb-2">
          <span class="font-semibold">Truite Amandine</span>
          <span class="text-gray-600">$24</span>
        </li>
      </ul>
      <h2 class="text-xl font-semibold mb-4">Desserts</h2>
      <ul>
        <li class="flex justify-between mb-2">
          <span class="font-semibold">Crème Brûlée</span>
          <span class="text-gray-600">$8</span>
        </li>
        <li class="flex justify-between mb-2">
          <span class="font-semibold">Tarte aux Pommes</span>
          <span class="text-gray-600">$7</span>
        </li>
        <li class="flex justify-between mb-2">
          <span class="font-semibold">Mousse au Chocolat</span>
          <span class="text-gray-600">$9</span>
        </li>
      </ul>
    </div>
  </div>
</div>

Related Examples

Table
Table with image and status with pagination buttons

Author:
Abhiraj

10 months ago

2.1k
chart
to chart on your family and

Author:
Nishimwe Jeanine

5 months ago

434
Invoice
Invoice

Author:
Ameth Galarcio

1 year ago

2.5k
Share button

Author:
Maxim

10 months ago

1.2k
Aurora Spinner
Aurora Spinner using tailwindcss

Author:
Deepak Kumar Chouhan

10 months ago

1.3k
Responsive About Section with Tailwind CSS
Built a sleek and fully responsive About Section for my portfolio using Tailwind CSS! 🚀 Designed for smooth adaptability across all screen sizes with a modern and minimal aesthetic. Perfect for showcasing skills, experience, and a personal touch!

Author:
Abdul Baset Bappy

7 months ago

1.2k
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

196
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

4 months ago

336
coffee
a beverage brewed from the roasted and ground seeds of the tropical evergreen coffee plant. Coffee is one of the three most popular beverages in the world (alongside water and tea), and it is one of the most profitable international commodities

Author:
Augustin

5 months ago

799
Hero Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Author:
Abdul Baset Bappy

7 months ago

929
Concert ticket

Author:
Elijah Davis

2 years ago

13.3k
admindashboard
creates a responsive, interactive admin dashboard using Tailwind CSS, Font Awesome, Chart.js, and custom JavaScript animations. It's called "Materially Dashboard" and is designed for presenting key statistics and analytics data in a visually appealing manner.

Author:
ishimwe shadad

5 months ago

461

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components