JSFiddle - React, Tailwind, and code Playground

by JordanBlount

HTML

<h1>CSS Pedalboard</h1>

<div class="pedal delay">
    <div class="settings">
        <div class="led"></div>
        <ul class="knobs">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="switch">
        <p>Delay</p>
    </div>
</div>

<!-- Haven't been built yet -->
<div class="pedal overdrive"></div>
<div class="pedal trem"></div>
<div class="pedal chorus"></div>
<div class="pedal wah"></div>
<div class="pedal volume"></div>

CSS

/* The basics */

body {
    background: #616161;
    font-family: sans-serif;
    padding: 30px;
}
h1 {
    color: #999;
    text-shadow: #222 0px 1px 1px;
    margin-bottom:20px;
}

/* The pedalboard */

.pedal {
    width: 48px;
    height: 48px;
    background: #fed847;
    position: absolute;
    border: 1px solid #444;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    -webkit-box-shadow: #959595 0px 1px 0px;
       -moz-box-shadow: #959595 0px 1px 0px;
            box-shadow: #959595 0px 1px 0px;
}
.pedal .settings {
    height: 18px;
    position: relative;
    top: 0;
    background: #2d4148;
    margin: 3px 3px 0 3px;
    padding: 3px 0 0 0;
}
.pedal .settings .led {
    width: 3px;
    height: 3px;
    margin: 0px auto 3px;
    background: #f40500;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
.pedal .settings ul.knobs {
    width: 33px;
    margin: 0 auto;
}
.pedal .settings ul.knobs li {
    list-style: none;
    width: 6px;
    height: 6px;
    background: #0bb6ea;
    float: left;
    margin-right: 3px;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    -webkit-box-shadow: #000 0px 1px 1px;
       -moz-box-shadow: #000 0px 1px 1px;
            box-shadow: #000 0px 1px 1px;
}
.pedal .settings ul.knobs li:last-child {
    margin-right: 0;
}
.pedal .switch {
    width: 48px;
    height: 16px;
    padding-top: 7px;
    position: relative;
    bottom: 0;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    -webkit-box-shadow: #a18d36 0px -1px 0px;
       -moz-box-shadow: #a18d36 0px -1px 0px;
            box-shadow: #a18d36 0px -1px 0px;
    background: #fed847;
    background: -moz-linear-gradient(left, #b49930 0%, #fed847 10%, #fed847 90%, #b49930 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b49930),...