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

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 credit card details

Author:
Manuela Bianka

2 years ago

11.8k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Abhiraj

7 months ago

1.5k
Recipe Card
beautiful recipe component with image and step-by-step instructions

Author:
Anonymous

2 years ago

7k
Career Page
This is a career page component built in tailwind

Author:
Deepak Sharma

8 months ago

752
HTMLCODE
123

Author:
Anonymous

3 months ago

187
Hacker terminal #fake
hacker terminal tailwind css

Author:
QQ-VVN

4 months ago

744
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

5 months ago

387
Glassmorphism form

Author:
Sophia Baker

2 years ago

17.7k
Lots of button examples
tailwind button examples

Author:
QQ-VVN

4 months ago

336
Image - Figure with figcaption design

Author:
Maxim

8 months ago

404
nft card
nft card

Author:
5upreme505

11 months ago

1.7k
Tailwind CSS Navbar
Logo on the left. Main menu with a mega menu under "Services". Responsive design with a hamburger menu for mobile devices. Mega menu appears on hover for desktop and toggles on click for mobile.

Author:
KULDEEP

3 months ago

541

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components