JSFiddle - React, Tailwind, and code Playground

by wesley_murch

HTML

<ul id="ul1">
    <li>Lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
    <li>sit</li>
    <li>amet</li>
    <li>consectetur</li>
    <li>adipiscing</li>
    <li>elit</li>
    <li>Sed</li>
</ul>
<ul id="ul2">
    <li>elementum</li>
    <li>dictum</li>
    <li>elit</li>
    <li>sit</li>
    <li>amet</li>
    <li>hendrerit.</li>
    <li>Aenean</li>
    <li>eget</li>
    <li>dictum</li>
    <li>magna.</li>
    <li>Vivamus</li>
    <li>elementum</li>
    <li>sapien</li>
    <li>volutpat</li>
    <li>dapibus</li>
    <li>ipsum</li>
    <li>laoreet</li>
</ul>
<ul id="ul3">
    <li>elementum</li>
    <li>dictum</li>
    <li>elit</li>
    <li>sit</li>
    <li>amet</li>
    <li>hendrerit.</li>
    <li>Aenean</li>
    <li>eget</li>
    <li>dictum</li>
    <li>magna.</li>
    <li>Vivamus</li>
    <li>elementum</li>
    <li>sapien</li>
    <li>volutpat</li>
    <li>dapibus</li>
    <li>ipsum</li>
    <li>laoreet</li>
</ul>

<section id="page">
    <p></p>
</section>

CSS

section {
    display:block;
    position:absolute;
    background:red;
    margin:30px;
    width:400px;
    height:400px;
}

ul{position:absolute;overflow:hidden}

#ul1{left:0;top:0;}
#ul1, #ul3{width:40px}
#ul2{
    top:0px;
    height:40px;
    left:40px;
}
#ul3{
right:0;top:40px;
}

li {
 float:left;
 width:38px;
 height:38px;  
   margin:0 1px 1px 0; 
    display:block;
    background:green;
    
}