JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<div class="menu">
      <a title="Виды походов" href="pohod/vid_pohoda.html" id="s2">&nbsp;&nbsp;Виды походов</a>
      <a title="Контакты" href="kont/kontact.html" id="s3">&nbsp;&nbsp;Контакты</a>
      <a title="Важно знать" href="znay/znay.html" id="s4">&nbsp;&nbsp;Важно знать</a> 
      <a title="Сотрудничество" href="workme.php" id="s5">&nbsp;Сотрудничество</a>         
     </div>

CSS

.menu {
background-image: url("http://za-zabor.ru/img/menu_center.png");
border: 0 none;
height: 231px;
margin: 0;
padding: 3px 15px;
position: relative;
width: 250px;
}
#s2 {
    margin: 0 13px;
    padding: 0;
    position: absolute;
}
#s3 {
    margin: 60px 45px;
    padding: 0;
    position: absolute;
}
#s4 {
    margin: 120px 28px;
    padding: 0;
    position: absolute;
}
#s5 {
    margin: 181px 10px;
    padding: 0;
    position: absolute;
}
.menu_a a:link, .menu a:link, .menu_b a:link, .menu_a a:visited, .menu a:visited, .menu_b a:visited, .menu_a a:active, .menu a:active, .menu_b a:active {
    color: forestGreen;
    font-family: cursive;
    font-size: 27px;
    font-weight: bold;
    text-decoration: none;
    /*text-shadow: 0 1px 2px darkgreen;*/
}
.menu_a a:hover, .menu_b a:hover, .menu a:hover {
    color: forestGreen;
    font-family: cursive;
    font-size: 27px;
    font-weight: bold;
    text-decoration: none;
    /*text-shadow: 0 -2px 3px black;*/
}