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.5k

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

BONIMATOR Responsive Tailwind Starter Template
Responsive Tailwind Starter Template

Author:
Bonimater

7 months ago

807
Background image section

Author:
Marc

2 years ago

6.5k
profil_eleve.html

Author:
Anonymous

3 months ago

172
Hero

Author:
ORGIN_DREAMS

8 months ago

1.2k
Date picker
Date picker example using flatpickr library

Author:
Lîmåã M

2 years ago

17.2k
coffee
a beverage brewed from the roasted and ground seeds of the tropical evergreen coffee plant. Coffee is one of the three most popular beverages in the world (alongside water and tea), and it is one of the most profitable international commodities

Author:
Augustin

8 months ago

978
navigation header
responsive navigation header

Author:
Abid Ullah

1 year ago

2.5k
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

Author:
SANJAY SINGH GARIYA

10 months ago

1.8k
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

7 months ago

727
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Mohit Prajapat

9 months ago

685
Text Overlay Effect
This is a text overlay effect, featuring a subtle background title and a prominent foreground heading. This design enhances visual interest while maintaining a clean, modern aesthetic.

Author:
Anum Shahana

1 year ago

1.5k
Half filled circle with tailwind

Author:
Alok

3 years ago

13.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components