JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rozmiary">
	<div class="tabbed">
		<input type="radio" id="tab1" name="css-tabs" checked>
		<input type="radio" id="tab2" name="css-tabs">
		<input type="radio" id="tab3" name="css-tabs">
		
		<ul class="tabs">
			<li class="tab"><label for="tab1">Krótszy < 168 cm</label></li>
			<li class="tab"><label for="tab2">Standardowy 168 - 186 cm</label></li>
			<li class="tab"><label for="tab3">Dłuższy > 186 cm</label></li>
		</ul>
		
		<div class="tab-content">
			<p>11111111111</p>
		</div>
		
		<div class="tab-content">
			<p>2222222222222</p>
		</div>
		
		<div class="tab-content">
			<p>333333333333</p>
		</div>
	</div>
</div>

CSS

.rozmiary .tabbed {
	overflow-x: hidden; /* so we could easily hide the radio inputs */
	margin: 32px 0;
	padding-bottom: 16px;
	border-bottom: 1px solid #ccc;
}

.rozmiary .tabbed [type="radio"] {
	/* hiding the inputs */
	display: none;
}

.rozmiary .tabs {
	display: flex;
	align-items: stretch;
	list-style: none;
	padding: 0;
	border-bottom: 1px solid #ccc;
}
.rozmiary .tab > label {
	display: block;
	margin-bottom: -1px;
	padding: 12px 15px;
	border: 1px solid #ccc;
	background: #eee;
	color: #666;
	font-size: 12px; 
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;	
	transition: all 0.3s;
}
.rozmiary .tab:hover label {
	border-top-color: #333;
	color: #333;
}

.rozmiary .tab-content {
	display: none;
	color: #777;
}

/* As we cannot replace the numbers with variables or calls to element properties, the number of this selector parts is our tab count limit */
.rozmiary .tabbed [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label,
.rozmiary .tabbed [type="radio"]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) label,
.rozmiary .tabbed [type="radio"]:nth-of-type(3):checked ~ .tabs .tab:nth-of-type(3) label,
.rozmiary .tabbed [type="radio"]:nth-of-type(4):checked ~ .tabs .tab:nth-of-type(4) label,
.rozmiary .tabbed [type="radio"]:nth-of-type(5):checked ~ .tabs .tab:nth-of-type(5) label {
	border-bottom-color: #fff;
	background: #fff;
	color: #222;
}

.rozmiary .tabbed [type="radio"]:nth-of-type(1):checked ~ .tab-content:nth-of-type(1),
.rozmiary .tabbed [type="radio"]:nth-of-type(2):checked ~ .tab-content:nth-of-type(2),
.rozmiary .tabbed [type="radio"]:nth-of-type(3):checked ~ .tab-content:nth-of-type(3),
.rozmiary .tabbed [type="radio"]:nth-of-type(4):checked ~ .tab-content:nth-of-type(4) {
	display: block;
}