JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<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>B</dt>
        <dd>Battles</dd>
        <dd>Biz Markie</dd>
        <dd>The Black Keys</dd>
        <dd>Blakroc</dd>
        <dd>Broken Social Scene</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>D</dt>
        <dd>Daft Punk</dd>
        <dd>David Bazan</dd>
        <dd>Death from Above 1979</dd>
        <dd>Delorean</dd>
    </dl>
    <dl>
        <dt>E</dt>
        <dd>Explosions In The Sky</dd>
    </dl>
    <dl>
        <dt>F</dt>
        <dd>Fear Before The March Of Flames</dd>
        <dd>The Fire Theft</dd>
        <dd>Flight of the Conchords</dd>
        <dd>Foo Fighters</dd>
    </dl>
    <dl>
        <dt>G</dt>
        <dd>The Get Up Kids</dd>
        <dd>Girl Talk</dd>
        <dd>godspeed you! black emperor</dd>
        <dd>Guns N' Roses</dd>
    </dl>
    <dl>
        <dt>H</dt>
        <dd>Haddaway</dd>
        <dd>Hot Chip</dd>
        <dd>Hot Hot Heat</dd>
    </dl>
    <dl>
        <dt>I</dt>
        <dd>Immaculate Machine</dd>
        <dd>Imogen Heap</dd>
        <dd>Interpol</dd>
    </dl>
    <dl>
        <dt>J</dt>
        <dd>James Blake</dd>
        <dd>Japandroids</dd>
        <dd>Jimmy Eat World</dd>
        <dd>The Juan MacLean</dd>
    </dl>
    <dl>
        <dt>K</dt>
        <dd>Kings Go Forth</dd>
        <dd>Kings of Leon</dd>
    </dl>
    <dl>
        <dt>L</dt>
        <dd>Lady Sovereign</dd>
        <dd>LCD Soundsystem</dd>
        <dd>Lykke Li</dd>
    </dl>
    <dl>
        <dt>M</dt>
        <dd>M.I.A.</dd>
        <dd>Madball</dd>
        <dd>Major Lazer</dd>
        <dd>Mount Kimbie</dd>
    </dl>
    <dl>
        <dt>N</dt>
        <dd>Neutral Milk Hotel</dd>
...

CSS

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;
    width: 99%;
    top: 0px;
}

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
}