Restaurant menu card

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

Other

Author Anonymous

Tailwind v3.4 4.4k 7

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

OMERLINKS Calendar
OMERLINKS Calendar

Omer fils ELENGA

3 weeks ago

26
card

Raul antonio de la cruz hernandez

9 months ago

754
Multi Step form with javascript
A Beautiful multi step form using HTML CSS and JS

Walid Ahmad

1 year ago

1.8k
Taskify Premium Task Management FREE
Website Task management modern and responsif

Alif Bima Pradana

8 months ago

839
Dark dashboard
Dark dashboard

Tanvir Hasan Bappy (Tanvir)

9 months ago

407
About Us Component

KULDEEP

1 year ago

2.1k
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Abdul Baset Bappy

1 year ago

2.6k
templete
templete

Uwera Dorcas

1 year ago

1.3k
Skills Showcase, My Tech Stack and Expertise & Skills
🚀 Showcasing My Skills with TailwindCSS & Flexbox! I’ve designed a responsive and interactive Skills Section using Tailwind CSS and Flexbox. With smooth hover effects and a clean layout, this section highlights my expertise in: 🔹 Frontend Technologies – HTML, CSS, JavaScript, React, Next.js 🔹 Styling Frameworks – TailwindCSS 🔹 Backend & Tools – Node.js, Git

Muhammad Umair Arshad

1 year ago

2k
Maintenance page template
The site is under maintenance placeholder page

Anonymous

2 years ago

12.4k
Infinity Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN, responsif via mobile and tablet

Alif Bima Pradana

8 months ago

1.3k
component1
this is for demo

Anonymous

4 weeks ago

164