JSFiddle - React, Tailwind, and code Playground

by Ahmad Baktash Hayeri

HTML

<div class="tabs">
					<select id="tab_select" class="tab-select">
						<option value="">1</option>
						<option value="">2</option>
						<option value="">3</option>
						<option value="">4</option>
						<option value="">5</option>
					</select>
					<div class="tab-conetnt">
						<div id="tab1" class="tab active-tab">
                            <h1>Tab 1</h1>
						</div><!-- end of tab1 -->
						<div id="tab2" class="tab">
                            <h1>Tab 2</h1>
						</div><!-- end of tab2 -->
						<div id="tab3" class="tab">	
                            <h1>Tab 3</h1>	
						</div><!-- end of tab3 -->
						<div id="tab4" class="tab">
                            <h1>Tab 4</h1>
						</div><!-- end of tab4 -->
						<div id="tab5" class="tab">
                            <h1>Tab 5</h1>
						</div><!-- end of tab5 -->
						
					</div><!-- end of tab-content -->
				</div><!-- end of tabs -->

CSS

.tabs{
    display: inline-block;
}
.tab-select{
    -webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	border-top: none;
	border-left: none;
	border-right: none;
	font-weight: bold;
	border-bottom: 2px solid #000;
}

.tab-content{
	padding: 15px;
}
.tab{
    display: none;
}
.tab .active-tab{
    display: block;
}

JavaScript

$('.tabs .tab-select').on('change', function(e){
       var currentOption = $('#' + $(this).attr('id') + ' option:selected').text();
       $('#tab' + currentOption).show().siblings().hide();
});