q[worcnq[owcnqqwrfvqevqevqevqevqevveqtvqevqeveqveqvqevqeveqv <style>

.tab-container {

  display: flex;

  flex-direction: column;

  max-width: 100%;

}

.tab-buttons {

  display: flex;

  gap: 10px;

  margin-bottom: 10px;

}

.tab-buttons button {

  padding: 10px 15px;

  border: none;

  background: #eee;

  cursor: pointer;

  font-weight: bold;

}

.tab-buttons button.active {

  background: #333;

  color: white;

}

.tab-content {

  display: none;

  padding: 15px;

  border: 1px solid #ccc;

  background: #f9f9f9;

}

.tab-content.active {

  display: block;

}

</style>

<div class=”tab-container”>

  <div class=”tab-buttons”>

    <button class=”tablink active” onclick=”openTab(event, ‘tab1’)”>Πληροφορίες</button>

    <button class=”tablink” onclick=”openTab(event, ‘tab2’)”>Υλικά</button>

    <button class=”tablink” onclick=”openTab(event, ‘tab3’)”>Αποστολή</button>

  </div>

  <div id=”tab1″ class=”tab-content active”>

    Περιεχόμενο για την πρώτη καρτέλα.

  </div>

  <div id=”tab2″ class=”tab-content”>

    Περιεχόμενο για τη δεύτερη καρτέλα.

  </div>

  <div id=”tab3″ class=”tab-content”>

    Περιεχόμενο για την τρίτη καρτέλα.

  </div>

</div>

<script>

function openTab(evt, tabId) {

  const contents = document.querySelectorAll(‘.tab-content’);

  const buttons = document.querySelectorAll(‘.tablink’);

  contents.forEach(c => c.classList.remove(‘active’));

  buttons.forEach(b => b.classList.remove(‘active’));

  document.getElementById(tabId).classList.add(‘active’);

  evt.currentTarget.classList.add(‘active’);

}

</script>