JSFiddle - React, Tailwind, and code Playground

HTML

<div id="kbd">

        <div id="keys">

            <div id="a" class="note white">A</div>
            <div id="w" class="note black">W</div>
            <div id="s" class="note white">S</div>
            <div id="e" class="note black">E</div>
            <div id="d" class="note white">D</div>
            <div id="f" class="note white">F</div>
            <div id="t" class="note black">T</div>
            <div id="g" class="note white">G</div>
            <div id="y" class="note black">Y</div>
            <div id="h" class="note white">H</div>
            <div id="u" class="note black">U</div>
            <div id="j" class="note white">J</div>
            <div id="k" class="note white">K</div>
            <div id="o" class="note black">O</div>
            <div id="l" class="note white">L</div>
            <div id="p" class="note black">P</div>
            <div id="semiColon" class="note white">;</div>
            <div id="apostrophe" class="note white">'</div>

        </div>


    </div>

CSS

body{
    width: 800px;
    height: 200px;
    display: block;
}

#kbd {

    padding: 1%;
    flex-flow: column;
    display: flex;
    flex: 4;
}

#keys {
    display: block;
    justify-content: center;

}


.note {
    flex: 1;
    display: block;
    align-items: center;
}

.black {

    display: block;
    position: absolute;
    height: 45%;
    background-color: #474747;
    color: white;
    width: 8%;
    margin: 0 -4%;
yh                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         ...