Home
Anonymous
Recipe Card

Recipe Card

beautiful recipe component with image and step-by-step instructions

This tailwind example is contributed by Anonymous, on 08-Sep-2023. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Anonymous

7.1k

Fork Fullscreen

<h1 class="text-2xl font-bold mb-4 ">
                Delicious Chocolate Cake
            </h1>
            
            <img class="max-w-sm mx-auto my-4 rounded-lg shadow" src="https://images.unsplash.com/photo-1616031037011-087000171abe?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxM3x8Q2hvY29sYXRlJTIwQ2FrZXxlbnwwfDB8fHwxNjk0MTc2ODk0fDA&ixlib=rb-4.0.3&q=80&w=1080" alt="Chocolate Cake" class="mb-4 rounded-lg shadow-md">

<h2 class="text-xl font-semibold mb-2">Ingredients</h2>
            <ul class="list-disc list-inside mb-4">
                <li class="mb-2">2 cups all-purpose flour</li>
                <li class="mb-2">1 3/4 cups granulated sugar</li>
                <li class="mb-2">3/4 cup unsweetened cocoa powder</li>
                <li class="mb-2">1 1/2 tsp baking powder</li>
                <li class="mb-2">1 1/2 tsp baking soda</li>
                
            </ul>

<h2 class="text-xl font-semibold mb-2">Instructions</h2>
            <ol class="list-decimal list-inside mb-6">
                <li class="mb-2">Preheat your oven to 350°F (175°C). Grease and flour two 9-inch round cake pans.</li>
                <li class="mb-2">In a large bowl, sift together the flour, cocoa powder, baking powder, and baking soda.
                </li>
                <li class="mb-2">In another bowl, whisk together the sugar and eggs until well combined.</li>
                <li class="mb-2">Add the wet ingredients to the dry ingredients and mix until smooth.</li>
                <li class="mb-2">Divide the batter evenly between the prepared pans.</li>
                
            </ol>

<p class="text-gray-700 mb-4">Serve the cake with your favorite frosting or enjoy it plain!</p>

<div class="text-center">
                <button class="bg-black text-white px-4 py-2 rounded-lg hover:bg-gray-800">Print Recipe</button>
            </div>
        </div>
    </div>
</body>

Related Examples

blockquote

Author:
Freja Jensen

2 years ago

9.7k
portfolio
Complete Portfolio UI Kit with hero, about, skills, projects, testimonials, contact form, and footer. Fully responsive and dark mode supported using Tailwind CSS.

Author:
Lekhraj Ghimire

4 months ago

603
Hacker terminal #fake
hacker terminal tailwind css

Author:
QQ-VVN

5 months ago

874
Hero Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Author:
Abdul Baset Bappy

7 months ago

819
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

8 months ago

1.4k
Verify OTP
verification code

Author:
gidy

4 months ago

276
authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

1 year ago

2.6k
Payment success page example

Author:
Anonymous

5 months ago

906
Order History
Order History

Author:
Tanvir Hasan Bappy (Tanvir)

6 months ago

622
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

6 months ago

882
Midnight Lava Lamp
Inspired by Steam's old "Big Picture" ambiance. Based on anonymous/background-animation-2

Author:
Nick Girga

5 months ago

785
Stacked Checkboxes

Author:
kishan pc

1 year ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components