<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
}