JSFiddle - React, Tailwind, and code Playground

by Mohammed Ismail Ansari

HTML

<ul id="normandy-sr1" class="normandy">
    <li>Kaidan Alenko</li>
    <li>Richard Jenkins</li>
    <li>Ashley Williams</li>
    <li>Garrus Vakarian</li>
    <li>Tali Zorah Vas Neema</li>
    <li>Urdnot Wrex</li>
    <li>Dr. Liara T'Soni</li>
</ul>
<br />
<br />
<ul id="normandy-sr2" class="normandy">
    <li>Miranda Lawson</li>
    <li>Jacob Taylor</li>
    <li>Dr. Mordin Solus</li>
    <li>Jack</li>
    <li>Urdnot Grunt</li>
    <li>Thane Krios</li>
    <li>Samara</li>
    <li>Morinth</li>
    <li>Legion</li>
    <li>Zaeed Massani</li>
    <li>Kasumi Goto</li>
</ul>
 
<div class="my-region"></div>

CSS

.normandy
{
   -webkit-flow-into: example-text-flow;
   padding: 0;
   margin: 0;
}
   
.my-region
{
   -webkit-flow-from: example-text-flow;
    border: 1px solid black;
    padding: 2px;
    margin: 5px;
    position: absolute;
    top: 0px;
    right: 0px;
}

JavaScript

// CSS Regions 2