JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
<div class="page">
<table class="layout display responsive-table">
<tr>

<td>
<h2 >000<br/></h2>
<hr><p>text</p>
</td>
  
<td>
<p>
  Bacon ipsum dolor sit amet capicola ball tip beef ribs leberkas, turkey biltong salami shoulder ribeye. Leberkas chuck cow andouille kevin ribeye pork strip steak pork chop beef ribs beef ball tip corned beef. Leberkas prosciutto brisket, short ribs salami cow sirloin chicken. Bacon pork belly bresaola tenderloin biltong leberkas. Strip steak beef leberkas sirloin, venison turkey hamburger kevin. Drumstick chicken ground round t-bone flank fatback jerky ball tip. Jerky ribeye sirloin t-bone.</p>
</td>


<td>
<h2>000<br/></h2>
<hr><p>text</p>
</td>
<td>
<p>
  Bacon ipsum dolor sit amet capicola ball tip beef ribs leberkas, turkey biltong salami shoulder ribeye. Leberkas chuck cow andouille kevin ribeye pork strip steak pork chop beef ribs beef ball tip corned beef. Leberkas prosciutto brisket, short ribs salami cow sirloin chicken. Bacon pork belly bresaola tenderloin biltong leberkas. Strip steak beef leberkas sirloin, venison turkey hamburger kevin. Drumstick chicken ground round t-bone flank fatback jerky ball tip. Jerky ribeye sirloin t-bone.</p>
</td>

        
</tr>
</table>
</div>

CSS

body {font-size: .625em; color:#282828; }











/* Colonne */

.page{ width:1820px; max-width: 80%; margin: 0 auto; }

table td{ text-align: left; vertical-align:top;}

table.layout{ width: 100%; border-collapse: collapse; }

td.separateur { width:100px; border-collapse: collapse; }

td.separateur02 { width:20px; border-collapse: collapse; }

table.display{ margin: 0em; }

table.display td{ background: #fff; border: 0px solid #B3BFAA; padding: 1em; }

table.responsive-table{ box-shadow: none; }







@media (max-width: 1024px){
td.separateur td.separateur02 td.separateurbis { height:20px; border-collapse: collapse; }
td.separateurbis { height:50px; border-collapse: collapse; }

table.responsive-table{ box-shadow: none; }

table.responsive-table thead{ display: none; }

table.display th, table.display { padding: 0em; }
    
table.responsive-table tr,
table.responsive-table td
{ display: block; }
  
table.responsive-table tr
{ position: relative; margin-bottom: 1em; box-shadow: 0 0px 0px rgba(0, 0, 0, 0); }

table.responsive-table td { border-top: none; }

table.responsive-table td.organisationnumber
{ background: #fff; border-top: 0px solid #B3BFAA; }

.organisationname { margin-bottom:50px; }

table.responsive-table td.actions
{ position: absolute; top: 0; right: 0; border: none; background: none; }
  
  
}