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

6.7k

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

Show credit card details

Author:
Manuela Bianka

2 years ago

11.6k
Maintenance page

Author:
Faye

5 months ago

858
Maintenance page template
The site is under maintenance placeholder page

Author:
Anonymous

1 year ago

8.4k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

3 months ago

951
Privacy Policy
Privacy Policy

Author:
Tanvir Hasan Bappy (Tanvir)

5 months ago

451
Multi Step form with javascript
A Beautiful multi step form using HTML CSS and JS

Author:
Walid Ahmad

7 months ago

803
Half filled circle with tailwind

Author:
Alok

2 years ago

12.7k
Your upside-down text

Author:
Isabella Kowalski

2 years ago

12.3k
Serious Input Html
Input text serious like apple or smth

Author:
Cristian

1 year ago

1.6k
Soft Lights & Slow Beats
Sink into the tranquil rhythms of a Sunday afternoon. This playlist blends soft melodies and gentle beats to create a mysterious yet comforting atmosphere — perfect for relaxing, reflecting, or simply unwinding as the day fades away.

Author:
Bonimater

1 week ago

15
Hacker terminal #fake
hacker terminal tailwind css

Author:
QQ-VVN

2 weeks ago

119
visacardes
I'll create professional Visa card components with realistic styling and multiple card types

Author:
ishimwe prince

1 week ago

13

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components