JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Premiers tests du CSS</title>
    </head>

    <body>

        <div id="arrieregradient_bg"><img src="http://www.csszengarden.com/210/gradient_bg.jpg" alt="">

        </div>

        <div id="arrierewater"><img src="http://www.csszengarden.com/210/water_edge.jpg" alt="">

        </div>

        <div id="arrierewater1"><img src="http://www.csszengarden.com/210/water_edge.jpg" alt="">

        </div>

        <div id="arrierewater2"><img src="http://www.csszengarden.com/210/water_edge.jpg" alt="">

        </div>

        <div id="arrierewater3"><img src="http://www.csszengarden.com/210/water_edge.jpg" alt="">

        </div>
        

        <div id="arriereclouds"><img src="http://www.csszengarden.com/210/clouds.jpg" alt="">

        </div>
        

        <div id="arriereclouds1"><img src="http://www.csszengarden.com/210/clouds.jpg" alt="">

        </div>

        


        <div id="arrieresun"><img src="http://www.csszengarden.com/210/sunlight.jpg" alt="">

        </div>
        
        <div style="position:absolute;left:0px;top:0px;width:100%;height:100%;">
        <h1>Mon site</h1>  
        <div style="position:absolute;left:400px;top:250px;width:100%;height:100%;">      
        <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
        <p>Bonjour et <span class="salutations">bienvenue</span> sur mon site !</p>


        </div>


        
        <form style="position:absolute;left:200px;top:400px;width:50%;height:100%;" id="" action="" method="post">
          <fieldset id="name">
        <legend>Informations</legend>
        <label>Title
          <select id="title1" name="title1">
            <option selected="selected">Mr.</option>
            <option>Mrs.</option>
            <option>Ms.</option>
          </select>
        </label>
        <label style="margin-left: 0.95em;">Nom
...

CSS

@font-face { /* Définition d'une nouvelle police nommée LearningCurveProRegular */
    font-family: 'LearningCurveProRegular';
    src: url('LearningCurve_OT-webfont.eot');
    src: url('LearningCurve_OT-webfont.eot?#iefix') format('embedded-opentype'),
         url('LearningCurve_OT-webfont.woff') format('woff'),
         url('LearningCurve_OT-webfont.ttf') format('truetype'),
         url('LearningCurve_OT-webfont.svg#LearningCurveProRegular') format('svg');
}

h1 /* Utilisation de la police qu'on vient de définir sur les titres */
{
    font-family: 'LearningCurveProRegular';
    text-align: center;

    font-size: 40px; /* Titres de 40 pixels */
    color: blue;
}


.salutations
{
    color: blue;
}
html, body {

    
    background-color: white;

    
    
    color: grey;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
/* l'image occupe toute la place du body */
#arriere {
    
    width : 100%;
    height: 100%;
    position:absolute;
    left:0px;
    top:0px;
    
}

#arrieresun {
    
    position:absolute;
    left:0px;
    top:0;
    right:0px;
    bottom:200px;
}



#arriereclouds {
    
    position:absolute;
    left:0px;
    top:0;
    right:400px;
    bottom:200px;
}

#arriereclouds1 {
    
    position:absolute;
    left:928px;
    top:0;
    right:400px;
    bottom:200px;

}




#arrieregradient_bg {
    
    position:absolute;
    left:0px;
    top:0px;
    right:0px;
    bottom:-1000px;
}
#arrierewater {
    
    position:absolute;
    left:0px;
    top:104px;
    right:0px;
    bottom:0px;
}

#arrierewater1 {
    
    position:absolute;
    left:399px;
    top:104px;
    right:0px;
    bottom:0px;
}

#arrierewater2 {
    
    position:absolute;
    left:798px;
    top:104px;
    right:0px;
    bottom:0px;
}

#arrierewater3 {
    
    position:absolute;
    left:1197px;
    top:104px;
    right:0px;
    bottom:0px;
}


#arrieregradient_bg > img {
    width: 100%;
    height: 100%;
}







p
{   
    font-family:...