JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#news">Accommodation rates</a></li> 
<li><a href="#contact">About Sea Breeze</a></li> 
<li><a href="#about">Location</a></li> 
<li><a href="#about">Room Tour</a></li> 
<li><a href="#about">Accessibility</a></li> 
<li><a href="#about">Book Now</a></li> 
<li><a href="#about">Gay Brighton</a></li> 
<li><a href="#about">Our Friends</a></li> 
<li><a href="#about">Contact Sea Breeze</a></li> 
 
 
 
</ul>

CSS

body 
{background:#e8e4e1; 
} 
ul 
{ 
list-style-type:none; 
margin:0; 
padding:0; 
} 
 
li 
{ 

        margin:5px; 
        

        } 
        
li a {
    padding:2px;
    display:block; 
    padding-left:20px;
         text-align:left; 
         width:170px;
        font:12px arial,sans-serif; 
        font-weight:bold; 
        line-height:30px;
        text-decoration:none; 
        text-transform:uppercase;       
        color:#FFF; 
        background:#b2adac; 
        border-radius:25px; 
        -moz-border-radius:25px; /* Firefox 3.6 and earlier */ 
}        
 
li a:link,a:visited 
{ 
        color:#FFF; 
        text-decoration:none; 
        text-transform:uppercase; 
} 
 
li a:hover { 
        display:block;
        background:#fff; 
        color: #73aace; 
}