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

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

Maintenance page

Author:
Faye

1 week ago

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

Author:
Walid Ahmad

1 month ago

271
Glassmorphism form

Author:
Sophia Baker

1 year ago

15.2k
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

1 year ago

8.3k
Skill showcase section for resume / porfolio website
show skill progression

Author:
Ava Brown

1 year ago

11.6k
Concert ticket

Author:
Elijah Davis

1 year ago

11.8k
Forgot Password Form
1. Color Updates: 1. Changed background to gradient `from-indigo-800 to-blue-900` 2. Updated text colors to match the new theme 3. Changed button colors to `bg-indigo-800` with `hover:bg-blue-900` 4. Updated focus rings to use indigo colors 5. Made footer links white with indigo hover states 2. Enhanced Styling: 1. Added gradient background 2. Improved border radius to `rounded-xl` 3. Enhanced shadow with `shadow-2xl` 4. Added hover scale effects 5. Added fade-in animation 3. Dark Mode Improvements: 1. Enhanced dark mode colors 2. Added system preference detection 3. Improved dark mode contrast 4. Updated dark mode focus rings 4. Added Functionality: 1. Added form validation 2. Added success message 3. Added form reset after submission 4. Added smooth transitions 5. Accessibility Improvements: 1. Maintained ARIA attributes 2. Enhanced focus states 3. Improved color contrast 4. Added transition animations for better UX 6. Added Interactions: 1. Hover effects on all interactive elements 2. Scale animation on card and button hover 3. Smooth color transitions 4. Form validation feedback The form now matches the Indigo-800 and Blue-900 color scheme while maintaining dark mode support and adding enhanced animations and interactions.

Author:
nejaa badr

1 month ago

305
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

7 months ago

1.2k
Question & Answer
questions and answers

Author:
Anonymous

1 year ago

7.5k
Chat template
fullscreen chat template suitable for mobile devices

Author:
Manon Daniel

1 year ago

14.9k
Tailwind invoice example

Author:
Elijah Davis

1 year ago

16.4k
Privacy policy page template

Author:
Sameer Sultana

1 year ago

16k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components