HTML

  
    
      <div
        x-data="
          {
          openTab: 1,
          activeClasses: 'oj eo',
          inactiveClasses: 'qq _q',
          }
          "
        class="ac yd"
      >
        <div class="lc xg jg rh ni bj el rl">
          <a
            href="#"
            @click="openTab = 1"
            :class="openTab === 1 ? activeClasses : inactiveClasses"
            class="oj qh el rl mn un eo lu ev"
          >
            Home
          </a>
          <a
            href="#"
            @click="openTab = 2"
            :class="openTab === 2 ? activeClasses : inactiveClasses"
            class="qq qh el rl mn un _q lu ev"
          >
            About Us
          </a>
          <a
            href="#"
            @click="openTab = 3"
            :class="openTab === 3 ? activeClasses : inactiveClasses"
            class="qq qh el rl mn un _q lu ev"
          >
            Our Team
          </a>
          <a
            href="#"
            @click="openTab = 4"
            :class="openTab === 4 ? activeClasses : inactiveClasses"
            class="qq qh el rl mn un _q lu ev"
          >
            Company Details
          </a>
        </div>
        <div>
          <div x-show="openTab === 1" class="zk xn">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia nisi, doloribus nulla cumque molestias corporis eaque harum vero! Quas sit odit optio debitis nulla quisquam, dolorum quaerat animi iusto quod.
          </div>
          <div
            x-show="openTab === 2"
            class="zk xn"
            style="display: none"
          >
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia nisi, doloribus nulla cumque molestias corporis eaque harum vero! Quas sit odit optio debitis nulla quisquam, dolorum quaerat animi iusto quod. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde ex dolorum voluptate cupiditate adipisci doloremque, vel quam praesentium nihil veritatis.
          </div>
          <div
            x-show="openTab === 3"
            class="zk xn"
            style="display: none"
          >
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia nisi, doloribus nulla cumque molestias corporis eaque harum vero! Quas sit odit optio debitis nulla quisquam, dolorum quaerat animi iusto quod. <br />
            <br />
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit mollitia nam eligendi reprehenderit reiciendis saepe laboriosam maiores voluptas. Quo, culpa amet fugiat ipsam sed quod hic, veritatis ducimus recusandae repellat quasi eaque, suscipit praesentium totam?
          </div>
          <div
            x-show="openTab === 4"
            class="zk xn"
            style="display: none"
          >
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia nisi, doloribus nulla cumque molestias corporis eaque harum vero! Quas sit odit optio debitis nulla quisquam, dolorum quaerat animi iusto quod.
          </div>
        </div>
      </div>