JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Catch me</title>
    <style type="text/css">
        .menu {
            -moz-box-shadow: inset 0px 4px 0px 0px #ffffff;
            -webkit-box-shadow: inset 0px 4px 0px 0px #ffffff;
            box-shadow: inset 0px 4px 0px 0px #ffffff;
            background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
            background: -moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
            background-color: #ededed;
            -webkit-border-top-left-radius: 9px;
            -moz-border-radius-topleft: 9px;
            border-top-left-radius: 9px;
            -webkit-border-top-right-radius: 9px;
            -moz-border-radius-topright: 9px;
            border-top-right-radius: 9px;
            -webkit-border-bottom-right-radius: 9px;
            -moz-border-radius-bottomright: 9px;
            border-bottom-right-radius: 9px;
            -webkit-border-bottom-left-radius: 9px;
            -moz-border-radius-bottomleft: 9px;
            border-bottom-left-radius: 9px;
            text-indent: 0;
            border: 1px solid #dcdcdc;
            display: inline-block;
            color: #777777;
            font-family: arial;
            font-size: 21px;
            font-weight: bold;
            font-style: normal;
            height: 50px;
            line-height: 50px;
            width: 100px;
            text-decoration: none;
            text-align: center;
            text-shadow: 1px 1px 0px #ffffff;
        }

            .menu:hover {
                background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
                background: -moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
                filter:...