JSFiddle - React, Tailwind, and code Playground

by qolami

HTML

<div id="table">

<div class="tabs" id="content1">   
   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Home</label>
       <div class="content">
       <p></p>  
               
           <!-- <div id="contentheader"></div> -->
           
            <div id="caption">
                <p> Title Goes Here</p>
                        </div>
           
            <div id="nextcontent">
                <p>Words go Here</p>
                        </div>
 
       </div> <!--end of content tag -->
       
       
       
   </div><!--end of content tab tag for TAB1 -->
   
   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">About Us</label>
       
       <div class="content">
           <p>Stuff for Tab Two</p>
           
           
           <img src="http://placekitten.com/200/100">
       </div>
   </div>
   
   <div class="tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">Forum</label>
     
       <div class="content">
           <p>Stuff for Tab Three</p>
           
          
       </div>
   </div>
   
    <div class="tab">
       <input type="radio" id="tab-4" name="tab-group-1">
       <label for="tab-4">Gallery</label>
     
       <div class="content">
           <p>Stuff for Tab Four</p>
           
           <img src="http://placedog.com/200/100">
       </div>
   </div>
   
   <div class="tab">
       <input type="radio" id="tab-5" name="tab-group-1">
       <label for="tab-5">Forum</label>
     
       <div class="content">
           <p>Stuff for Tab Five</p>
           
           <img src="http://placedog.com/200/100">
       </div>
   </div>
   
   
   <div class="tab">
       <input type="radio" id="tab-6" name="tab-group-1">
       <label for="tab-6">Sign up</label>
     
       <div class="content">
           <p>Stuff for Tab Six</p>
           
           <img...

CSS

*
{      margin: 0px;   }

#table
{
    font-size:100%;
    width:980px;
    /* min-width: 980px; */
}


.tabs {
    position: relative;  
    min-height: 80%; /* adjust height of the body */
    min-width: 80%;
    
    margin: 100px 50px 0px 50px;  /* top, right, bottom, left */
    
    
    
}

.tab  
{
    float: left; /* this is responsible for tabs to align left */
    
    
}
.tab label {
    background:#202d00; /*bg color of all menu bar item */
    padding: 10px 40px; /* menu bar item height width */
    color:#FFF;
    border: 1px solid #ccc;
    margin-left: -1px;
    position: relative;
    left: 1px;
    top: -29px;
    -webkit-transition: background-color .17s linear;
    font-weight:bold;
    
    
}
.tab [type=radio]
{
    display: none;  
    
    
    
}
.content {
    position: absolute;
    top: -1px;
    left: 0;
    background: white;
    right: 0;
    bottom: 0;
    padding: 0px; /* former 20 space between the menu bar and content text */
    border: 1px solid #ccc;
    -webkit-transition: opacity .6s linear;
    opacity: 0;
    color:#396; /*Text color of Title Goes Here*/
    font-weight:bold;
    font-size:36px;
    background-color:#f8fed2; /*bg color of the content body holder text */
    
    
    
    
    
    /*width:100%;
    height:92%;
    */
    
    
}
[type=radio]:checked ~ label {
    background: #c5de10; /*bg color of active menu bar item */
    border-bottom: 0px solid white;
    z-index: 2;
    color: #202d00;
    
    
}
[type=radio]:checked ~ label ~ .content {
    z-index: 1;
    opacity: 1;
}

#footer
{
    /*margin-top:10%;*/
    height: 20px;
    width:100%;
    text-align:center;
    
}



/*#contentheader
{
background-image:url('1.jpg');
width:100%;
height: 18%;

} */

#content1
{
    width:80%; /*adust the width of content body*/
    height:80%;
    /*border: 3px solid red; */
    margin-left:auto;
    margin-right:auto;
    border: thin outset;
    background-color: #f8fed2;
    
    
    
}

#nextcontent
{
   ...