JSFiddle - React, Tailwind, and code Playground

by hojondo

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
    <div>
        <dl>
            <dt>A</dt>
            <dd>Andrew W.K.</dd>
            <dd>Apparat</dd>
            <dd>Arcade Fire</dd>
            <dd>At The Drive-In</dd>
            <dd>Aziz Ansari</dd>
        </dl>
        <dl>
            <dt>C</dt>
            <dd>Chromeo</dd>
            <dd>Common</dd>
            <dd>Converge</dd>
            <dd>Crystal Castles</dd>
            <dd>Cursive</dd>
        </dl>
        <dl>
            <dt>E</dt>
            <dd>Explosions In The Sky</dd>
        </dl>
        <dl>
            <dt>T</dt>
            <dd>Ted Leo & The Pharmacists</dd>
            <dd>T-Pain</dd>
            <dd>Thrice</dd>
            <dd>TV On The Radio</dd>
            <dd>Two Gallants</dd>
        </dl>
    </div>
</div>

CSS

#one {
            position: sticky; top: 10px;
        }
        * {
            box-sizing: border-box;
        }
        dl {
            margin: 0;
            padding: 24px 0 0 0;
        }
        dt {
            background: #B8C1C8;
            border-bottom: 1px solid #989EA4;
            border-top: 1px solid #717D85;
            color: #FFF;
            font: bold 18px/21px Helvetica, Arial, sans-serif;
            margin: 0;
            padding: 2px 0 0 12px;
            position: -webkit-sticky;
            position: sticky;
            top: -1px;
        }
        dd {
            font: bold 20px/45px Helvetica, Arial, sans-serif;
            margin: 0;
            padding: 0 0 0 12px;
            white-space: nowrap;
        }
        dd + dd {
            border-top: 1px solid #CCC
        }