Tab Switcher Only HTML and Css

Source Code:

#tab-1, #tab-1 + span {left:0;}
#tab-2, #tab-2 + span {left:25%;}
#tab-3, #tab-3 + span {left:50%;}
#tab-4, #tab-4 + span {left: 75%;}

.tab-content {padding: 45px 10px 0; width:100%;min-height: 400px;}
.tab-content section {width:100%; display:none;}

#tab-1:checked ~ .tab-content #tab-item-1  {display:block;}
#tab-2:checked ~ .tab-content #tab-item-2  {display:block;}
#tab-3:checked ~ .tab-content #tab-item-3  {display: block;}
#tab-4:checked ~ .tab-content #tab-item-4  {display: block;}

/* effect-1 */
.effect-1 > input:checked + span {background: #448AFF;}
</style>

<div class="tabs effect-1">
			
			<input type="radio" id="tab-1" name="tab-effect-1" checked />
			<span>Bangla</span>

<input type="radio" id="tab-2" name="tab-effect-1" />
			<span>Hindi</span>

<input type="radio" id="tab-3" name="tab-effect-1" />
			<span>Sports</span>

<input type="radio" id="tab-4" name="tab-effect-1" />
			<span>Others</span>

<div class="tab-content">
				<section id="tab-item-1">
                                           হাই আমি ১
				</section>
				<section id="tab-item-2">
                                           হাই আমি ২
				</section>
				<section id="tab-item-3">
                                           হাই আমি ৩
				</section>
				<section id="tab-item-4">
                                           হাই আমি ৪
				</section>
			</div>
			
		</div>

Preview:

Bangla Hindi Sports Others

হাই আমি ১

হাই আমি ২

হাই আমি ৩

হাই আমি ৪