JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-md-6">
<div class="card">
<div class="card-body">

<h4 class="card-title">Default Tab</h4>
                      
                      
											<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">

  <li class="nav-item"> <a class="nav-link active show" data-toggle="tab" href="#tab1" role="tab" aria-selected="true">TAB1</a> </li>
  
  <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab2" role="tab" aria-selected="false"> TAB2</a> </li>
                        
  <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab3" role="tab" aria-selected="false"><span class="hidden-sm-up"> TAB3</a> </li>
                        
</ul>

											<!-- Tab panes -->
											<div class="tab-content tabcontent-border">
												<div class="tab-pane active show" id="tab1" role="tabpanel">
													<div class="p-20">
														Load this content...
													</div>
												</div>
												<div class="tab-pane  p-20" id="tab2" role="tabpanel">Load this AFTER clicking [TAB2]</div>
												<div class="tab-pane p-20" id="tab3" role="tabpanel">Load this AFTER clicking [TAB3]</div>
											</div>
										</div>
									</div>
								</div>
                
                
                
                
                
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>