Full HTML Version

What's Included:
Title*: Required input

Description: Optional textarea

Fully responsive and dark mode ready

Simple validation (required on title)

This tailwind example is contributed by Code Master(Mfuranziza Dusabe Hamza), on 16-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Code Master(Mfuranziza Dusabe Hamza)

424

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Acode master</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
        
        * {
            font-family: 'Inter', sans-serif;
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .innovation-gradient {
            background: linear-gradient(135deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
            background-size: 400% 400%;
            animation: gradientShift 8s ease-in-out infinite;
        }
        
        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        .floating-animation {
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        .slide-in {
            animation: slideIn 0.8s ease-out;
        }
        
        @keyframes slideIn {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .tech-grid {
            background-image: 
                linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        .glass-effect {
            backdrop-filter: blur(16px);
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .hover-scale {
            transition: transform 0.3s ease;
        }
        
        .hover-scale:hover {
            transform: scale(1.05);
        }
        
        .pulse-ring {
            animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
        }
        
        @keyframes pulse-ring {
            0% { transform: scale(0.8); opacity: 1; }
            80%, 100% { transform: scale(1.8); opacity: 0; }
        }
    </style>
</head>
<body class="bg-gray-900 text-white overflow-x-hidden">

<nav class="fixed top-0 w-full z-50 glass-effect">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-4">
                <div class="flex items-center space-x-2">
                    <div class="w-10 h-10 innovation-gradient rounded-full flex items-center justify-center">
                        <span class="text-white font-bold text-lg">A</span>
                    </div>
                    <span class="text-xl font-bold">Acode master</span>
                </div>
                <div class="hidden md:flex space-x-8">
                    <a href="#home" class="hover:text-teal-400 transition-colors">Home</a>
                    <a href="#about" class="hover:text-teal-400 transition-colors">About</a>
                    <a href="#innovations" class="hover:text-teal-400 transition-colors">Innovations</a>
                    <a href="#components" class="hover:text-teal-400 transition-colors">Components</a>
                    <a href="#contact" class="hover:text-teal-400 transition-colors">Contact</a>
                </div>
                <button id="darkModeToggle" class="p-2 rounded-lg hover:bg-gray-700 transition-colors">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
                    </svg>
                </button>
            </div>
        </div>
    </nav>

<section id="home" class="min-h-screen flex items-center relative overflow-hidden tech-grid">
        <div class="absolute inset-0 innovation-gradient opacity-20"></div>
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div class="slide-in">
                    <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-teal-400 to-purple-500 bg-clip-text text-transparent">
                        Innovating the Future
                    </h1>
                    <p class="text-xl md:text-2xl mb-8 text-gray-300">
                        Where cutting-edge technology meets revolutionary ideas. Transform your vision into reality with our innovative solutions.
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <button class="bg-teal-600 hover:bg-teal-700 px-8 py-4 rounded-lg font-semibold text-lg hover-scale">
                            Explore Innovations
                        </button>
                        <button class="border border-teal-400 text-teal-400 hover:bg-teal-400 hover:text-gray-900 px-8 py-4 rounded-lg font-semibold text-lg hover-scale">
                            Watch Demo
                        </button>
                    </div>
                </div>
                <div class="floating-animation">
                    <div class="relative">
                        <div class="w-80 h-80 mx-auto relative">
                            <div class="absolute inset-0 bg-gradient-to-r from-teal-400 to-purple-500 rounded-full pulse-ring"></div>
                            <div class="w-full h-full bg-gradient-to-r from-teal-400 to-purple-500 rounded-full flex items-center justify-center">
                                <svg class="w-32 h-32 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="about" class="py-20 bg-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-4xl md:text-5xl font-bold mb-6">About Innovation</h2>
                <p class="text-xl text-gray-300 max-w-3xl mx-auto">
                    We're pioneering the next generation of technological breakthroughs, focusing on AI, quantum computing, and sustainable tech solutions.
                </p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="glass-effect p-8 rounded-2xl hover-scale">
                    <div class="w-16 h-16 bg-teal-600 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A8.04 8.04 0 0012 18.5z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold mb-4 text-center">AI Innovation</h3>
                    <p class="text-gray-300 text-center">Advancing artificial intelligence to solve complex real-world problems and enhance human capabilities.</p>
                </div>
                
                <div class="glass-effect p-8 rounded-2xl hover-scale">
                    <div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold mb-4 text-center">Quantum Computing</h3>
                    <p class="text-gray-300 text-center">Exploring quantum mechanics to revolutionize computing power and solve impossible calculations.</p>
                </div>
                
                <div class="glass-effect p-8 rounded-2xl hover-scale">
                    <div class="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold mb-4 text-center">Sustainable Tech</h3>
                    <p class="text-gray-300 text-center">Creating environmentally conscious solutions that protect our planet for future generations.</p>
                </div>
            </div>
        </div>
    </section>

<section id="innovations" class="py-20 bg-gray-900">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-4xl md:text-5xl font-bold mb-6">Latest Innovations</h2>
                <p class="text-xl text-gray-300">Discover our groundbreaking projects that are shaping tomorrow</p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-gray-800 rounded-2xl overflow-hidden hover-scale">
                    <div class="h-48 bg-gradient-to-r from-teal-400 to-blue-500 relative">
                        <div class="absolute inset-0 flex items-center justify-center">
                            <svg class="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3">Neural Network Processor</h3>
                        <p class="text-gray-300 mb-4">Revolutionary chip architecture that mimics human brain processing for ultra-efficient AI computations.</p>
                        <div class="flex justify-between items-center">
                            <span class="text-teal-400 font-semibold">Status: Beta</span>
                            <button class="text-teal-400 hover:text-teal-300">Learn More →</button>
                        </div>
                    </div>
                </div>
                
                <div class="bg-gray-800 rounded-2xl overflow-hidden hover-scale">
                    <div class="h-48 bg-gradient-to-r from-purple-400 to-pink-500 relative">
                        <div class="absolute inset-0 flex items-center justify-center">
                            <svg class="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3">Quantum Encryption</h3>
                        <p class="text-gray-300 mb-4">Unbreakable security protocols using quantum entanglement for next-generation data protection.</p>
                        <div class="flex justify-between items-center">
                            <span class="text-purple-400 font-semibold">Status: Research</span>
                            <button class="text-purple-400 hover:text-purple-300">Learn More →</button>
                        </div>
                    </div>
                </div>
                
                <div class="bg-gray-800 rounded-2xl overflow-hidden hover-scale">
                    <div class="h-48 bg-gradient-to-r from-green-400 to-emerald-500 relative">
                        <div class="absolute inset-0 flex items-center justify-center">
                            <svg class="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c0 5-4 9-9 9s-9-4-9-9m9 9c0-5 4-9 9-9s9 4 9 9"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3">Carbon Capture AI</h3>
                        <p class="text-gray-300 mb-4">Smart atmospheric processors that actively remove CO2 while generating clean energy.</p>
                        <div class="flex justify-between items-center">
                            <span class="text-green-400 font-semibold">Status: Production</span>
                            <button class="text-green-400 hover:text-green-300">Learn More →</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="components" class="py-20 bg-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-4xl md:text-5xl font-bold mb-6">Innovation Components</h2>
                <p class="text-xl text-gray-300">Save and manage your innovative component ideas</p>
            </div>
            
            
            <div class="flex justify-center items-center p-5">
                <div class="border shadow-teal-300 shadow-lg max-w-2xl w-full p-8 rounded-2xl bg-gray-700 glass-effect">
                    <h3 class="text-3xl font-bold mb-6 text-center bg-gradient-to-r from-teal-400 to-purple-500 bg-clip-text text-transparent">Save Innovation Component</h3>
                    <form id="innovationForm" class="space-y-6">
                        
                        
                        <div>
                            <label for="title" class="block text-lg font-medium mb-2 text-gray-200">
                                Component Title<span class="text-red-400">*</span>
                            </label>
                            <input
                                type="text"
                                id="title"
                                name="title"
                                required
                                placeholder="Enter your innovative component title"
                                class="w-full px-4 py-3 rounded-lg border border-gray-600 bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all"
                            />
                        </div>

<div>
                            <label for="category" class="block text-lg font-medium mb-2 text-gray-200">
                                Innovation Category
                            </label>
                            <select
                                id="category"
                                name="category"
                                class="w-full px-4 py-3 rounded-lg border border-gray-600 bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all"
                            >
                                <option value="">Select a category</option>
                                <option value="ai">Artificial Intelligence</option>
                                <option value="quantum">Quantum Computing</option>
                                <option value="biotech">Biotechnology</option>
                                <option value="sustainability">Sustainability</option>
                                <option value="robotics">Robotics</option>
                                <option value="blockchain">Blockchain</option>
                            </select>
                        </div>

<div>
                            <label for="description" class="block text-lg font-medium mb-2 text-gray-200">
                                Description & Vision
                            </label>
                            <textarea
                                id="description"
                                name="description"
                                rows="5"
                                placeholder="Describe your innovation component, its potential impact, and your vision for implementation..."
                                class="w-full px-4 py-3 rounded-lg border border-gray-600 bg-gray-800 text-white resize-none focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all"
                            ></textarea>
                        </div>

<div>
                            <label class="block text-lg font-medium mb-2 text-gray-200">Innovation Level</label>
                            <div class="flex gap-4">
                                <label class="flex items-center">
                                    <input type="radio" name="level" value="concept" class="mr-2 text-teal-500">
                                    <span>Concept</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="radio" name="level" value="prototype" class="mr-2 text-teal-500">
                                    <span>Prototype</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="radio" name="level" value="production" class="mr-2 text-teal-500">
                                    <span>Production Ready</span>
                                </label>
                            </div>
                        </div>

<div class="flex gap-4 pt-4">
                            <button
                                type="submit"
                                class="flex-1 bg-gradient-to-r from-teal-600 to-purple-600 hover:from-teal-700 hover:to-purple-700 text-white px-6 py-3 rounded-lg font-semibold shadow-lg hover-scale transition-all"
                            >
                                Save Innovation
                            </button>
                            <button
                                type="button"
                                id="clearForm"
                                class="px-6 py-3 border border-gray-600 text-gray-300 hover:bg-gray-600 rounded-lg font-semibold hover-scale transition-all"
                            >
                                Clear
                            </button>
                        </div>
                    </form>
                </div>
            </div>

<div class="mt-12">
                <h3 class="text-2xl font-bold mb-6 text-center">Saved Innovation Components</h3>
                <div id="savedComponents" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="py-20 bg-gray-900">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-4xl md:text-5xl font-bold mb-6">Join the Innovation</h2>
                <p class="text-xl text-gray-300">Ready to be part of the technological revolution?</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div>
                    <h3 class="text-3xl font-bold mb-6">Get In Touch</h3>
                    <div class="space-y-4">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-teal-600 rounded-full flex items-center justify-center mr-4">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                                </svg>
                            </div>
                            <div>
                                <p class="font-semibold">Email</p>
                                <p class="text-gray-300">mfuranzizahamza@gmail.com</p>
                            </div>
                        </div>
                        
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center mr-4">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                                </svg>
                            </div>
                            <div>
                                <p class="font-semibold">Phone</p>
                                <p class="text-gray-300">+250 796132866</p>
                            </div>
                        </div>
                        
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-green-600 rounded-full flex items-center justify-center mr-4">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                </svg>
                            </div>
                            <div>
                                <p class="font-semibold">Location</p>
                                <p class="text-gray-300">RUBAVU ,RWANDA</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="glass-effect p-8 rounded-2xl">
                    <form class="space-y-6">
                        <div>
                            <input type="text" placeholder="Your Name" class="w-full px-4 py-3 rounded-lg border border-gray-600 bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-teal-500">
                        </div>
                        <div>
                            <input type="email" placeholder="Your Email" class="w-full px-4 py-3 rounded-lg border border-gray-600 bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-teal-500">
                        </div>
                        <div>
                            <textarea rows="4" placeholder="Your Message" class="w-full px-4 py-3 rounded-lg border border-gray-600 bg-gray-800 text-white resize-none focus:outline-none focus:ring-2 focus:ring-teal-500"></textarea>
                        </div>
                        <button type="submit" class="w-full bg-gradient-to-r from-teal-600 to-purple-600 hover:from-teal-700 hover:to-purple-700 text-white px-6 py-3 rounded-lg font-semibold hover-scale">
                            Send Message
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer class="bg-gray-800 py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <div class="flex items-center justify-center space-x-2 mb-4">
                    <div class="w-10 h-10 innovation-gradient rounded-full flex items-center justify-center">
                        <span class="text-white font-bold text-lg">I</span>
                    </div>
                    <span class="text-2xl font-bold">InnovateTech</span>
                </div>
                <p class="text-gray-400 mb-6">Shaping tomorrow through innovation today</p>
                <div class="flex justify-center space-x-6 mb-6">
                    <a href="https://x.com/Mfuranziza100" class="text-gray-400 hover:text-teal-400">Twitter</a>
                    <a href="https://www.linkedin.com/in/mfuranziza-hamza-898970354/" class="text-gray-400 hover:text-teal-400">LinkedIn</a>
                    <a href="https://github.com/MFURANZIZA100" class="text-gray-400 hover:text-teal-400">GitHub</a>
                    <a href="https://medium.com/@mfuranzizahamza" class="text-gray-400 hover:text-teal-400">Medium</a>
                </div>
                <p class="text-gray-500">&copy; 2025 InnovateTech. All rights reserved.</p>
            </div>
        </div>
    </footer>

// Dark mode toggle
        document.getElementById('darkModeToggle').addEventListener('click', function() {
            document.body.classList.toggle('light-mode');
        });

// Smooth scrolling for navigation
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

// Innovation form handling
        document.getElementById('innovationForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const component = {
                id: Date.now(),
                title: formData.get('title'),
                category: formData.get('category'),
                description: formData.get('description'),
                level: formData.get('level'),
                timestamp: new Date().toLocaleDateString()
            };

// Add to saved components
            savedComponents.push(component);
            
            // Display success animation
            showSuccessAnimation();
            
            // Update display
            displaySavedComponents();
            
            // Clear form
            this.reset();
        });

// Clear form button
        document.getElementById('clearForm').addEventListener('click', function() {
            document.getElementById('innovationForm').reset();
        });

// Success animation
        function showSuccessAnimation() {
            const button = document.querySelector('button[type="submit"]');
            const originalText = button.innerHTML;
            
            button.innerHTML = `
                <svg class="w-5 h-5 inline mr-2 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                </svg>
                Saving...
            `;
            
            setTimeout(() => {
                button.innerHTML = `
                    <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    Saved Successfully!
                `;
                button.classList.add('bg-green-600');
                
                setTimeout(() => {
                    button.innerHTML = originalText;
                    button.classList.remove('bg-green-600');
                }, 1500);
            }, 1000);
        }

// Display saved components
        function displaySavedComponents() {
            const container = document.getElementById('savedComponents');
            
            if (savedComponents.length === 0) {
                container.innerHTML = `
                    <div class="col-span-full text-center py-12">
                        <div class="w-24 h-24 mx-auto mb-4 opacity-50">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                            </svg>
                        </div>
                        <p class="text-gray-400 text-lg">No innovation components saved yet.</p>
                        <p class="text-gray-500">Fill out the form above to save your first innovation!</p>
                    </div>
                `;
                return;
            }

container.innerHTML = savedComponents.map(component => `
                <div class="bg-gray-800 rounded-xl p-6 hover-scale slide-in border border-gray-700 hover:border-teal-500 transition-all duration-300">
                    <div class="flex justify-between items-start mb-4">
                        <h4 class="text-xl font-bold text-teal-400">${component.title}</h4>
                        <button onclick="deleteComponent(${component.id})" class="text-red-400 hover:text-red-300 transition-colors">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                            </svg>
                        </button>
                    </div>
                    
                    ${component.category ? `
                        <div class="inline-block px-3 py-1 bg-gradient-to-r from-teal-600 to-purple-600 text-white text-sm rounded-full mb-3">
                            ${component.category.charAt(0).toUpperCase() + component.category.slice(1)}
                        </div>
                    ` : ''}
                    
                    ${component.description ? `
                        <p class="text-gray-300 mb-4 leading-relaxed">${component.description}</p>
                    ` : ''}
                    
                    <div class="flex justify-between items-center pt-4 border-t border-gray-700">
                        ${component.level ? `
                            <span class="text-sm font-medium px-2 py-1 rounded ${getLevelColor(component.level)}">
                                ${component.level.charAt(0).toUpperCase() + component.level.slice(1)}
                            </span>
                        ` : '<span></span>'}
                        <span class="text-gray-500 text-sm">${component.timestamp}</span>
                    </div>
                </div>
            `).join('');
        }

// Get color for innovation level
        function getLevelColor(level) {
            switch(level) {
                case 'concept': return 'bg-yellow-600 text-yellow-100';
                case 'prototype': return 'bg-blue-600 text-blue-100';
                case 'production': return 'bg-green-600 text-green-100';
                default: return 'bg-gray-600 text-gray-100';
            }
        }

// Delete component
        function deleteComponent(id) {
            if (confirm('Are you sure you want to delete this innovation component?')) {
                savedComponents = savedComponents.filter(comp => comp.id !== id);
                displaySavedComponents();
                
                // Show delete animation
                const deletedElement = event.target.closest('.bg-gray-800');
                if (deletedElement) {
                    deletedElement.style.transform = 'scale(0.8)';
                    deletedElement.style.opacity = '0';
                    setTimeout(() => displaySavedComponents(), 300);
                }
            }
        }

// Intersection Observer for scroll animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

// Observe all sections for animations
        document.addEventListener('DOMContentLoaded', function() {
            // Observe sections
            document.querySelectorAll('section').forEach(section => {
                observer.observe(section);
            });

// Add scroll effect to navigation
            let lastScrollTop = 0;
            const nav = document.querySelector('nav');
            
            window.addEventListener('scroll', function() {
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
                
                if (scrollTop > lastScrollTop && scrollTop > 100) {
                    // Scrolling down
                    nav.style.transform = 'translateY(-100%)';
                } else {
                    // Scrolling up
                    nav.style.transform = 'translateY(0)';
                }
                
                lastScrollTop = scrollTop;
            });

// Add parallax effect to hero section
            window.addEventListener('scroll', function() {
                const scrolled = window.pageYOffset;
                const hero = document.querySelector('#home');
                const heroContent = hero.querySelector('.max-w-7xl');
                
                if (heroContent && scrolled < hero.offsetHeight) {
                    heroContent.style.transform = `translateY(${scrolled * 0.5}px)`;
                }
            });

// Add typing animation to hero text
            const heroTitle = document.querySelector('#home h1');
            if (heroTitle) {
                const text = heroTitle.textContent;
                heroTitle.textContent = '';
                heroTitle.style.borderRight = '3px solid';
                heroTitle.style.animation = 'blink 1s infinite';
                
                let i = 0;
                const typeWriter = () => {
                    if (i < text.length) {
                        heroTitle.textContent += text.charAt(i);
                        i++;
                        setTimeout(typeWriter, 100);
                    } else {
                        heroTitle.style.borderRight = 'none';
                    }
                };
                
                setTimeout(typeWriter, 1000);
            }

// Add particle effect to hero background
            createParticles();
            
            // Initialize saved components display
            displaySavedComponents();
        });

// Particle animation for hero section
        function createParticles() {
            const hero = document.querySelector('#home');
            const particleContainer = document.createElement('div');
            particleContainer.className = 'absolute inset-0 overflow-hidden pointer-events-none';
            hero.appendChild(particleContainer);

for (let i = 0; i < 50; i++) {
                const particle = document.createElement('div');
                particle.className = 'absolute w-1 h-1 bg-teal-400 rounded-full opacity-30';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.top = Math.random() * 100 + '%';
                particle.style.animation = `particle-float ${5 + Math.random() * 10}s linear infinite`;
                particle.style.animationDelay = Math.random() * 5 + 's';
                particleContainer.appendChild(particle);
            }
        }

// Add CSS animations dynamically
        const style = document.createElement('style');
        style.textContent = `
            @keyframes blink {
                0%, 50% { border-color: transparent; }
                51%, 100% { border-color: #14b8a6; }
            }
            
            @keyframes particle-float {
                0% { 
                    transform: translateY(100vh) translateX(0px) rotate(0deg); 
                    opacity: 0; 
                }
                10% { opacity: 0.3; }
                90% { opacity: 0.3; }
                100% { 
                    transform: translateY(-100px) translateX(100px) rotate(360deg); 
                    opacity: 0; 
                }
            }
            
            nav {
                transition: transform 0.3s ease-in-out;
            }
            
            .slide-in {
                animation: slideInUp 0.8s ease-out;
            }
            
            @keyframes slideInUp {
                from { 
                    opacity: 0; 
                    transform: translateY(50px); 
                }
                to { 
                    opacity: 1; 
                    transform: translateY(0); 
                }
            }
        `;
        document.head.appendChild(style);

// Add hover effects to innovation cards
        document.addEventListener('mouseover', function(e) {
            if (e.target.closest('.hover-scale')) {
                const card = e.target.closest('.hover-scale');
                card.style.transform = 'scale(1.05) rotateY(5deg)';
                card.style.boxShadow = '0 20px 40px rgba(0,0,0,0.3)';
            }
        });

document.addEventListener('mouseout', function(e) {
            if (e.target.closest('.hover-scale')) {
                const card = e.target.closest('.hover-scale');
                card.style.transform = 'scale(1) rotateY(0deg)';
                card.style.boxShadow = '';
            }
        });

// Add click ripple effect
        document.addEventListener('click', function(e) {
            if (e.target.tagName === 'BUTTON') {
                const button = e.target;
                const ripple = document.createElement('span');
                const rect = button.getBoundingClientRect();
                const size = Math.max(rect.width, rect.height);
                const x = e.clientX - rect.left - size / 2;
                const y = e.clientY - rect.top - size / 2;
                
                ripple.style.cssText = `
                    position: absolute;
                    width: ${size}px;
                    height: ${size}px;
                    left: ${x}px;
                    top: ${y}px;
                    background: rgba(255,255,255,0.3);
                    border-radius: 50%;
                    transform: scale(0);
                    animation: ripple 0.6s linear;
                    pointer-events: none;
                `;
                
                button.style.position = 'relative';
                button.style.overflow = 'hidden';
                button.appendChild(ripple);
                
                setTimeout(() => ripple.remove(), 600);
            }
        });

// Add ripple animation
        const rippleStyle = document.createElement('style');
        rippleStyle.textContent = `
            @keyframes ripple {
                to {
                    transform: scale(4);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(rippleStyle);
    </script>
</body>
</html>

Related Examples

background animation
background animation

Author:
Jayendra Madara

1 year ago

3k
cards
cards with background animation

Author:
Anonymous

2 years ago

11.5k
Tailwind Google Map widget

Author:
Dung Vuong

5 months ago

258
Tailwind CSS Navbar
Logo on the left. Main menu with a mega menu under "Services". Responsive design with a hamburger menu for mobile devices. Mega menu appears on hover for desktop and toggles on click for mobile.

Author:
KULDEEP

5 months ago

758
image

Author:
pablitodgb

5 months ago

341
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

1k
ServerHub Interface

Author:
МОЙДОЫР

3 weeks ago

305
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

5 months ago

765
Image - Figure with figcaption design

Author:
Maxim

10 months ago

705
cards
cards with background animation

Author:
Anonymous

2 years ago

11.2k
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

4 months ago

343
Privacy policy page template

Author:
Sameer Sultana

2 years ago

18.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components