JSFiddle - React, Tailwind, and code Playground

by Bizon4ik

HTML

<body>
<div id="main">
 <a href="#"><img src="img/logo.png" alt="альтернативный текст"/> </a>


<div class="menu">
    <ul>
        <li ><a href="#">Home</a></li>
        <li ><a href="#">Portfolio</a></li>
        <li ><a href="#">Become a member</a></li>
        <li ><a href="#">Partners</a></li>
        <li ><a href="#">About us</a></li>
        <li ><a href="#">Contacs</a></li>
    </ul>
</div>
</div>

</body>

CSS

body {
    margin:0;
    padding:0;
    background:white; 
    }
#main {
       margin:0 auto;
       width: 960px;
       border: 1px black solid;
}
#main img {
    border: 1px black solid;
    padding-left:20px;    
     }
  
.menu {
    background:#AFAFAF;
    overflow: hidden; 
} 
   
.menu ul {
    list-style:none;
    margin: 0;
    padding:0;
    border-top:1px solid black;
         
    }
.menu li {
    float:left;    
}
.menu a{
    text-decoration: none;
    font-size: 18px;
    font-family: arial;
    color:#fff;
    display:block;
    line-height: 42px;
    padding:0 41px;    
}

.menu li:first-child a {
    padding: 0 41px 0 43px;
}