JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
<a href="/home.php" id="headerlogo"></a>
<div id="etiquette"><a href="/home.php" id="etiquette1"><p align="center">Acceuil</p></a>
<a href="/articles.php" id="etiquette2"><p align="center">Articles</p></a>
</div>
</div>

CSS

@font-face {
    font-family: "Sketch";
    font-style: normal;
    font-weight: normal;
    src: url("/polices/sketchblock.ttf");
}

#header {
background: url(/img/header.png);
height: 180px;
margin: -8px;
}

a#headerlogo {
display:block;
margin-left: 8px;
padding-top: 80px;
background: url(/img/logo.png) no-repeat;
height: 86px;
width: 408px;
padding-top: 0px;
}

a#headerlogo:hover {
display:block;
margin-left: 8px;
background: url(/img/logog.png) no-repeat;
height: 86px;
width: 408px;
}

p.headerp {
font-family: "Sketch";
}

a#etiquette1{
display:block;
width: 100px;
height: 75px;
margin-left: 700px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
background-color: red;
font-family: 'Sketch';
color: black;

}

a#etiquette1:visited{
color: black;
}

a#etiquette1:active{
color: blue;
}

a#etiquette1:focus{
color: blue;
}

a#etiquette1:hover{
height: 90px;
color: white;
}

a#etiquette2{
display: block;
width: 100px;
height: 75px;
margin-top: -75px;
margin-left: 810px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
background-color: blue;
font-family: 'Sketch';
color: black;

}

a#etiquette2:visited{
color: black;
}

a#etiquette2:active{
color: blue;
}

a#etiquette2:focus{
color: blue;
}

a#etiquette2:hover{
height: 90px;
color: white;
}