JSFiddle - React, Tailwind, and code Playground

by Keith Kaiser

HTML

<div id="admin">  

	    <div id="primeNav"  class="besticky">  
			<input id="cs1" type="text" placeholder="Call or First Name"maxlength="16" class="cs1" autofocus="autofocus" autocomplete="off" >
			
			<input id="Lname" type="text" placeholder="Name"  autocomplete="off">
    		    
    		    <button class="ckin1" onclick="checkIn()">Check In</button>
    		    <button class="dropbtn2" id="columnPicker">Show/Hide Columns</button>
	    </div>
	</div>	<!-- End ID: admin -->
				
    <div id="actLog">
        <table ID="thisNet">
            <thead id="thead">
            <tr>            	
		    <th title="Row No." class="besticky c0"> column 1 </th> 
			<th title="Role" class="besticky c1">	column 2 </th>
			<th title="Mode" class="besticky c2"> Column 3 </th>	
		    </tr>
            </thead>           
            <tbody>
            <tr id="52597">    
                <td class="cent c0 "> row1.1    </td> 
                <td class="cent c0 "> row1.2    </td>
                <td class="cent c0 "> row1.3    </td>
            </tr>
            <tr id="52597">    
                <td class="cent c0 "> row1.1    </td> 
                <td class="cent c0 "> row1.2    </td>
                <td class="cent c0 "> row1.3    </td>
            </tr>
            <tr id="52597">    
                <td class="cent c0 "> row1.1    </td> 
                <td class="cent c0 "> row1.2    </td>
                <td class="cent c0 "> row1.3    </td>
            </tr>
            <tr id="52597">    
                <td class="cent c0 "> row1.1    </td> 
                <td class="cent c0 "> row1.2    </td>
                <td class="cent c0 "> row1.3    </td>
            </tr>
            <tr id="52597">    
                <td class="cent c0 "> row1.1    </td> 
                <td class="cent c0 "> row1.2    </td>
                <td class="cent c0 "> row1.3    </td>
            </tr>
            <tr id="52597">    
                <td class="cent c0 "> row1.1    </td> 
         ...

CSS

.besticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0px;
} 
#admin {
	position: absolute;
	left: 15px;
	font-weight: bold;
}
#primeNav {
	background-color: #d1cbf4;
	height: 30px;
	font-weight: bold;
	text-align: center;
	border-radius: 15px;
	padding: 5px;
	border: 2px solid #7804fc;
	min-width: 1000px;
	width: 98%;
} 
#actLog {
    position: absolute;
    top:75px;
}