Food Ordering Dashboard

A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

This tailwind example is contributed by Muhammad Umair Arshad, on 26-May-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is Vote

Card Other Grid Rating

Author Muhammad Umair Arshad

Tailwind v3.4 1.6k 7

Fork Fullscreen

<div class="w-full h-full bg-rose-100/30 dark:bg-[#1b1b1b] py-16">
  <div class="max-w-6xl mx-auto flex flex-col justify-center items-center">
    
    <p class="pb-2 text-lg lg:text-2xl text-rose-600 font-semibold">Category</p>
    <h2 class="text-3xl lg:text-5xl text-center font-serif font-semibold mb-12 dark:text-white">
      Choose Your Best Food
    </h2>

<div class="flex flex-wrap gap-8 justify-center items-center">
      
      <div
        class="group w-[18rem] sm:w-[20rem] bg-white dark:bg-[#262525] rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:scale-105">
        <img
          class="w-full h-[14rem] object-cover"
          src="https://images.unsplash.com/photo-1600891964599-f61ba0e24092?auto=format&fit=crop&w=800&q=80"
          alt="Sushi"
        />
        <div class="p-5">
          <h2 class="text-2xl font-semibold mb-1 group-hover:text-rose-600 dark:text-white">Sushi Delight</h2>
          <p class="text-gray-700 dark:text-gray-300 mb-4">Salmon, Rice & Avocado</p>
          <div class="flex justify-between items-center mb-4">
            <div class="flex -space-x-3">
              <img class="w-9 h-9 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/68.jpg" alt="" />
              <img class="w-9 h-9 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/45.jpg" alt="" />
              <img class="w-9 h-9 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/52.jpg" alt="" />
            </div>
            <div class="flex items-center text-yellow-500 text-xl font-bold">
              <ion-icon name="star"></ion-icon>
              <span class="text-black dark:text-white ml-1">4.9</span>
            </div>
          </div>
          <button
            class="w-full py-2 border border-rose-600 dark:border-gray-500 text-rose-700 dark:text-white rounded-full uppercase font-bold transition duration-300 hover:bg-rose-600 hover:text-white dark:hover:bg-white dark:hover:text-black">
            Order now
          </button>
        </div>
      </div>

<div
  class="group w-[18rem] sm:w-[20rem] bg-white dark:bg-[#262525] rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:scale-105">
   <img
          class="w-full h-[14rem] object-cover"
          src="https://images.unsplash.com/photo-1600891964599-f61ba0e24092?auto=format&fit=crop&w=800&q=80"
          alt="Sushi"
        />
  <div class="p-5">
    <h2 class="text-2xl font-semibold mb-1 group-hover:text-rose-600 dark:text-white">Creamy Pasta</h2>
    <p class="text-gray-700 dark:text-gray-300 mb-4">Cream, Cheese & Basil</p>
    <div class="flex items-center justify-between">
      <div class="flex -space-x-3">
        <img class="w-9 h-9 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/11.jpg" alt="">
        <img class="w-9 h-9 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/12.jpg" alt="">
        <img class="w-9 h-9 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/13.jpg" alt="">
      </div>
      <span class="flex items-center text-yellow-500 font-semibold text-lg">
        <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.186 3.655a1 1 0 00.95.69h3.813c.969 0 1.371 1.24.588 1.81l-3.087 2.24a1 1 0 00-.364 1.118l1.186 3.655c.3.921-.755 1.688-1.54 1.118l-3.087-2.24a1 1 0 00-1.175 0l-3.087 2.24c-.785.57-1.84-.197-1.54-1.118l1.186-3.655a1 1 0 00-.364-1.118L2.421 9.082c-.783-.57-.38-1.81.588-1.81h3.813a1 1 0 00.95-.69l1.186-3.655z"/>
        </svg>
        4.8
      </span>
    </div>
    <button
      class="mt-4 w-full border border-rose-500 text-rose-500 hover:bg-rose-500 hover:text-white font-semibold py-2 px-4 rounded-full transition duration-300">
      ORDER NOW
    </button>
  </div>
</div>

<div
        class="group w-[18rem] sm:w-[20rem] bg-white dark:bg-[#262525] rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:scale-105">
         <img
          class="w-full h-[14rem] object-cover"
          src="https://images.unsplash.com/photo-1600891964599-f61ba0e24092?auto=format&fit=crop&w=800&q=80"
          alt="Sushi"
        />

<div class="p-5">
          <h2 class="text-2xl font-semibold mb-1 group-hover:text-rose-600 dark:text-white">Chocolate Bliss</h2>
          <p class="text-gray-700 dark:text-gray-300 mb-4">Dark Chocolate & Cream</p>
          <div class="flex justify-between items-center mb-4">
            <div class="flex -space-x-3">
              <img class="w-9 h-9 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/25.jpg" alt="" />
              <img class="w-9 h-9 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/21.jpg" alt="" />
              <img class="w-9 h-9 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/62.jpg" alt="" />
            </div>
            <div class="flex items-center text-yellow-500 text-xl font-bold">
              <ion-icon name="star"></ion-icon>
              <span class="text-black dark:text-white ml-1">5.0</span>
            </div>
          </div>
          <button
            class="w-full py-2 border border-rose-600 dark:border-gray-500 text-rose-700 dark:text-white rounded-full uppercase font-bold transition duration-300 hover:bg-rose-600 hover:text-white dark:hover:bg-white dark:hover:text-black">
            Order now
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

Related Examples

Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Amit Pachange

4 years ago

53.6k
Responsive Feature Card

Gopi Yadav

4 years ago

14.3k
Responsive Article Section

Prashant

4 years ago

17.2k
Products card grid
Example of product card grid with product image and pricing

Noob

3 years ago

24.8k
Info cards
Show various statistics on your website

Arya

3 years ago

12k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25k
Features grid

Sophia Baker

3 years ago

10.7k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.4k
Card grid for posts

Mr Robot

3 years ago

24.1k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
Card grid section
Display article/blog grid

Mr Robot

3 years ago

31.2k