<div class="css-tab">
  <ul>
    <li><a href="#div-1">Home</a></li>
    <li><a href="#div-2">Services</a></li>
    <li><a href="#div-3">Portfolio</a></li>
    <li><a href="#div-4">Team</a></li>
    <li><a href="#div-5">Contact</a></li>
  </ul>

  <div class="div-area">
    <div id="div-1" class="divs">
      <h2>Home</h2>
      <div>Collaboratively deploy cutting-edge niche markets after client-centric data. Completely formulate B2B customer service after market-driven e-markets. Appropriately predominate team driven.</div>
    </div>
    <div id="div-2" class="divs">
      <h2>Services</h2>
      <div>Seamlessly seize collaborative e-tailers rather than superior supply chains. Phosfluorescently negotiate client-focused resources with high-quality users. Interactively incubate error-free customer.</div>
    </div>
    <div id="div-3" class="divs">
      <h2>Portfolio</h2>
      <div>Objectively network virtual leadership skills after state of the art leadership. Seamlessly e-enable compelling best practices and intermandated bandwidth. Authoritatively.</div>
    </div>
    <div id="div-4" class="divs">
      <h2>team</h2>
      <div>Uniquely leverage other's resource maximizing ROI through professional networks. Dynamically provide access to cost effective mindshare rather than 24/7 process.</div>
    </div>
    <div id="div-5" class="divs">
      <h2>contact</h2>
      <div>Collaboratively reintermediate wireless services whereas next-generation initiatives. Credibly redefine high-payoff bandwidth rather than orthogonal bandwidth. Assertively generate economically sound ROI.</div>
    </div>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 0;
  margin-top: 30px;
}
a {
  text-decoration: none;
}

ul a {
  display: block;
  font-family: sans-serif;
  font: 18px;
  padding: 10px 35px;
  background: #333;
  color: #ccc;
  border-radius: 5px;
  transition: all .3s ease;
}

ul a[href="#div-2"] {
  background: #ccc;
  color: #333;
}

.css-tab:has([id^="div"]:target) ul a {
  background: #333;
  color: #ccc;
}

.css-tab:has(#div-1:target) ul a[href="#div-1"],
.css-tab:has(#div-2:target) ul a[href="#div-2"],
.css-tab:has(#div-3:target) ul a[href="#div-3"],
.css-tab:has(#div-4:target) ul a[href="#div-4"],
.css-tab:has(#div-5:target) ul a[href="#div-5"] {
    background: #ccc;
    color: #333;
}

.div-area {
  position: relative;
}

.divs {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translatex(-50%);
  width: min(100% - 20px, 630px);
  margin: 20px auto;
  padding: 30px;
  background: #f1f1f1;
  color: #333;
  font-family: sans-serif;
  border-radius: 10px;
  max-height: 1000px;
  overflow: hidden;
}


.divs:not(:nth-child(2)),
.div-area:has(.divs:target) .divs:not(:target){
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease 0s;
}

.divs:target {
  opacity: 1;
  visibility: visible;
  transition: all .3s ease .15s;
}


.divs h2 {
  text-transform: uppercase;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.divs div {
  font: 16px;
  line-height: 25px;
  font-weight: 600;
  color: #666
}