JSFiddle - React, Tailwind, and code Playground

by no1uknow

HTML

<div id='content'>
            This is content
            <div id='projectstatus' align='left'>
                <table>
                    <thead>
                        <th>ProjStatus 1</th>
                        <th>ProjStatus 2</th>
                        <th>ProjStatus 1</th>
                        <th>ProjStatus 2</th>
                        <th>ProjStatus 1</th>
                        <th>ProjStatus 2</th>
                        <th>ProjStatus 1</th>
                        <th>ProjStatus 2</th>
                        <th>ProjStatus 1</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td>val1</td>
                            <td>val2</td>
                            <td>val1</td>
                            <td>val2</td>
                            <td>val1</td>
                            <td>val2</td>
                            <td>val1</td>
                            <td>val2</td>
                            <td>val2</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div id='meta'>
                <div id='colorcodes' align='right'>
                    <table>
                        <thead>
                            <th>colorcodes 1</th>
                            <th>colorcodes 2</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td>colorcodesval1</td>
                                <td>colorcodesval2</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div id='issuecodes' align='right'>
                    <table>
                        <thead>
                            <th>issuecodes 1</th>
                            <th>issuecodes 2</th>
                        </thead>
                        <tbody>
                     ...

CSS

#content {
              
                width:auto;
                font: 0.7em "bitstream vera sans", verdana, sans-serif;
                text-align: justify;
                background: #ABAD85;
                padding: 10px;
                border: 2px solid black;
                border-top: none;
                border-left: none;
                z-index: 2;
                display: table;
            }
            #projectstatus{
                display: table-cell;
                margin-right: 5px;   
            }
            #meta{
                display: table-cell;
            }
            #colorcodes{
               margin-bottom: 5px;
            }
            #issuecodes{
            }
            
            table{
                margin:1em;
                border-collapse: collapse;
            }

            tr:nth-of-type(odd) {
                background: #eee;
            }

            th{
                background: #333;
                color: white;
            }
            
            td,th {
                padding: 6px;
                border: 1px solid #ccc;
                text-align: left;
            }