Professional Tabs - MeggiTools

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Professional Tabs</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .tabs {
            width: 80%;
            max-width: 800px;
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        .tabs-nav {
            display: flex;
            background: linear-gradient(45deg, #6a11cb, #2575fc);
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .tabs-nav li {
            flex: 1;
            text-align: center;
        }
        .tabs-nav a {
            display: block;
            padding: 15px;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            text-decoration: none;
            position: relative;
            transition: color 0.3s;
        }
        .tabs-nav a:hover {
            color: #ffeb3b;
        }
        .tabs-nav a:before {
            content: attr(data-icon);
            display: block;
            font-size: 24px;
            margin-bottom: 5px;
        }
        .tabs-nav a.active {
            color: #ffeb3b;
            background: #2575fc;
        }
        .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="🏠">Home</a></li>
            <li><a href="#" class="tab-link" data-tab="tab2" data-icon="💼">Services</a></li>
            <li><a href="#" class="tab-link" data-tab="tab3" data-icon="📞">Contact</a></li>
        </ul>
        <div class="tab-content active" id="tab1">
            <h2>Home</h2>
            <p>Welcome to our homepage. 🌟</p>
        </div>
        <div class="tab-content" id="tab2">
            <h2>Services</h2>
            <p>Discover our range of services. 🚀</p>
        </div>
        <div class="tab-content" id="tab3">
            <h2>Contact</h2>
            <p>Get in touch with us. 📧</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>