JSFiddle - React, Tailwind, and code Playground

HTML

<div class="principale">

<div class="conteneur">
<div class="logo">
<img src="images/logo.png" />	
</div>	

<div class="slogan">
<img src="images/slogan.png" />	
</div>
<br style="clear:both;"/>	
</div>

<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a>Agenda</a></li>
<li><a>Actu</a></li>
<li><a>Zoom</a></li>
<li><a>Team</a></li>
</ul>

<div class="conteneur">	

<div class="left">

<div class= "article-1">
<img src="images/chat.png"/>
</div>


<div class= "article-2">
<img src="images/oiseau.png"/>
</div>

<div class= "article-3">
<img src="images/chien.png"/>
</div>

<br style="clear:both;"/>	

</div>	

<div class="right">


</div>
<br style="clear:both;"/>	

</div>


</div>

CSS

.active {
background:white;
color:white;
}

/* STYLES CSS */

/** OSSATURE **/

.principale {
width:1000px;
height:800px;
margin:20px auto 0px auto;
background: white;
}

.conteneur {
width:100%;

}	

/** BANNIERE **/
.logo {
width:154px;
height:154px;
float:left;
}

.slogan{
width:350px;
height:78px;
float:left;	
margin:76px 413px 20px 83px;
}

.menu {
height:42px;
padding-top:10px;
padding-bottom:10px;
padding: 0px 80px 0px 80px;
}


.menu li {
display :inline;
width: 128px;
}


.menu a {
width:128px;
height:42px;
font-family:Cheddar Jack;
color:black;
font-size:38px;
text-decoration:none;
margin:0px 50px 0px 50px;
border: 1px #ef8f25 solid;
border-radius: 10px;
}
.menu a:hover{color:white; background: #ef8f25} 


.left {
width: 670px;
height: 584px;
background: #f9d8b3;
  float: left;
margin: 26px 0px 30px 0px;
padding: 10px 0px 10px 0px;	
}


.article-1{
width: 610px;
height: 260px;
background: white;
margin : 10px 30px 10px 30px;
}

.article-2{
width: 284px;
height: 250px;
background: white;
margin : 28px 42px 10px 30px;
float: left;
}

.article-3{
width: 284px;
height: 250px;
background: white;
margin : 28px 30px 10px 0px;
float:right;
}

.right{
width:330px;
height:528px;
float:right;
background: red;
}