JSFiddle - React, Tailwind, and code Playground

by afshinprofe

HTML

<div class="page">
    <ul id="menu">
        <li><a href="#">Item 1</a></li>
       <li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>   
<li><a href="#">Item 1</a></li>
       <li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
    
    </ul>

</div>

CSS

.page {
     width: 964px;
    margin-left: auto;
    margin-right: auto;
    background-image:url(../images2/images/orta_alan_bg_GOLGE.png);
    background-repeat:repeat-y;
    border:thin blue solid;
}
ul#menu {       
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align: center;       
}

ul#menu li {
    display: inline;
    list-style: none;
    font-family: 'Museo300Regular';
    font-size:17px;
    font-style:normal;        
}
ul#menu li a 
{        
    background-image:url(../../images2/images/menu_bg_normal.jpg); 
    background-repeat: repeat;
    padding: 5px 19px 5px;        
    font-weight: normal;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #e8eef4;
    color: #FEFEFF;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
      cursor:pointer;          
}