HTML Structure

<div class="tab-container">
    <!-- Tab Navigation -->
    <div class="tab-nav">
        <button class="tab-button active" data-tab="tab1">Tab 1</button>
        <button class="tab-button" data-tab="tab2">Tab 2</button>
        <button class="tab-button" data-tab="tab3">Tab 3</button>
    </div>
    
    <!-- Tab Content -->
    <div class="tab-content">
        <div id="tab1" class="tab-panel active">
            <h3>Tab 1 Content</h3>
            <p>This is the content for the first tab.</p>
        </div>
        
        <div id="tab2" class="tab-panel">
            <h3>Tab 2 Content</h3>
            <p>This is the content for the second tab.</p>
        </div>
        
        <div id="tab3" class="tab-panel">
            <h3>Tab 3 Content</h3>
            <p>This is the content for the third tab.</p>
        </div>
    </div>
</div>

CSS Styling

/* Tab Container */
.tab-container {
    max-width: 600px;
    margin: 0 auto;
}

/* Tab Navigation */
.tab-nav {
    display: flex;
    border-bottom: 1px solid #ccc;
}

.tab-button {
    padding: 10px 15px;
    background: #f1f1f1;
    border: none;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    margin-right: 5px;
}

.tab-button.active {
    background: #fff;
    border: 1px solid #ccc;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
}

/* Tab Content */
.tab-panel {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    border-top: none;
}

.tab-panel.active {
    display: block;
}

JavaScript Functionality

// Select all tab buttons and panels
const tabButtons = document.querySelectorAll('.tab-button');
const tabPanels = document.querySelectorAll('.tab-panel');

// Add click event to each tab button
tabButtons.forEach(button => {
    button.addEventListener('click', function() {
        // Remove active class from all buttons and panels
        tabButtons.forEach(btn => btn.classList.remove('active'));
        tabPanels.forEach(panel => panel.classList.remove('active'));
        
        // Add active class to the clicked button
        this.classList.add('active');
        
        // Get the tab id from the data attribute
        const tabId = this.getAttribute('data-tab');
        
        // Activate the corresponding panel
        document.getElementById(tabId).classList.add('active');
    });
});

HTML Structure

<form id="contactForm" class="contact-form">
    <div class="form-group">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <span class="error-message" id="nameError"></span>
    </div>
    
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <span class="error-message" id="emailError"></span>
    </div>
    
    <div class="form-group">
        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="5" required></textarea>
        <span class="error-message" id="messageError"></span>
    </div>
    
    <div class="form-group">
        <button type="submit" id="submitButton">Submit</button>
    </div>
    
    <div id="formSuccess" class="success-message" style="display: none;">
        Thank you for your message! We'll respond shortly.
    </div>
</form>

JavaScript Validation

// Select form and inputs
const contactForm = document.getElementById('contactForm');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const messageInput = document.getElementById('message');

// Select error message elements
const nameError = document.getElementById('nameError');
const emailError = document.getElementById('emailError');
const messageError = document.getElementById('messageError');

// Success message element
const formSuccess = document.getElementById('formSuccess');

// Validation function for name
function validateName() {
    if (nameInput.value.trim() === '') {
        nameError.textContent = 'Name is required';
        nameInput.classList.add('invalid');
        return false;
    } else if (nameInput.value.trim().length < 2) {
        nameError.textContent = 'Name must be at least 2 characters';
        nameInput.classList.add('invalid');
        return false;
    } else {
        nameError.textContent = '';
        nameInput.classList.remove('invalid');
        return true;
    }
}

// Validation function for email
function validateEmail() {
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    
    if (emailInput.value.trim() === '') {
        emailError.textContent = 'Email is required';
        emailInput.classList.add('invalid');
        return false;
    } else if (!emailPattern.test(emailInput.value)) {
        emailError.textContent = 'Please enter a valid email address';
        emailInput.classList.add('invalid');
        return false;
    } else {
        emailError.textContent = '';
        emailInput.classList.remove('invalid');
        return true;
    }
}

// Validation function for message
function validateMessage() {
    if (messageInput.value.trim() === '') {
        messageError.textContent = 'Message is required';
        messageInput.classList.add('invalid');
        return false;
    } else if (messageInput.value.trim().length < 10) {
        messageError.textContent = 'Message must be at least 10 characters';
        messageInput.classList.add('invalid');
        return false;
    } else {
        messageError.textContent = '';
        messageInput.classList.remove('invalid');
        return true;
    }
}

// Add input event listeners for real-time validation
nameInput.addEventListener('input', validateName);
emailInput.addEventListener('input', validateEmail);
messageInput.addEventListener('input', validateMessage);

// Form submission handler
contactForm.addEventListener('submit', function(event) {
    // Prevent default form submission
    event.preventDefault();
    
    // Validate all fields
    const isNameValid = validateName();
    const isEmailValid = validateEmail();
    const isMessageValid = validateMessage();
    
    // If all validations pass
    if (isNameValid && isEmailValid && isMessageValid) {
        // In a real application, you would send the data to a server here
        
        // For demonstration, we'll just show the success message
        formSuccess.style.display = 'block';
        contactForm.reset();
        
        // Hide success message after 5 seconds
        setTimeout(function() {
            formSuccess.style.display = 'none';
        }, 5000);
    }
});