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

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

Show user details

Author:
Lucas Martinez

2 years ago

23.4k
Simple count down timer

Author:
Gopi Yadav

2 years ago

14.5k
Services
This Services page design includes: 1. Responsive layout using Tailwind CSS grid system 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. Header with navigation 5. Six service cards with icons, titles, and descriptions 6. Footer with copyright information 7. Subtle animations and transitions 8. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a white background in light mode and dark gray in dark mode - Service cards have a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Icons use the Indigo-800 color (Indigo-400 in dark mode) for consistency - Each service card has a hover effect that scales it up slightly - Service cards fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The design is fully responsive, adjusting from 1 to 3 columns based on screen size This design provides a clean, professional look for a services page while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

5 months ago

1.1k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

2 months ago

1.1k
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Author:
Abdul Baset Bappy

2 weeks ago

105
Background image section

Author:
Marc

1 year ago

5.3k
Native HTML Accordion
native html accordion summary details

Author:
Cristian

11 months ago

1.5k
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

2 years ago

8.8k
Payment Cards

Author:
Shammi Nethupul

8 months ago

1.8k
Calculator
A Basic Calculator

Author:
Debbie F

8 months ago

949
Privacy policy page template

Author:
Anonymous

10 months ago

2.1k
Contact Page

Author:
Sedat Kumcu

5 months ago

590

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components