Recipe card

A modern and responsive Tailwind CSS recipe card with image, ingredients, and instructions. Supports dark mode and mobile view.

This tailwind example is contributed by Rajesh Pandey, on 16-May-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Product Showcase, Product card

Card Other Product

Author Rajesh Pandey

Tailwind v3.4 1.8k 5

Fork Fullscreen

<div class="p-6 flex flex-col justify-between">
      <div>
        <h2 class="text-3xl font-bold font-serif text-gray-800 dark:text-white mb-2">Creamy Garlic Chicken</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">A rich and savory chicken recipe perfect for dinner nights.</p>

<div class="mb-4">
          <h3 class="text-xl font-semibold text-teal-600 dark:text-teal-400 mb-2">Ingredients</h3>
          <ul class="list-disc pl-5 space-y-1 text-gray-700 dark:text-gray-200 text-sm">
            <li>2 chicken breasts</li>
            <li>4 cloves garlic, minced</li>
            <li>1 cup heavy cream</li>
            <li>1 tsp paprika</li>
            <li>Salt and pepper to taste</li>
          </ul>
        </div>

<div>
          <h3 class="text-xl font-semibold text-teal-600 dark:text-teal-400 mb-2">Instructions</h3>
          <ol class="list-decimal pl-5 space-y-1 text-gray-700 dark:text-gray-200 text-sm">
            <li>Season the chicken and sear until golden.</li>
            <li>Add garlic and sauté until fragrant.</li>
            <li>Pour in cream and let it simmer.</li>
            <li>Return chicken and cook until done.</li>
            <li>Garnish and serve hot.</li>
          </ol>
        </div>
      </div>

<div class="mt-6 text-right">
        <button class="bg-teal-600 hover:bg-teal-700 text-white font-semibold px-4 py-2 rounded-lg transition">Try Now</button>
      </div>
    </div>
  </div>
</div>

Related Examples

Product card for eCommerce website

Steven Kuhn

4 years ago

13.3k
Product card

Simon Scheffer

3 years ago

32.4k
Product card

Oliver Hansen

3 years ago

10.7k
Product card

Oliver Hansen

3 years ago

14.5k
cards
cards with background animation

Anonymous

3 years ago

11.9k
cards
cards with background animation

Anonymous

3 years ago

12.6k
Card Component
A Simple Card Component with full responsiveness and dark mode supported

Shariar Hasan

2 years ago

4k
Product card
sleek and modern product card

OmKar Mehta

2 years ago

7.4k
cards
cards with background animation

Anonymous

2 years ago

3.8k
Minimal Card
This is awesome looking card

Shaik Sameer Basha

2 years ago

3.4k
Card-Product
Item or card to show products

Ameth Galarcio

2 years ago

5k
Invoice
Invoice

Ameth Galarcio

2 years ago

3.4k