JSFiddle - React, Tailwind, and code Playground

HTML

<div class="warning-button w3-bar-item w3-button tablink " onclick="openLink(event, 'tab1')">
          <div class="warning-title">Osmanlı Tarihi Üzerine Ufak İnceleme</div>
        </div>

        <div class="warning-button w3-bar-item w3-button tablink" onclick="openLink(event, 'tab2')">
          <div class="warning-title" >Tarih Kaynaksız Olmaz !</div>
        </div>

        <div class="warning-button w3-bar-item w3-button tablink" onclick="openLink(event, 'tab3')">
          <div class="warning-title" >Gerçekçi Tarih !</div>
        </div>

        <div class="warning-button w3-bar-item w3-button tablink" onclick="openLink(event, 'tab4')">
          <div class="warning-title">Tarafsızlık Şart !</div>
        </div> <!-- Buton görevi görüyorlar --->
        
        
 <div class="content-area w3-animate-top buttons" id="Top">

        <div class="content-title">
          <h4>623 Yıllık Saltanat</h4>
        </div>

        <div class="content-container">

          <div class="content-box" id="tab1" style="display:none">
            <div class="content-box-icon"><i class="fa-solid fa-timeline"></i></div>
            <div class="ingrediant">
              <span>623 Yıllık İmparatorluğun kısa özeti. Anlaşılır görsellerle desteklenmiş. 3 kıta hüküm. 5 farklı başkent. </span>
            </div>
          </div>

          <div class="content-box" id="tab2" style="display:none">
            <div class="content-box-icon"><i class="fa-solid fa-star"></i></div>
            <div class="ingrediant">
              <span>Söğüt, İznik, Bursa Edirne, İstanbul. 5 Farklı Başkentlik.</span>
            </div>
          </div>

          <div class="content-box" id="tab3" style="display:none">
            <div class="content-box-icon"><i class="fa-solid fa-crown"></i></div>
            <div class="ingrediant">
              <span>36 Hükümdar. </span>
            </div>
          </div>

          <div class="content-box" id="tab4" style="display:none">
            <div...

JavaScript

function openLink(evt, animName) {
    var i, x, tablinks;
    x = document.getElementsByClassName("content-box");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < x.length; i++) {
      tablinks[i].className = tablinks[i].className.replace("w3-red", "");
    }
    document.getElementById(animName).style.display = "block";
    evt.currentTarget.className += " w3-red";
  }