blank template perpl

body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #fdfdfd; } .container { max-width: 900px; margin: 20px auto; padding: 0 15px; } .tab-group { margin: 25px 0; } .tab-buttons { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .tab-buttons button { padding: 10px 18px; cursor: pointer; background-color: #ffe082; border: none; border-radius: 6px; font-weight: bold; } .tab-buttons button.active { background-color: #ffca28; } .tab-content { display: none; background-color: #fff8e1; padding: 20px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } .tab-content.active { display: block; } h2 { color: #2e7d32; margin-top: 0; } textarea { width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #ccc; }

Lesson Summary (25 words – optional): ______________________________

document.querySelectorAll(‘.tab-group’).forEach(group => { const buttons = group.querySelectorAll(‘.tab-btn’); const contents = group.querySelectorAll(‘.tab-content’); buttons.forEach(button => { button.addEventListener(‘click’, () => { buttons.forEach(btn => btn.classList.remove(‘active’)); contents.forEach(content => content.classList.remove(‘active’)); button.classList.add(‘active’); document.getElementById(button.dataset.tab).classList.add(‘active’); }); }); });