Home
Rajesh Pandey
Recipe card

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 CSS v3. It is responsive. similar terms for this example are Product Showcase, Product card

Card Other Product

Author Rajesh Pandey

437

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