JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <img src="http://s3-eu-west-1.amazonaws.com/sdz-upload/prod/upload/Header2.png" alt="photo" />
    <ul>
        <li><a href="#">Lien 1</a></li>
        <li><a href="#">Lien 2</a></li>
        <li><a href="#">Lien 3</a></li>
        <li><a href="#">Lien 4</a></li>
    </ul>
</header>

CSS

body, div, ul, li, a {
    padding: 0;
	margin: 0;
}

body {
    padding: 10px;
}

a {
    color: inherit;
    text-decoration: inherit;
}

header {
    height: 100px;
    display: flex;
    background: #000;
    align-items: center;

    justify-content: center;
}
    header img {
        margin-left: 10px;
        margin-top: 0px;
        height: 120px;
    }
    header ul {
        display: flex;
        margin-left: 10px;
        margin-right: 10px;
    }
        header ul li {
            background: #FFF;
            color: #333;
            border-radius: 4px;
            list-style: none; 
            margin-right: 10px;
        }
        header ul li:hover {
            background: #06F;
            color: #FFF;
        }
        header ul li:last-child {
            margin-right: 0;
        }
            header ul li a {
                display: inline-block;
                padding: 5px;
            }