JSFiddle - React, Tailwind, and code Playground

by Milan Ghori

HTML

<body>
<div id="container">
    <div id="leftbox">


        <a class="playalpha" href="#a">A</a>
        <a class="playalpha" href="#b">B</a>
        <a class="playalpha" href="#c">C</a>
        <a class="playalpha" href="#d">D</a>
        <a class="playalpha" href="#e">E</a>
        <a class="playalpha" href="#f">F</a>
        <a class="playalpha" href="#g">G</a>
        <a class="playalpha" href="#h">H</a>
        <a class="playalpha" href="#i">I</a>
        <a class="playalpha" href="#j">J</a>
        <a class="playalpha" href="#k">K</a>
        <a class="playalpha" href="#l">L</a>
        <a class="playalpha" href="#m">M</a>
        <a class="playalpha" href="#n">N</a>
        <a class="playalpha" href="#o">O</a>
        <a class="playalpha" href="#p">P</a>
        <a class="playalpha" href="#q">Q</a>
        <a class="playalpha" href="#r">R</a>
        <a class="playalpha" href="#s">S</a>
        <a class="playalpha" href="#t">T</a>
        <a class="playalpha" href="#u">U</a>
        <a class="playalpha" href="#v">V</a>
        <a class="playalpha" href="#w">W</a>
        <a class="playalpha" href="#x">X</a>
        <a class="playalpha" href="#y">Y</a>
        <a class="playalpha" href="#z">Z</a>

    </div>
    <div id="rightbox">
        <ul>
            <li id="a" class="play">a1</li>
            <li class="play">a2</li>
            <li class="play">a3</li>
            <li id="b" class="play">b1</li>
            <li class="play">b2</li>
            <li class="play">b3</li>
            <li id="c" class="play">c1</li>
            <li class="play">c2</li>
            <li class="play">c3</li>
            <li id="d" class="play">d1</li>
            <li class="play">d2</li>
            <li class="play">d3</li>
            <li id="e" class="play">e1</li>
            <li class="play">e2</li>
            <li class="play">e3</li>
            <li id="f" class="play">f1</li>
            <li class="play">f2</li>
            <li class="play">f3</li>
            <li...

CSS

#container {
  width: 100%;
  border: solid 1px #000
}

#leftbox {
  float: left;
  width: 30%;
}

#rightbox {
  float: right;
  width: 60%;
  border: solid 1px #00ff00;
  height: 200px;
  overflow: scroll;
}