Untitled

<div style="display: flex; justify-content: center; background-color: #f4f4f4; padding: 10px; border-bottom: 2px solid #ccc;">
  <button style="background: none; border: none; padding: 10px 20px; cursor: pointer; font-size: 16px; color: #555; font-weight: bold; border-bottom: 3px solid #007BFF;" onclick="showTab(1)">Fiberli İletişim</button>
  <button style="background: none; border: none; padding: 10px 20px; cursor: pointer; font-size: 16px; color: #555;" onclick="showTab(2)">Ana Bayiler</button>
</div>

<div id="tab1" style="padding: 20px;">
  <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 20px;">
    <div style="border: 1px solid #ccc; padding: 15px; border-radius: 5px; background-color: #f9f9f9; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
      <h3 style="margin-top: 0; font-size: 18px; font-weight: bold; background-color: #e8e8e8; padding: 10px; border-radius: 5px; color: #333;">Genel Müdürlük</h3>
      <p><strong>E-mail:</strong> info@fiberli.com</p>
      <p><strong>Tel:</strong> +90 (242) 228 81 50</p>
      <p><strong>Adres:</strong> Antalya, Türkiye</p>
    </div>
    <div style="border: 1px solid #ccc; padding: 15px; border-radius: 5px; background-color: #f9f9f9; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
      <h3 style="margin-top: 0; font-size: 18px; font-weight: bold; background-color: #e8e8e8; padding: 10px; border-radius: 5px; color: #333;">Akdeniz Bölgesi Satış Müdürlüğü</h3>
      <p><strong>E-mail:</strong> akdeniz@fiberli.com</p>
      <p><strong>Tel:</strong> +90 (242) 228 81 50</p>
      <p><strong>Adres:</strong> Antalya, Türkiye</p>
    </div>
    <!-- copy paste kısmı -->
  </div>
</div>

<div id="tab2" style="display: none; padding: 20px;">
  <p>Bu bölümde farklı bilgiler görüntülenebilir. Buraya istediğiniz içeriği ekleyebilirsiniz.</p>
</div>

<script>
  function showTab(tabNumber) {
    const tab1 = document.getElementById('tab1');
    const tab2 = document.getElementById('tab2');
    
    if (tabNumber === 1) {
      tab1.style.display = 'block';
      tab2.style.display = 'none';
    } else {
      tab1.style.display = 'none';
      tab2.style.display = 'block';
    }
  }
</script>