JSFiddle - React, Tailwind, and code Playground

by jordanlewis

HTML

<ul id="table">
    <li class="row-group">
        <ul class="row">
            <li class="col">
                r1 - Lorem ipsum
            </li>  
            <li class="col">
                r1 - Lorem ipsum dolor sit amet, consectetue
            </li>   
            <li class="col">
                r1 - Lorem ipsum dolor
            </li>
        </ul>
    </li>
    
    <li class="row-group">
        <ul class="row">
            <li class="col">
                r2 - Lorem ipsum dolor sit amet, consectetue
            </li>  
            <li class="col">
                r2 - Update
            </li>   
            <li class="col">
                r2 - Lorem ipsum dolor
            </li>
        </ul>
    </li>
    
    <li class="row-group">
        <ul class="row">
            <li class="col">
                r3 - Lorem ipsum dolor
            </li>  
            <li class="col">
                r3 - Lorem ipsum dolor
            </li>   
            <li class="col">
                r3 - Lorem ipsum dolor sit amet, consectetue
            </li>
        </ul>
    </li>
    
</ul>

<!-- ********************* -->
<br />
<br />


<ul id="table">
    <li class="row-group">
        <div>
            <ul class="row">
                <li class="col">
                    r1 - Lorem ipsum
                </li>  
                <li class="col">
                    r1 - Lorem ipsum dolor sit amet, consectetue
                </li>   
                <li class="col">
                    r1 - Lorem ipsum dolor
                </li>
            </ul>
            </div>
    </li>
    
    <li class="row-group">
                <div>
            <ul class="row">
                <li class="col">
                    r2 - Lorem ipsum dolor sit amet, consectetue
                </li>  
                <li class="col">
                    r2 - Update
                </li>   
                <li class="col">
                    r2 - Lorem ipsum dolor
                </li>
     ...

CSS

#table {       
    width: 100%; 
    padding:0; 
    display: table; 
    border: 1px solid black; 
} 


.row-group { display:table-row-group; }

.row  { 
    display: table-row; 
    border: red 3px solid;
} 

div { display: table-row;  }

.col {
    background: lightblue;
    display: table-cell;
    border: green 1px solid;
    padding:3px;
}