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

Privacy Policy Page Template

Author:
Anonymous

11 months ago

1.5k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

6 months ago

1.5k
barbershop

Author:
Ishimwe Shadad

1 day ago

8
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

7 months ago

654
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Author:
Ranit Saha

10 months ago

1.7k
Life Tree
by salvator

Author:
Baraka Salvator

6 months ago

784
Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Author:
Muhammad Umair Arshad

3 months ago

455
A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

882
Responsive fullscreen youtube video

Author:
Anonymous

2 years ago

8.9k
blockquote

Author:
Freja Jensen

2 years ago

9.8k
Features Component

Author:
KULDEEP

4 months ago

716
Simple dialpad

Author:
Brandon D

2 years ago

11.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components