JSFiddle - React, Tailwind, and code Playground

by ryanwheale

HTML

<body>
    <div class="buttons">
        <section>
            <a href="#" value="Off" onclick="button7()" id="button7">&#xF011;</a>
            <span></span>
        </section>
        <section>
            <a href="#" value="Off" onclick="button1()" id="button1">&#xF011;</a>
            <span></span>
        </section>
        <section>
            <a href="#" value="Off" onclick="button2()" id="button2">&#xF011;</a>
            <span></span>
        </section>
        <section>
            <a href="#" value="Off" onclick="button3()" id="button3">&#xF011;</a>
            <span></span>
        </section>
    </div>
</body>

CSS

body {
    background: url('http://subtlepatterns.com/patterns/micro_carbon.png');
}
section {
    margin: 150px auto 0;
    width: 75px;
    height: 95px;
    position: relative;
    text-align: center;
}
:active, :focus {
    outline: 0;
}
/** Font-Face **/
@font-face {
  font-family: "FontAwesome";
  src: url("fonts/fontawesome-webfont.eot");
  src: url("fonts/fontawesome-webfont.eot?#iefix") format('eot'), 
       url("fonts/fontawesome-webfont.woff") format('woff'), 
       url("fonts/fontawesome-webfont.ttf") format('truetype'), 
       url("fonts/fontawesome-webfont.svg#FontAwesome") format('svg');
  font-weight: normal;
  font-style: normal;
}
/** Styling the Button **/
a {
    font-family: "FontAwesome";
    text-shadow: 0px 1px 1px rgba(250,250,250,0.1);
    font-size: 32pt;
    display: block;
    position: relative;
    text-decoration: none;
    box-shadow: 0px 3px 0px 0px rgb(34,34,34),
                0px 7px 10px 0px rgb(17,17,17),
                inset 0px 1px 1px 0px rgba(250, 250, 250, .2), 
                inset 0px -12px 35px 0px rgba(0, 0, 0, .5);
    width: 70px;
    height: 70px;
    border: 0;
    color: rgb(37,37,37);
    border-radius: 35px;
    text-align: center;
    line-height: 79px;
    background-color: rgb(83,87,93);

    transition: color 350ms ease, text-shadow 350ms;
        -o-transition: color 350ms ease, text-shadow 350ms;
        -moz-transition: color 350ms ease, text-shadow 350ms;
        -webkit-transition: color 350ms ease, text-shadow 350ms;
}
a:before {
    content: "";
    width: 80px;
    height: 80px;
    display: block;
    z-index: -2;
    position: absolute;
    background-color: rgb(26,27,29);
    left: -5px;
    top: -2px;
    border-radius: 40px;
    box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1), 
                inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}
a:active {
    box-shadow: 0px 0px 0px 0px rgb(34,34,34),
                0px 3px 7px 0px rgb(17,17,17),
                inset 0px 1px 1px 0px rgba(250,...