JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<div class="page">
<table class="layout display responsive-table">
<tr>

<td>
<h2 style="padding:0; margin:0; font-style:italic;">000<br/></h2>
<hr><p>text</p>
</td>
  
<td>
<p style="font-weight:400;">
  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 style="padding:0; margin:0; font-style:italic;">000<br/></h2>
<hr><p>text</p>
</td>
<td>
<p style="font-weight:400;">
  Corned beef spare ribs hamburger pork tenderloin flank pork loin beef ribs sausage brisket chicken venison bacon short loin sirloin. Ribeye tail short ribs andouille kevin chicken shankle meatloaf, corned beef rump sirloin t-bone chuck tongue. Swine venison tongue, sirloin turducken drumstick bresaola strip steak rump. Kevin ham hock meatball tri-tip. Ground round leberkas pig beef salami strip steak meatball beef ribs. Chicken ball tip rump, short loin bresaola pork t-bone jerky jowl.</p>
</td>
        
</tr>
</table>
</div>

CSS

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


h2 {font-weight:700; text-align:left; margin:0px auto; font-family:"Arial", sans-serif; font-size: 8em;}

p {text-align:left; width: 100%; line-height:20px; margin:10px auto; width: 100%; font-size: 1.5em;}













/* Colonne */

.page{ width:1820px; max-width: 100%; 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; }
  
  
}