Minimalist Tabs - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Minimalist Tabs</title> <style> body { font-family: 'Arial', sans-serif; background: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .tabs { width: 80%; max-width: 800px; background: #ffffff; border-radius: 5px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .tabs-nav { display: flex; background: #ffffff; border-bottom: 1px solid #dddddd; padding: 0; margin: 0; list-style: none; } .tabs-nav li { flex: 1; text-align: center; } .tabs-nav a { display: block; padding: 15px; color: #555555; font-size: 16px; text-decoration: none; position: relative; transition: color 0.3s, border-color 0.3s; } .tabs-nav a:hover { color: #000000; } .tabs-nav a:before { content: attr(data-icon); display: block; font-size: 24px; margin-bottom: 5px; } .tabs-nav a.active { color: #000000; border-bottom: 2px solid #007bff; } .tab-content { padding: 20px; display: none; } .tab-content.active { display: block; animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } </style> </head> <body> <div class="tabs"> <ul class="tabs-nav"> <li><a href="#" class="tab-link active" data-tab="tab1" data-icon="📄">Documents</a></li> <li><a href="#" class="tab-link" data-tab="tab2" data-icon="📊">Reports</a></li> <li><a href="#" class="tab-link" data-tab="tab3" data-icon="📁">Files</a></li> </ul> <div class="tab-content active" id="tab1"> <h2>Documents</h2> <p>All your important documents. 🗂️</p> </div> <div class="tab-content" id="tab2"> <h2>Reports</h2> <p>View detailed reports. 📊</p> </div> <div class="tab-content" id="tab3"> <h2>Files</h2> <p>Manage your files easily. 📁</p> </div> </div> <script> document.addEventListener("DOMContentLoaded", function() { const tabs = document.querySelectorAll('.tab-link'); const contents = document.querySelectorAll('.tab-content'); tabs.forEach(tab => { tab.addEventListener('click', function(event) { event.preventDefault(); // Remove active class from all tabs and contents tabs.forEach(t => t.classList.remove('active')); contents.forEach(c => c.classList.remove('active')); // Add active class to clicked tab and corresponding content tab.classList.add('active'); document.getElementById(tab.dataset.tab).classList.add('active'); }); }); }); </script> </body> </html>