Home
Uwera Dorcas
Hero donate

Hero donate

the donation hero

This tailwind example is contributed by Uwera Dorcas, on 27-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are simulation,copy,dummy,miniature,like

Mockup

Author Uwera Dorcas

746

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Donation Hero Component</title>
    <style>
        .hero-donate {
            background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
            color: white;
            padding: 4rem 2rem;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            margin: 2rem auto;
            max-width: 1200px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

.hero-donate-content {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

.hero-donate-title {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            font-weight: 700;
            line-height: 1.2;
        }

.hero-donate-subtitle {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            line-height: 1.6;
            opacity: 0.9;
        }

.donation-options {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 2rem;
        }

.donation-amount {
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 0.8rem 1.5rem;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.donation-amount:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }

.donation-amount:focus {
            outline: none;
            background: white;
            color: #4b6cb7;
        }

.donate-button {
            background: #ff6b6b;
            color: white;
            border: none;
            padding: 1rem 3rem;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
            margin-bottom: 2rem;
        }

.donate-button:hover {
            background: #ff5252;
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
        }

.trust-badges {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

.trust-badge {
            background: rgba(255, 255, 255, 0.1);
            padding: 0.5rem 1.2rem;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 500;
        }

@media (max-width: 768px) {
            .hero-donate {
                padding: 3rem 1.5rem;
            }
            
            .hero-donate-title {
                font-size: 2rem;
            }
            
            .hero-donate-subtitle {
                font-size: 1.1rem;
            }
            
            .donation-amount {
                padding: 0.7rem 1.2rem;
                font-size: 0.9rem;
            }
        }
    </style>
</head>
<body>
    <div class="hero-donate">
        <div class="hero-donate-content">
            <h1 class="hero-donate-title">Make a Difference Today</h1>
            <p class="hero-donate-subtitle">
                Your donation helps us continue our mission and create positive change in the world.
            </p>
            
            <div class="donation-options">
                <button class="donation-amount">$10</button>
                <button class="donation-amount">$25</button>
                <button class="donation-amount">$50</button>
                <button class="donation-amount">$100</button>
                <button class="donation-amount">Other</button>
            </div>
            
            <button class="donate-button">Donate Now</button>
            
            <div class="trust-badges">
                <span class="trust-badge">Secure Payment</span>
                <span class="trust-badge">Tax Deductible</span>
                <span class="trust-badge">100% Transparent</span>
            </div>
        </div>
    </div>
</body>
</html>

Related Examples

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

Author:
Ameth Galarcio

10 months ago

1.7k
Mac terminal mockup

Author:
Quinn

1 month ago

102
iPhone 15 Mockup

Author:
cameron202518

10 months ago

745
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

8 months ago

1.3k
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

8 months ago

637
itskoti.com
ssdas

Author:
Tendy Rivaldo

11 months ago

1.1k
Credit card mockup

Author:
Manuela Bianka

2 years ago

10.4k
iPhone 15 Mockup
The "Screen Content" div can be manipulated to have anything inside the screen.

Author:
Coastal UI

1 year ago

1.4k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

8 months ago

933
Mobile device mockup (iPhone 14 pro)
Smartphone (with dynamic island notch) mockup in tailwind

Author:
Prajwal Hallale

3 years ago

10k
Safari browser mockup (dark)

Author:
Leon Bachmann

3 years ago

10.5k
Credit card mockup

Author:
Kofi Osei

2 years ago

12.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components