JSFiddle - React, Tailwind, and code Playground

by MyNameIsCode

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        
        html, body { background-color: #E1E2F2; font-family: Arial, Helvetica, sans-serif; font-size: 13px; height: 99%;}
        
        #wrap {background-color: #FFFFFF; width: 960px; margin: 0 auto; margin-top:10px; height: 96%; border:1px solid;}

#main{background-color: #FFFFFF; width: 930px; margin: 0 auto; position:relative; top: 10px; border:1px solid;}

        #footer{ font-weight:bold; font-size:10px; color:#A1A2C2; width: 960px; margin: 0 auto; text-align:center; height:4%; background-color:#2C2A5C;}
        
#title{font-size:16px; font-weight:bold; color:#32347D;}

#tabs{ height:55px; width: 500px;}

#logout{text-align:right;}  
    
#render{ border: 1px solid; position:relative;}

#table-list{ top:20px; margin: 0 auto; width:900px;border-collapse: collapse; position:relative;}    

#page-title{ width: 400px; font-size: 16px; font-weight:bold; color:#5C4187;}
        
#Optiontab{font-size:12px; position: relative; top: 15px; left:16px;}
        
    </style>
</head>
<body>
    <div id="wrap">
        <div id="main">
            <div id="logout">Logout</div>
            <div id="title">Title</div>
            <div id="tabs">Tabs</div>
            <div id="render">
                <div id="page-title">
                    PAGE TITLE
                    <div id="Optiontab">OPTIONS</div>
                </div>
                <table id="table-list">
                    <tr><th></th></tr>
                    
                    <tr><td>aaaaaa</td></tr>
                    <tr><td>aaaaaa</td></tr>
                    <tr><td>aaaaaa</td></tr>
                    <tr><td>aaaaaa</td></tr>
                    <tr><td>aaaaaa</td></tr>
                    <tr><td>aaaaaa</td></tr>
                    <tr><td>aaaaaa</td></tr>
         ...