JSFiddle - React, Tailwind, and code Playground

HTML

<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=cyrillic,latin' rel='stylesheet' type='text/css'>  
    <div id="background"></div><div id="home"><span>Главная</span></div>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    background: #d0f2fe;
}
#background {
    background: #865930;
    height: 0.5em;
    width: 10em;
    position: absolute;
    z-index: 0;
    -webkit-transform: rotate(1deg);
}
#home {
    background: -webkit-linear-gradient(top, #9e744c 0%, #9e744c 50%, #855932 51%, #715331 100%);
    width: 10em;
    height: 3em;
    position: relative;
    left: 3em;
    border-radius: 0 0 5px 5px;
    z-index: 2;
}
#home span {
    text-align: center;
    font: 1.2em 'PT Sans Narrow';
    color: white;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    top: 0.60em;
    position: absolute;
    display: block;
}
#home:before {
    content: "";
    left: 0.6em;
    top: 2em;
    position: absolute;
    width: 1em;
    height: 1em;
    border-radius: 100%;
    background: #795932;
    -webkit-transform: rotate(-15deg);
    box-shadow: -10px 10px 0 2px #d0f2fe;
    opacity: 0.9;
}
#home:after {
    content: "";
    left: -1em;
    top: -0.5em;
    position: absolute;
    width: 1.5em;
    height: 3.9em;
    border-radius: 100%;
    background: #d0f2fe;
    -webkit-transform: rotate(-15deg);
    z-index: -2;
}