JSFiddle - React, Tailwind, and code Playground

by Liu ChangFeng

HTML

<dl>
  <div>
    <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>
  </div>
  <div>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </div>
  <div>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </div>
  <div>
    <dt>T</dt>
    <dd>Ted Leo &amp; The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </div>
</dl>

CSS

body {
  margin: 0;
  box-sizing: border-box;
}

dt {
  background: #B8C1C8;
  color: #FFF;
  padding: 10px 0 10px 10px;
  position: sticky;
  top: 0px;
}

dd {
  margin: 0;
  padding: 10px 0 10px 12px;
}

dd+dd {
  border-top: 1px solid #CCC;
}