JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row" style="height:250px; background-color:green;">
    <div class="col-md-12">
    <h3>HEADER</h3>
    </div>
</div>
    
<div class="tabbable">
        <ul class="nav nav-tabs" >
           <li class="active"><a href="#bookingsTab">Bookings</a></li>
           <li><a href="#caseTab">Case</a></li>
           <li><a href="#communicationTab">Communication</a></li>
           <li><a href="#documentsTab">Documents</a></li>
        </ul>
                
   <div class="tab-content">
         <div class="tab-pane active" id="bookingsTab"  style="height: 950px; background-color:blue;">
             <h2>Tab 1</h2>
         </div>
       
                <div class="tab-pane" id="caseTab"  style="height: 650px; background-color:red;">
             <h2>Tab 2</h2>
         </div>
       
                <div class="tab-pane" id="communicationTab"  style="height: 40px; background-color:yellow;">
             <h2>Tab 3</h2>
         </div>
       
                <div class="tab-pane" id="documentsTab"  style="height: 150px; background-color:green;">
             <h2>Tab 4</h2>
         </div>
  </div>
    
</div>