JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>

<html lang="fr">
<head>
<meta charset="utf-8">

        <meta name="Template by me" content="Template">
        <meta name="Nhaars" content="template">
        
<meta name =" viewport " content =" width =device -width , initial - scale =1.0">
<link rel="stylesheet" type="text/css" href="/Projet%20chivalry/css/style.css">

<!---------------------------------------------------->
<!---------------------------------------------------->
<title>Projet Chivalry</title>
<!---------------------------------------------------->
<!---------------------------------------------------->
</head>


<!---------------------------------------------------->
<!---------------------------------------------------->

<body>
 
<!---------------------------------------------------->
<!---------------------HEADER------------------------->
<!---------------------------------------------------->

<header>
    
     <div class="skin_bandeau">
        
        <h2>LOGO</h2>
         
          
         <nav>
             
             <ul>
                 
                 <li><a href="#">Acceuil</a></li>
                 <li><a href="#">Forum</a></li>
                 <li><a href="#">Articles</a></li>
                 <li><a href="#">Contact</a></li>
                
                 
             </ul>
             
         </nav>
         
</div>
             <div class="barsearch">
         <form name="barsearch">
             <input type="text" name="barre" id="barre" placeholder="Recherche..."/>
             <input type="button" onclick="rechercher() " value="Go" />
        </form>
         </div>
        
         
         
     
     
      <div class="logo"><img src="/Projet%20chivalry/img/maxou.png" alt="LOGO"></div>
       
    
</header>


<!---------------------------------------------------->
<!---------------------SECTION------------------------>
<!---------------------------------------------------->

<section>

<div...

CSS

html, body 
    {
        background: #e0e0e0;
        font-family: Roboto;
        font-size: 16px;
        line-height: 1.4;
        height: 100%;
        margin: 0;
        padding: 0;
        color: #222222;
    }

.skin_bandeau,h2
    {
        width: 100%;
        height: 40px;
        background: #222222;
        position: fixed;
        margin: 0;padding: 0;
        color: aliceblue;
        display: inline-block;
        padding-left: 5px;
        
    }

nav ul 
    {
        list-style-type: none;
        color: aliceblue;
        margin: 0;padding: 0;
        
        
    }
 
nav li a
    {
        height: 40px;
        line-height: 35px;
        width: 100px;
        text-align: center;
        left: 80px; 
        position: relative;
        float:left;
        margin: 0px;
        list-style-type: none;
        color: aliceblue;
        text-decoration:none; 
        
    }

a:hover
{
        -webkit-transition: background 500ms ease;
        -moz-transition: background 500ms ease;
        -ms-transition: background 500ms ease;
        -o-transition: background 500ms ease;
        transition: background 500ms ease;
        background: #00baff
}

.barsearch
{
    width: 300px;
    height: 18px;
    left: 900px;
    position: fixed;
    top: 7px;
}

.logo
{
    left: 500px;
    top: 150px;
    
}