JSFiddle - React, Tailwind, and code Playground

by naveen

HTML

<div id="cmr-wrapper">
    <table id="cmr-wrapper">
        <tbody>
            <tr>
                <td>1</td>
                <td colspan="2">Lorem ipsum</td>
            </tr>
            <tr>
                <td class="rotate-left">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it                
                </td>
                <td></td>
                <td class="rotate-right">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
                </td>
            </tr>            
        </tbody>
        
    </table>            
</div>

CSS

#cmr-wrapper{
    color: #BE473F;
    margin: 0;
    padding: 0;
    width: 1240px;
}
td.data{
    display:table-cell;
    vertical-align-top;
}
td.rotate-right{
    -moz-transform:rotate(-270deg); 
-moz-transform-origin: bottom left;
-webkit-transform: rotate(-270deg);
-webkit-transform-origin: bottom left;
-o-transform: rotate(-270deg);
-o-transform-origin:  bottom left;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    width:7%;
}
td.rotate-left{
    -moz-transform:rotate(-270deg); 
-moz-transform-origin:  top right;
-webkit-transform: rotate(-270deg);
-webkit-transform-origin:  top right;
-o-transform: rotate(-270deg);
-o-transform-origin:  top right;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    width:7%;
}