JSFiddle - React, Tailwind, and code Playground

by SmoothD

HTML

<header>

<img class=logo src="https://scache.vevo.com/Content/VevoImages/Module/E7F0CB1BD14ADDBD325981B88CE0151820132741314468.jpg" alt="Exemple" width="40" />

<ul>
    <li>Accueil</li>
    <li>Equipe</li>
    <li>Photos</li>
    <li>Contact</li>
    <li>Blog</li>
</ul>
</header>
<div id="wrapper">

</div>

<img  src="https://scache.vevo.com/Content/VevoImages/Module/E7F0CB1BD14ADDBD325981B88CE0151820132741314468.jpg" alt="Exemple" width="300" />
<img  src="https://scache.vevo.com/Content/VevoImages/Module/E7F0CB1BD14ADDBD325981B88CE0151820132741314468.jpg" alt="Exemple" width="300" />
<img  src="https://scache.vevo.com/Content/VevoImages/Module/E7F0CB1BD14ADDBD325981B88CE0151820132741314468.jpg" alt="Exemple" width="300" />

CSS

body
{
    margin:0;
    
}
header{
    position:relative;
    height:57px;
}
img.logo
{
    position:fixed;    
    height:57px;
    z-index:1;
    width:60px;
    
}
ul {
    background:rgba(245, 245, 245, 0.9);    
    width:600px;    
    position:fixed;
    top:0;
    margin:0;
}

ul li {
    display:inline-block;
    padding: 20px;
    font-family:"Arial";
    font-size: 15px;
}

ul li:first-child {
    margin-left: 49px;
}

#wrapper{
    position:relative;
    width:100px;
    height:100px;
    background:black; 
            
}