JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<hr id="hr">
<div>
        <div id="item"><a href="home/" id="menu1">Home</a>     
        </div>
        <div id="item"><a href="contact/" id="menu2">Contact me</a>
        </div>
        <div id="item"><a href="about/" id="menu3">About me</a>
        </div>
</div>

CSS

#div {
    margin-left:100px;
    margin-right:100px;
}
a {
    text-align:center;
    color:#ffebcd;
    text-decoration:none;
    font-weight:bold;
}
#menu1 {
    position: absolute;
    top:100px;
    left:143px;
    border:1px;
    border-radius:8px;
    font-weight:bold;
    padding-left:15px;
    padding-right:15px;
    padding-top:5px;
    background:url("http://i1317.photobucket.com/albums/t632/dreendiz57/2013-11-04-08-06-12-1-1_zpsf3ea0954.jpg");
    background-repeat:no-repeat;
}
#menu2 {
    position:absolute;
    top:100px;
    left:250px;
    border:1px;
    border-radius:8px;
    font-weight:bold;
    padding-top:5px;
    padding-left:15px;
    padding-right:15px;
    background:url("http://i1317.photobucket.com/albums/t632/dreendiz57/2013-11-04-08-06-12-1-1_zpsf3ea0954.jpg");
    background-repeat:no-repeat;
}
#menu3 {
    position:absolute;
    top:100px;
    left:400px;
    border:1px;
    border-radius:8px;
    font-weight:bold;
    padding-top:5px;
    padding-left:15px;
    padding-right:15px;
    background:url("http://i1317.photobucket.com/albums/t632/dreendiz57/2013-11-04-08-06-12-1-1_zpsf3ea0954.jpg");
    background-repeat:no-repeat;
}
#item {
    width:auto;
    height:auto;
    display:inline;
    padding:1px;
}
#hr {
    background-color:#C80000;
    color:#C80000;
    -webkit-transform:rotate(90deg);
    position:absolute;
    width:100px;
    height:2px;
    left:130px;
    border:2px;
}