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

9 months ago

1.7k
Active Beauty Main Page

Author:
Maxim

8 months ago

1.1k
Quiting

Author:
Bruz

2 months ago

199
Mobile device mockup
Smartphone (with notch) mockup in tailwind

Author:
Prajwal Hallale

2 years ago

10.7k
Safari browser mockup

Author:
Leon Bachmann

2 years ago

8.1k
Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Author:
Hamza Atig

7 months ago

952
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

7 months ago

999
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

6 months ago

756
E-Learning Course Card with Badge and Level Indicator
An HTML and Tailwind CSS component mockup for displaying course information. Features include a placeholder image area with an overlaid certificate badge, a distinct level indicator banner below the image, category text, a course title, key details (like duration and learner count placeholders), and primary/secondary action buttons. Designed for e-learning platforms or course listings.

Author:
Hamza Atig

7 months ago

815
Credit card mockup - 2

Author:
Fabio Daneluzzi

5 months ago

649
Website Mockup
An Onyx Component. This can be used for landing pages / other website mockup purposes. It's clean design will fit with most SAAS projects.

Author:
Coastal UI

1 year ago

1.7k
Mac terminal mockup

Author:
Manon Daniel

2 years ago

10.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components