JSFiddle - React, Tailwind, and code Playground

by lukerichison

HTML

<div class="region-midwest">
<ul class="round-first4"
    ><li class="ncat rank-16"><span><span>16</span>N Carolina A&amp;T</span></li
    ><li class="liberty"><span><span>16</span>Liberty</span></li
    ><li class="mtsu rank-11"><span><span>11</span>Mid Tennessee St</span></li
    ><li class="stmary"><span><span>11</span>Saint Mary's</span></li
></ul><ul class="round-64"
    ><li class="louisville"><span><span>1</span>Louisville</span></li
    ><li class="ncat"><span><span>16</span>N Carolina A&amp;T</span></li
    ><li class="cost"><span><span>8</span>Colorado State</span></li
    ><li class="mizzou"><span><span>9</span>Mizzou</span></li
    ><li class="okst"><span><span>5</span>Oklahoma State</span></li
    ><li class="oregon"><span><span>12</span>Oregon</span></li
    ><li class="stlouis"><span><span>4</span>Saint Louis</span></li
    ><li class="nmst"><span><span>13</span>New Mexico State</span></li
    ><li class="memphis"><span><span>6</span>Memphis</span></li
    ><li class="stmary"><span><span>11</span>Saint Mary's</span></li
    ><li class="michst"><span><span>3</span>Michigan State</span></li
    ><li class="valpo"><span><span>14</span>Valparaiso</span></li
    ><li class="creighton"><span><span>7</span>Creighton</span></li
    ><li class="cincy"><span><span>10</span>Cincinnati</span></li
    ><li class="duke"><span><span>2</span>Duke</span></li
    ><li class="albany"><span><span>15</span>Albany</span></li
></ul>
<ul class="round-32"
    ><li class="louisville"><span><span>1</span></span></li
    ><li class="cost"><span><span>8</span></span></li
    ><li class="oregon"><span><span>12</span></span></li
    ><li class="stlouis"><span><span>4</span></span></li
    ><li class="memphis"><span><span>6</span></span></li
    ><li class="michst"><span><span>3</span></span></li
    ><li class="creighton"><span><span>7</span></span></li
    ><li class="duke"><span><span>2</span></span></li
></ul>
<ul class="round-16"
    ><li...

CSS

body {
    font-family: 'Source Sans Pro', sans-serif;
}
.region-midwest,
.region-west,
.region-south,
.region-east {
    display: block;
    float: left;
    width: 25%;
}
ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
ul {
    margin: 0 2%;
}
.region-final4 ul {
    margin: 0 0.5%;
}
li {
    display: inline-block;
    height: 3em;
    text-align: center;
    margin-bottom: 2%;
}
li:nth-child(2n):not(:last-child) {
    margin-right: 2%;
}
.region-final4 li {
    margin-bottom: 0.5%;
}
ul.round-4 li:nth-child(2n):not(:last-child) {
    margin-right: 1%;
}
li span span {
    display: inline-block;
    text-align: right;
    width: 1em;
    font-size: 0.75em;
    padding-right: 0.5em;
}
ul.round-first4 li > span,
ul.round-64 li > span {
    display: block;
    width: 9em;
    position: absolute;
    z-index: 1;
    top: 4.5em;
    left: 50%;
    margin-left: -4.5em;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}


ul.round-first4 li.rank-16              {margin-left:  2.6875%;}
ul.round-first4 li.rank-13              {margin-left: 40.6250%;}
ul.round-first4 li.rank-16 ~ li.rank-11 {margin-left: 37.6250%;}
ul.round-first4 li,
ul.round-64 li {
    text-align: left;
    height: 10em;
    position: relative;
                width:  5.375%;}
ul.round-32 li {width: 11.750%;}
ul.round-16 li {width: 24.500%;}
ul.round-8  li {width: 50.000%;}
ul.round-4  li {width: 24.750%;}
ul.round-2  li {width: 50.000%;}
ul.round-1  li {width:100.000%;}

li.louisville {background-color: #E31B23; color: black;}
li.duke       {background-color: #001A57; color: #E8E5E2;}
li.michst     {background-color: #18453B; color: white;}
li.oregon     {background-color: #094C3A; color: #fff200;}
li.cost       {background-color: #0A453B; color: #AB8F4A;}
li.stlouis    {background-color: #01193B; color: #CCC;}
li.memphis    {background-color: #0A1691; color: #CBCBCB;}
li.creighton ...