JSFiddle - React, Tailwind, and code Playground

by crowjonah

HTML

<table>
    <tr>
        <th class="td-column one">Column 1</th>
        <th class="td-column two">Column 2</th>
    </tr>
 <tr class="row even">
  <td class="td-column one">
   information 1
  </td>
  <td class="td-column two">
   information 2
  </td>
 </tr>
    <tr class="row">
  <td class="td-column one">
   information 3
  </td>
  <td class="td-column two">
   information 4
  </td>
 </tr>
    <tr class="row even">
  <td class="td-column one">
   information 5
  </td>
  <td class="td-column two">
   information 6
  </td>
 </tr>
</table>

CSS

body * {max-width: 100%; box-sizing: border-box;}
td, th {width: 200px; border: 1px solid black;padding: 5px;}
tr.even {background-color: rgba(89,77,55,.5);}
th {background-color: rgba(41,48,51,.7);color: rgba(250, 250, 192, .8);}
th {font-weight: bold;}
    @media screen and (max-width: 400px) {
        table {width: 100%;}                    
        td, th {
            width: 100%;
            float: left;            
        }
        .td-column.two {background: rgba(89,77,55,.8); color: white;}

    }