Interactive Product Showcase - Copy this Html, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Interactive Web Page</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://kit.fontawesome.com/a076d05399.js"></script> </head> <body class="bg gray 50"> <! Header > <header class="bg white shadow lg fixed w full top 0 z 50"> <nav class="container mx auto px 6 py 3 flex justify between items center"> <div class="flex items center"> <img src="https://images.unsplash.com/photo 1494790108377 be9c29b29330?ixlib=rb 1.2.1&auto=format&fit=crop&w=100&q=80" alt="Logo" class="h 8 w 8 rounded full"> <span class="ml 3 text xl font bold">TechBrand</span> </div> <div class="hidden md:flex space x 8"> <a href="#" class="text gray 600 hover:text blue 500 transition">Home</a> <a href="#" class="text gray 600 hover:text blue 500 transition">About</a> <a href="#" class="text gray 600 hover:text blue 500 transition">Contact</a> </div> </nav> </header> <! Main Content > <main class="container mx auto px 6 pt 24 pb 12"> <div class="grid grid cols 1 md:grid cols 2 lg:grid cols 3 gap 8" id="product grid"> <div class="bg white rounded lg shadow md overflow hidden cursor pointer transform hover:scale 105 transition" onclick="openModal()"> <img src="https://images.unsplash.com/photo 1505740420928 5e560c06d30e?ixlib=rb 1.2.1&auto=format&fit=crop&w=400&q=80" alt="Product" class="w full h 48 object cover"> <div class="p 4"> <h3 class="text xl font semibold">Wireless Headphones</h3> <p class="text gray 600 mt 2">High quality wireless headphones with noise cancellation</p> </div> </div> </div> <button id="load more" class="mt 8 px 6 py 3 bg blue 500 text white rounded lg hover:bg blue 600 transition mx auto block">Load More</button> <! Contact Form > <form class="mt 16 max w lg mx auto bg white rounded lg shadow md p 6"> <h2 class="text 2xl font bold mb 6">Contact Us</h2> <div class="mb 4"> <input type="text" placeholder="Name" class="w full px 4 py 2 border rounded lg focus:outline none focus:border blue 500" required> </div> <div class="mb 4"> <input type="email" placeholder="Email" class="w full px 4 py 2 border rounded lg focus:outline none focus:border blue 500" required> </div> <div class="mb 4"> <textarea placeholder="Message" class="w full px 4 py 2 border rounded lg focus:outline none focus:border blue 500 h 32" required></textarea> </div> <button type="submit" class="w full bg blue 500 text white py 2 rounded lg hover:bg blue 600 transition">Send Message</button> </form> </main> <! Modal > <div id="modal" class="fixed inset 0 bg black bg opacity 50 hidden items center justify center"> <div class="bg white rounded lg p 8 max w lg w full mx 4"> <div class="flex justify between items center mb 4"> <h3 class="text xl font bold">Product Details</h3> <button onclick="closeModal()" class="text gray 500 hover:text gray 700">×</button> </div> <p class="text gray 600">Detailed product information goes here...</p> </div> </div> <! Footer > <footer class="bg gray 800 text white py 8"> <div class="container mx auto px 6"> <div class="flex flex col md:flex row justify between items center"> <div class="text center md:text left mb 4 md:mb 0"> <p>© 2024 TechBrand. All rights reserved.</p> </div> <div class="flex space x 6"> <a href="#" class="hover:text blue 400 transition"><i class="fab fa facebook"></i></a> <a href="#" class="hover:text blue 400 transition"><i class="fab fa twitter"></i></a> <a href="#" class="hover:text blue 400 transition"><i class="fab fa instagram"></i></a> </div> </div> </div> </footer> <script> function openModal() { document.getElementById('modal').style.display = 'flex'; } function closeModal() { document.getElementById('modal').style.display = 'none'; } document.getElementById('load more').addEventListener('click', function() { const grid = document.getElementById('product grid'); const clone = grid.children[0].cloneNode(true); grid.appendChild(clone); }); document.querySelectorAll('form input, form textarea').forEach(input => { input.addEventListener('invalid', function() { this.classList.add('border red 500'); }); input.addEventListener('input', function() { this.classList.remove('border red 500'); }); }); </script> </body> </html>
