Home
Tanvir Hasan Bappy (Tanvir)
AutoFill Pro - Smart Form Automation

AutoFill Pro - Smart Form Automation

This tailwind example is contributed by Tanvir Hasan Bappy (Tanvir), on 01-Feb-2026. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Front page

Landing Page

Author Tanvir Hasan Bappy (Tanvir)

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AutoFill Pro - Smart Form Automation</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background: #0f172a;
            overflow-x: hidden;
        }
        
        .font-display {
            font-family: 'Space Grotesk', sans-serif;
        }
        
        /* Animated background */
        .bg-mesh {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: 
                radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
                radial-gradient(at 100% 0%, rgba(168, 85, 247, 0.15) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(236, 72, 153, 0.15) 0px, transparent 50%),
                radial-gradient(at 0% 100%, rgba(34, 211, 238, 0.15) 0px, transparent 50%);
            animation: pulse 10s ease-in-out infinite;
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.1); opacity: 0.8; }
        }
        
        /* Floating particles */
        .particle {
            position: fixed;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 50%;
            pointer-events: none;
            animation: float 20s infinite linear;
        }
        
        @keyframes float {
            from { transform: translateY(100vh) rotate(0deg); }
            to { transform: translateY(-100px) rotate(360deg); }
        }
        
        /* Glassmorphism */
        .glass {
            background: rgba(30, 41, 59, 0.7);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* Input animations */
        .input-group {
            position: relative;
            transition: all 0.3s ease;
        }
        
        .input-field {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            background: rgba(15, 23, 42, 0.6);
        }
        
        .input-field:focus {
            transform: translateY(-2px);
            box-shadow: 0 10px 40px -10px rgba(99, 102, 241, 0.3);
        }
        
        .input-field.filled {
            border-color: #10b981;
            background: rgba(16, 185, 129, 0.05);
        }
        
        .input-field.filling {
            animation: fillPulse 0.5s ease;
        }
        
        @keyframes fillPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.02); border-color: #6366f1; }
            100% { transform: scale(1); }
        }
        
        /* Progress bar */
        .progress-container {
            position: relative;
            overflow: hidden;
        }
        
        .progress-fill {
            background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
            background-size: 200% 100%;
            animation: gradient 2s linear infinite;
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        @keyframes gradient {
            0% { background-position: 0% 50%; }
            100% { background-position: 200% 50%; }
        }
        
        /* Button effects */
        .btn-magic {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .btn-magic::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }
        
        .btn-magic:active::before {
            width: 300px;
            height: 300px;
        }
        
        .btn-magic:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 40px -10px rgba(99, 102, 241, 0.5);
        }
        
        /* Typing cursor effect */
        .typing-cursor::after {
            content: '|';
            animation: blink 1s infinite;
            color: #6366f1;
            margin-left: 2px;
        }
        
        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }
        
        /* Success checkmark */
        .checkmark {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: block;
            stroke-width: 2;
            stroke: #fff;
            stroke-miterlimit: 10;
            box-shadow: inset 0px 0px 0px #10b981;
            animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
        }
        
        .checkmark__circle {
            stroke-dasharray: 166;
            stroke-dashoffset: 166;
            stroke-width: 2;
            stroke-miterlimit: 10;
            stroke: #10b981;
            fill: none;
            animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
        }
        
        .checkmark__check {
            transform-origin: 50% 50%;
            stroke-dasharray: 48;
            stroke-dashoffset: 48;
            animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
        }
        
        @keyframes stroke {
            100% { stroke-dashoffset: 0; }
        }
        
        /* Toast notification */
        .toast {
            transform: translateX(400px);
            transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        
        .toast.show {
            transform: translateX(0);
        }
        
        /* Select styling */
        select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 0.5rem center;
            background-repeat: no-repeat;
            background-size: 1.5em 1.5em;
        }
        
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: rgba(15, 23, 42, 0.3);
        }
        ::-webkit-scrollbar-thumb {
            background: rgba(99, 102, 241, 0.5);
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(99, 102, 241, 0.8);
        }
    </style>
</head>
<body class="text-slate-200 min-h-screen flex items-center justify-center p-4">

<div class="bg-mesh"></div>
    <div id="particles"></div>

<div class="w-full max-w-4xl relative z-10">
        
        
        <div class="text-center mb-8 space-y-2">
            <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-sm text-indigo-300 mb-4 border border-indigo-500/20">
                <i class="fas fa-wand-magic-sparkles animate-pulse"></i>
                <span>Smart Form Automation</span>
            </div>
            <h1 class="font-display text-5xl md:text-6xl font-bold bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
                AutoFill Pro
            </h1>
            <p class="text-slate-400 text-lg">Experience the magic of intelligent form completion</p>
        </div>

<div class="glass rounded-2xl p-6 mb-6 flex flex-wrap gap-4 justify-between items-center">
            <div class="flex items-center gap-4">
                <div class="flex items-center gap-2">
                    <span class="text-sm text-slate-400">Speed:</span>
                    <input type="range" id="speedControl" min="1" max="5" value="3" class="w-32 accent-indigo-500">
                    <span id="speedLabel" class="text-sm font-mono text-indigo-400">Normal</span>
                </div>
            </div>
            <div class="flex gap-3">
                <button onclick="clearForm()" class="px-4 py-2 rounded-lg border border-slate-600 hover:border-slate-400 text-slate-400 hover:text-white transition-all text-sm">
                    <i class="fas fa-trash-alt mr-2"></i>Clear
                </button>
                <button onclick="autoFill()" class="btn-magic px-6 py-2 rounded-lg bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium shadow-lg shadow-indigo-500/25">
                    <i class="fas fa-magic mr-2"></i>Auto Fill
                </button>
            </div>
        </div>

<div class="mb-6 progress-container h-2 bg-slate-800 rounded-full overflow-hidden">
            <div id="progressBar" class="progress-fill h-full w-0 rounded-full"></div>
        </div>

<div class="glass rounded-3xl p-8 md:p-10 shadow-2xl">
            <form id="autoForm" class="space-y-6" onsubmit="event.preventDefault(); submitForm();">
                
                
                <div class="space-y-4">
                    <div class="flex items-center gap-2 mb-4 text-indigo-300">
                        <i class="fas fa-user-circle"></i>
                        <h3 class="font-display font-semibold">Personal Information</h3>
                    </div>
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="input-group">
                            <label class="block text-sm font-medium text-slate-400 mb-2">Full Name</label>
                            <div class="relative">
                                <input type="text" id="fullName" class="input-field w-full px-4 py-3 rounded-xl border border-slate-700 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500" placeholder="John Doe">
                                <i class="fas fa-check-circle absolute right-3 top-1/2 -translate-y-1/2 text-emerald-500 opacity-0 transition-opacity check-icon"></i>
                            </div>
                        </div>
                        
                        <div class="input-group">
                            <label class="block text-sm font-medium text-slate-400 mb-2">Email Address</label>
                            <div class="relative">
                                <input type="email" id="email" class="input-field w-full px-4 py-3 rounded-xl border border-slate-700 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500" placeholder="john@example.com">
                                <i class="fas fa-check-circle absolute right-3 top-1/2 -translate-y-1/2 text-emerald-500 opacity-0 transition-opacity check-icon"></i>
                            </div>
                        </div>
                    </div>

<div class="grid md:grid-cols-2 gap-6">
                        <div class="input-group">
                            <label class="block text-sm font-medium text-slate-400 mb-2">Phone Number</label>
                            <div class="relative">
                                <input type="tel" id="phone" class="input-field w-full px-4 py-3 rounded-xl border border-slate-700 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500" placeholder="+1 (555) 123-4567">
                                <i class="fas fa-check-circle absolute right-3 top-1/2 -translate-y-1/2 text-emerald-500 opacity-0 transition-opacity check-icon"></i>
                            </div>
                        </div>
                        
                        <div class="input-group">
                            <label class="block text-sm font-medium text-slate-400 mb-2">Date of Birth</label>
                            <div class="relative">
                                <input type="date" id="dob" class="input-field w-full px-4 py-3 rounded-xl border border-slate-700 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500">
                                <i class="fas fa-check-circle absolute right-3 top-1/2 -translate-y-1/2 text-emerald-500 opacity-0 transition-opacity check-icon"></i>
                            </div>
                        </div>
                    </div>
                </div>

<div class="space-y-4 pt-6 border-t border-slate-700/50">
                    <div class="flex items-center gap-2 mb-4 text-purple-300">
                        <i class="fas fa-map-marker-alt"></i>
                        <h3 class="font-display font-semibold">Address Details</h3>
                    </div>
                    
                    <div class="input-group">
                        <label class="block text-sm font-medium text-slate-400 mb-2">Street Address</label>
                        <div class="relative">
                            <input type="text" id="address" class="input-field w-full px-4 py-3 rounded-xl border border-slate-700 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500" placeholder="123 Innovation Drive">
                            <i class="fas fa-check-circle absolute right-3 top-1/2 -translate-y-1/2 text-emerald-500 opacity-0 transition-opacity check-icon"></i>
                        </div>
                    </div>

<div class="grid md:grid-cols-3 gap-6">
                        <div class="input-group">
                            <label class="block text-sm font-medium text-slate-400 mb-2">City</label>
                            <div class="relative">
                                <input type="text" id="city" class="input-field w-full px-4 py-3 rounded-xl border border-slate-700 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500" placeholder="San Francisco">
                                <i class="fas fa-check-circle absolute right-3 top-1/2 -translate-y-1/2 text-emerald-500 opacity-0 transition-opacity check-icon"></i>
                            </div>
                        </div>
                        
                        <div class="input-group">
                            <label class="block text-sm font-medium text-slate-400 mb-2">State</label>
                            <div class="relative">
                                <select id="state" class="input-field w-full px-4 py-3 rounded-xl border border-slate-700 text-white focus:outline-none focus:border-indigo-500 appearance-none">
                                    <option value="">Select State</option>
                                    <option value="CA">California</option>
                                    <option value="NY">New York</option>
                                    <option value="TX">Texas</option>
                                    <option value="FL">Florida</option>
                                    <option value="WA">Washington</option>
                                </select>
                                <i class="fas fa-check-circle absolute right-8 top-1/2 -translate-y-1/2 text-emerald-500 opacity-0 transition-opacity check-icon"></i>
                            </div>
                        </div>
                        
                        <div class="input-group">
                            <label class="block text-sm font-medium text-slate-400 mb-2">ZIP Code</label>
                            <div class="relative">
                                <input type="text" id="zip" class="input-field w-full px-4 py-3 rounded-xl border border-slate-700 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500" placeholder="94102">
                                <i class="fas fa-check-circle absolute right-3 top-1/2 -translate-y-1/2 text-emerald-500 opacity-0 transition-opacity check-icon"></i>
                            </div>
                        </div>
                    </div>
                </div>

<div class="space-y-4 pt-6 border-t border-slate-700/50">
                    <div class="flex items-center gap-2 mb-4 text-pink-300">
                        <i class="fas fa-briefcase"></i>
                        <h3 class="font-display font-semibold">Professional Info</h3>
                    </div>
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="input-group">
                            <label class="block text-sm font-medium text-slate-400 mb-2">Company</label>
                            <div class="relative">
                                <input type="text" id="company" class="input-field w-full px-4 py-3 rounded-xl border border-slate-700 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500" placeholder="Tech Corp Inc.">
                                <i class="fas fa-check-circle absolute right-3 top-1/2 -translate-y-1/2 text-emerald-500 opacity-0 transition-opacity check-icon"></i>
                            </div>
                        </div>
                        
                        <div class="input-group">
                            <label class="block text-sm font-medium text-slate-400 mb-2">Job Title</label>
                            <div class="relative">
                                <input type="text" id="jobTitle" class="input-field w-full px-4 py-3 rounded-xl border border-slate-700 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500" placeholder="Senior Developer">
                                <i class="fas fa-check-circle absolute right-3 top-1/2 -translate-y-1/2 text-emerald-500 opacity-0 transition-opacity check-icon"></i>
                            </div>
                        </div>
                    </div>

<div class="pt-6">
                    <button type="submit" id="submitBtn" class="w-full py-4 rounded-xl bg-gradient-to-r from-emerald-600 to-teal-600 text-white font-semibold text-lg shadow-lg shadow-emerald-500/25 hover:shadow-emerald-500/40 transform hover:-translate-y-1 transition-all duration-300 flex items-center justify-center gap-2 group">
                        <span>Complete Registration</span>
                        <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
                    </button>
                </div>
            </form>
        </div>

<div class="mt-6 grid grid-cols-3 gap-4 text-center">
            <div class="glass rounded-xl p-4">
                <div class="text-2xl font-bold text-indigo-400 font-display" id="fieldCount">0/10</div>
                <div class="text-xs text-slate-500 uppercase tracking-wider mt-1">Fields Filled</div>
            </div>
            <div class="glass rounded-xl p-4">
                <div class="text-2xl font-bold text-purple-400 font-display" id="timeSaved">0s</div>
                <div class="text-xs text-slate-500 uppercase tracking-wider mt-1">Time Saved</div>
            </div>
            <div class="glass rounded-xl p-4">
                <div class="text-2xl font-bold text-pink-400 font-display" id="accuracyRate">100%</div>
                <div class="text-xs text-slate-500 uppercase tracking-wider mt-1">Accuracy</div>
            </div>
        </div>
    </div>

<div id="toast" class="toast fixed top-6 right-6 glass rounded-xl p-4 flex items-center gap-3 shadow-2xl border border-emerald-500/20 z-50">
        <div class="w-10 h-10 rounded-full bg-emerald-500/20 flex items-center justify-center">
            <svg class="checkmark w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
                <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
                <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
            </svg>
        </div>
        <div>
            <h4 class="font-semibold text-emerald-400">Success!</h4>
            <p class="text-sm text-slate-400">Form completed automatically</p>
        </div>
    </div>

// Speed configurations
        const speeds = {
            1: { delay: 100, label: 'Fast' },
            2: { delay: 50, label: 'Normal' },
            3: { delay: 30, label: 'Slow' },
            4: { delay: 15, label: 'Dramatic' },
            5: { delay: 5, label: 'Instant' }
        };

let isFilling = false;

// Initialize particles
        function createParticles() {
            const container = document.getElementById('particles');
            for (let i = 0; i < 20; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.width = Math.random() * 100 + 'px';
                particle.style.height = particle.style.width;
                particle.style.left = Math.random() * 100 + '%';
                particle.style.animationDelay = Math.random() * 20 + 's';
                particle.style.animationDuration = (Math.random() * 20 + 20) + 's';
                container.appendChild(particle);
            }
        }

createParticles();

// Speed control
        document.getElementById('speedControl').addEventListener('input', (e) => {
            document.getElementById('speedLabel').textContent = speeds[e.target.value].label;
        });

// Typing effect function
        async function typeText(element, text, speed) {
            element.value = '';
            element.classList.add('filling');
            element.focus();
            
            const charDelay = speed === 5 ? 0 : speeds[speed].delay;
            
            for (let i = 0; i < text.length; i++) {
                if (speed === 5) {
                    element.value = text;
                } else {
                    element.value += text[i];
                    await sleep(charDelay);
                }
                
                // Update progress
                updateProgress();
            }
            
            element.classList.remove('filling');
            element.classList.add('filled');
            element.blur();
            
            // Show checkmark
            const checkIcon = element.parentElement.querySelector('.check-icon');
            if (checkIcon) checkIcon.style.opacity = '1';
            
            updateStats();
        }

function sleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        }

async function autoFill() {
            if (isFilling) return;
            isFilling = true;
            
            const speed = parseInt(document.getElementById('speedControl').value);
            const fields = ['fullName', 'email', 'phone', 'dob', 'address', 'city', 'state', 'zip', 'company', 'jobTitle', 'bio'];
            
            // Reset form first
            clearForm(false);
            
            const startTime = Date.now();
            
            for (let i = 0; i < fields.length; i++) {
                const field = document.getElementById(fields[i]);
                const value = sampleData[fields[i]];
                
                if (field && value) {
                    // Scroll to field
                    field.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    
                    if (field.tagName === 'SELECT') {
                        field.value = value;
                        field.classList.add('filled');
                        const checkIcon = field.parentElement.querySelector('.check-icon');
                        if (checkIcon) checkIcon.style.opacity = '1';
                        updateProgress();
                        updateStats();
                        await sleep(300);
                    } else {
                        await typeText(field, value, speed);
                        await sleep(200);
                    }
                }
            }
            
            // Calculate time saved
            const timeSaved = Math.floor((Date.now() - startTime) / 1000);
            document.getElementById('timeSaved').textContent = timeSaved + 's';
            
            // Show success toast
            showToast();
            
            isFilling = false;
            
            // Flash success on submit button
            const submitBtn = document.getElementById('submitBtn');
            submitBtn.classList.add('ring-4', 'ring-emerald-500/50');
            setTimeout(() => submitBtn.classList.remove('ring-4', 'ring-emerald-500/50'), 1000);
        }

function updateProgress() {
            const inputs = document.querySelectorAll('.input-field');
            const filled = document.querySelectorAll('.input-field.filled');
            const percent = (filled.length / inputs.length) * 100;
            document.getElementById('progressBar').style.width = percent + '%';
        }

function showToast() {
            const toast = document.getElementById('toast');
            toast.classList.add('show');
            setTimeout(() => toast.classList.remove('show'), 3000);
        }

// Add input listeners for manual typing
        document.querySelectorAll('.input-field').forEach(input => {
            input.addEventListener('input', function() {
                if (this.value) {
                    this.classList.add('filled');
                    const checkIcon = this.parentElement.querySelector('.check-icon');
                    if (checkIcon) checkIcon.style.opacity = '1';
                } else {
                    this.classList.remove('filled');
                    const checkIcon = this.parentElement.querySelector('.check-icon');
                    if (checkIcon) checkIcon.style.opacity = '0';
                }
                updateProgress();
                updateStats();
            });
        });

// Initialize stats
        updateStats();
    </script>
</body>
</html>

Related Examples

Instagram clone
clone a site that kind off instagram

Author:
Tofayel Islam

1 month ago

379
Chinese

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

334
My Personal Landing page
This HTML document showcases Aydin Vesali Moghaddam's personal portfolio, highlighting his journey in web development. The page features a responsive design that adapts to various screen sizes, ensuring a seamless user experience across devices. It includes a personal introduction, a brief overview of Aydin's tech journey, and a contact form for visitors to subscribe to updates. Additionally, the page provides links to Aydin's Discord, website, and Twitter, offering multiple avenues for connecting and staying updated on his projects.

Author:
AyDin VM

1 year ago

6.1k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

9 months ago

401
cards
html , css ,

Author:
Hacker Development

9 months ago

854
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

10 months ago

1.9k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

11 months ago

989
Learn Confidently with Rabbil Hasan

Author:
Tanvir Hasan Bappy (Tanvir)

4 months ago

173
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

8.6k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

1 year ago

2.1k
EduConnect
EduConnect

Author:
Tanvir Hasan Bappy (Tanvir)

6 months ago

373
ChinaEdu
ChinaEdu

Author:
Tanvir Hasan Bappy (Tanvir)

6 months ago

344

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components