Home
Juan D. Cortorreal
Interactive Multi-Method Donation Section

Interactive Multi-Method Donation Section

Overview: A high-trust, conversion-oriented fundraising section styled in the project's signature Navy Blue theme. It provides users with flexible payment options, ranging from one-click fixed amounts to manual bank transfers and cryptocurrency donations.

Key Features:

Smart Amount Logic: Includes a JavaScript-powered selector where users can choose a preset amount ($10, $25, $50) or type a custom value. The interface automatically toggles states (deselecting buttons when typing, and vice-versa) to prevent user error.

Payment Methods:

Quick Card/Checkout: Primary call-to-action column.

Bank Transfer: A clean card displaying account details with a "Copy to Clipboard" utility.

Crypto (Bitcoin): A specialized dark-themed card featuring a placeholder QR code and wallet address copying functionality.

Trust Signals: Includes security iconography (lock, shield) and reassuring copy to boost donor confidence.

Visual Hierarchy: Uses a 7/5 grid split to prioritize the immediate donation action while keeping manual payment methods accessible but secondary.

Tech Stack:

Framework: Tailwind CSS.

Icons: Ionicons.

Scripting: Vanilla JavaScript (for amount toggling and clipboard copying functions).

Fonts: DM Serif Display (Headings) + Inter (Body).

Usage: Ideal for the "Support Us" page or a dedicated campaign landing page. The script tag included at the bottom handles all the interactivity (button selection and text copying) without needing external libraries.

This tailwind example is contributed by Juan D. Cortorreal, on 23-Nov-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Form Pricing Other

Author Juan D. Cortorreal

129

Fork Fullscreen

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        .font-serif-display { font-family: 'DM Serif Display', serif; }
        .font-sans-body { font-family: 'Inter', sans-serif; }
        /* Animación suave para cambio de pestañas/opciones */
        .fade-in { animation: fadeIn 0.3s ease-in-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
    </style>
</head>
<body class="bg-gray-50 font-sans-body">

<section class="py-20 px-4 md:px-8">
    <div class="max-w-5xl mx-auto">
        
        <div class="text-center mb-12">
            <span class="text-blue-600 font-bold tracking-wider uppercase text-sm">Tu apoyo cuenta</span>
            <h2 class="text-4xl md:text-5xl font-serif-display text-gray-900 mt-2 mb-4">Impulsa nuestra <span class="text-blue-900 italic">Misión</span></h2>
            <p class="text-gray-500 max-w-2xl mx-auto">Tu contribución nos ayuda a seguir brindando talleres de arte, seminarios educativos y recursos para nuestra comunidad.</p>
        </div>

<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
            
            <div class="lg:col-span-7 bg-white rounded-3xl shadow-xl p-8 md:p-10 border border-gray-100 relative overflow-hidden">
                <div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-blue-900 to-blue-500"></div>
                
                <h3 class="text-2xl font-serif-display text-gray-800 mb-6">Selecciona un monto</h3>
                
                <div class="grid grid-cols-3 gap-4 mb-6">
                    <button onclick="selectAmount(this, 10)" class="donation-btn py-4 rounded-xl border-2 border-gray-200 text-gray-600 font-bold text-xl hover:border-blue-600 hover:text-blue-600 transition-all focus:outline-none bg-white">
                        $10
                    </button>
                    <button onclick="selectAmount(this, 25)" class="donation-btn py-4 rounded-xl border-2 border-blue-900 bg-blue-900 text-white font-bold text-xl transition-all focus:outline-none shadow-lg transform scale-105 ring-2 ring-blue-300">
                        $25
                    </button>
                    <button onclick="selectAmount(this, 50)" class="donation-btn py-4 rounded-xl border-2 border-gray-200 text-gray-600 font-bold text-xl hover:border-blue-600 hover:text-blue-600 transition-all focus:outline-none bg-white">
                        $50
                    </button>
                </div>

<div class="mb-8">
                    <label class="block text-sm font-semibold text-gray-500 mb-2">O ingresa tu propio monto</label>
                    <div class="relative group">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <span class="text-gray-400 text-lg font-bold group-focus-within:text-blue-600">$</span>
                        </div>
                        <input type="number" id="custom-amount" placeholder="0.00" onfocus="clearButtons()"
                            class="w-full pl-10 pr-4 py-4 rounded-xl bg-gray-50 border-2 border-gray-200 text-gray-800 font-bold text-lg focus:outline-none focus:border-blue-600 focus:bg-white focus:ring-4 focus:ring-blue-600/10 transition-all">
                    </div>
                </div>

<button class="w-full bg-blue-900 hover:bg-blue-800 text-white font-bold py-4 rounded-xl shadow-lg hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex items-center justify-center gap-2 text-lg">
                    <span>Proceder con la Donación</span>
                    <ion-icon name="heart" class="text-red-400"></ion-icon>
                </button>
                
                <p class="text-xs text-center text-gray-400 mt-4 flex items-center justify-center gap-1">
                    <ion-icon name="lock-closed-outline"></ion-icon> Transacción segura encriptada
                </p>
            </div>

<div class="lg:col-span-5 space-y-6">
                
                <div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100 relative group">
                    <div class="flex items-center gap-3 mb-4">
                        <div class="w-10 h-10 bg-blue-50 rounded-full flex items-center justify-center text-blue-900">
                            <ion-icon name="business-outline" class="text-xl"></ion-icon>
                        </div>
                        <h4 class="font-bold text-gray-800">Transferencia Bancaria</h4>
                    </div>
                    
                    <div class="bg-gray-50 rounded-xl p-4 border border-gray-200 space-y-3">
                        <div>
                            <p class="text-xs text-gray-500 uppercase font-bold">Banco</p>
                            <p class="text-gray-800 font-medium">Banco Sinnombre por defecto</p>
                        </div>
                        <div class="relative">
                            <p class="text-xs text-gray-500 uppercase font-bold">No. de Cuenta</p>
                            <div class="flex items-center justify-between">
                                <p class="text-gray-800 font-mono text-lg font-bold tracking-wide" id="bank-account">123-456789-0</p>
                                <button onclick="copyToClipboard('bank-account')" class="text-blue-600 hover:text-blue-800 text-sm font-semibold flex items-center gap-1 bg-white px-2 py-1 rounded shadow-sm hover:shadow">
                                    <ion-icon name="copy-outline"></ion-icon> Copiar
                                </button>
                            </div>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 uppercase font-bold">Nombre</p>
                            <p class="text-gray-800 font-medium">Fundación sinnombre</p>
                        </div>
                    </div>
                </div>

<div class="bg-[#0F172A] rounded-2xl shadow-lg p-6 text-white relative overflow-hidden group">
                    <ion-icon name="logo-bitcoin" class="absolute -right-4 -bottom-4 text-9xl text-white opacity-5 rotate-12"></ion-icon>
                    
                    <div class="flex items-center gap-3 mb-4 relative z-10">
                        <div class="w-10 h-10 bg-orange-500 rounded-full flex items-center justify-center text-white">
                            <ion-icon name="logo-bitcoin" class="text-xl"></ion-icon>
                        </div>
                        <h4 class="font-bold">Donar con Bitcoin</h4>
                    </div>

<div class="flex gap-4 relative z-10">
                        <div class="w-24 h-24 bg-white rounded-lg p-1 flex-shrink-0">
                            <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa" alt="BTC QR" class="w-full h-full object-contain">
                        </div>
                        
                        <div class="flex flex-col justify-center w-full overflow-hidden">
                            <p class="text-xs text-gray-400 uppercase font-bold mb-1">Wallet Address</p>
                            <div class="bg-white/10 rounded-lg p-2 flex items-center justify-between border border-white/20">
                                <p class="text-xs font-mono text-gray-200 truncate mr-2" id="btc-wallet">1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa</p>
                                <button onclick="copyToClipboard('btc-wallet')" class="text-orange-400 hover:text-orange-300 hover:bg-white/10 rounded p-1 transition-colors">
                                    <ion-icon name="copy-outline"></ion-icon>
                                </button>
                            </div>
                            <p class="text-[10px] text-gray-400 mt-2 italic">*Solo red Bitcoin (BTC)</p>
                        </div>
                    </div>
                </div>

</div>
        </div>
    </div>

// Limpiar botones al escribir manual
        function clearButtons() {
            document.querySelectorAll('.donation-btn').forEach(b => {
                b.classList.remove('bg-blue-900', 'text-white', 'border-blue-900', 'shadow-lg', 'scale-105', 'ring-2', 'ring-blue-300');
                b.classList.add('bg-white', 'text-gray-600', 'border-gray-200');
            });
        }

// Lógica de Copiar al Portapapeles
        function copyToClipboard(elementId) {
            const text = document.getElementById(elementId).innerText;
            navigator.clipboard.writeText(text).then(() => {
                alert('¡Copiado al portapapeles!');
            });
        }
    </script>
</section>

</body>
</html>

Related Examples

Glassmorphism form

Author:
Sophia Baker

2 years ago

18.1k
Glassmorphism form

Author:
Geoffrey Callaghan

2 years ago

6.6k
authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

1 year ago

2.7k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

1 year ago

3.5k
Age verification 18+

Author:
Maxim

11 months ago

1k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

10 months ago

1.3k
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Author:
Abdul Baset Bappy

9 months ago

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

8 months ago

1k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

8 months ago

1.3k
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

8 months ago

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

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components