HTML & CSS only multi tabs without JavaScript

</style>
  <div class="tabs">
    <input class="hidden" id="tab1" type="radio" name="tab" checked="">
    <input class="hidden" id="tab2" type="radio" name="tab">
    <input class="hidden" id="tab3" type="radio" name="tab">

<div class="tab-header">
      <label for="tab1" data-text="HTML"></label>
      <label for="tab2" data-text="CSS"></label>
      <label for="tab3" data-text="JS"></label>
    </div>

<div class="pre content1">
      <pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis risus id felis bibendum molestie. <br> Vestibulum ligula risus, ultricies non libero non, congue bibendum metus. Proin semper finibus turpis eget eleifend. <br>Nulla dictum maximus nibh. Aliquam pharetra nibh sed lacus scelerisque suscipit. </pre>
    </div>
    <div class="pre content2">
      <pre>/* Dummy CSS */
        body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        margin: 0;
        padding: 0;
        }

h1 {
        color: #333;
        text-align: center;
        }

p {
        color: #666;
        line-height: 1.6;
        margin-bottom: 20px;
        }

.container {
        width: 80%;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
      </pre>
    </div>
    <div class="pre content3">
      <pre>// Dummy JavaScript
        function greet(name) {
        console.log(`Hello, ${name}!`);
        }

function calculateSquare(number) {
        return number * number;
        }

let result = calculateSquare(5);
        console.log('Result:', result);

document.addEventListener('DOMContentLoaded', function() {
        const button = document.getElementById('myButton');
        button.addEventListener('click', function() {
        alert('Button clicked!');
        });
        });</pre>
    </div>
  </div>

HTML & CSS only multi tabs without JavaScript

You may like these posts :

Write Your Comment