JSFiddle - React, Tailwind, and code Playground

by brianlmerritt

HTML

<div class="screen">
    <table cellspacing="0" cellpadding="0">
        <tr>
            <th class = "header1" colspan="2">All Lights</th>
            <th class = "header2"  colspan="1">Area Light</th>
            <th class = "header3"  colspan="1">Single Lights</th>
        </tr>
        <tr>
            <td class="button1">OFF</td>
            <td class="button1">Evening</td>
            <td class="button2">Stairs</td>
            <td class="button3">Balcony</td>
        </tr>
        <tr>
            <td class="button1">Cooking</td>
            <td class="button1">Dining</td>
            <td class="button2">Kitchen</td>
            <td class="button3">L. Wall</td>
        </tr>
        <tr>
            <td class="button1">Party</td>
            <td class="button1">Walls</td>
            <td class="button2">Dining</td>
            <td class="button3">R. Wall</td>
        </tr>
        <tr>
            <td class="button1">TV</td>
            <td class="button1">Bright</td>
            <td class="button2">Front</td>
            <td class="button3">Colours</td>
        </tr>
        <tr>
            <td class="button1">Extra 1</td>
            <td class="button1">Holiday</td>
            <td class="button2">K. Spots</td>
            <td class="button3">F. Spot</td>
        </tr>
    </table>
</div>

CSS

.screen{
  width:800px;
}

td {
    width:14%;
    height:50px;
    padding-top:5 px;
    border:none;
}

body,p {
    text-align:center;
    font-size: 24px;
}

.button1,.header1{
  color: #fff ;
  background-color: #0033FF ;
  border: 5px outset #666666 ;
  /*width: 180px ;*/
  /* text-decoration: none ; */
  display: block-inline ;
}

.button2,.header2{
  color: #fff ;
  background-color: #33CC00 ;
  border: 5px outset #666666 ;
  /*width: 180px ;*/
  /* text-decoration: none ; */
  display: block-inline ;
}

.button3,.header3{
  color: #fff ;
  background-color: #FF33CC ;
  border: 5px outset #666666 ;
  /*width: 180px ;*/
  /* text-decoration: none ; */
  display: block-inline ;
}

.header1,.header2,.header3 {
    border:none;
    height:60px;
}