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>
        <img id="arrieresun" src="http://www.csszengarden.com/210/sunlight.jpg" alt=""/>
        
        <div style="position:absolute;left:0px;top:80px;width:100%;height:100%;">
        <h1>Mon super site</h1>        
        <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>


        





         Contenu de la page ici

        </div>   
        

    </body>
</html>

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: black;

    
    
    color: white;
    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 {
    
    width : 100%;
    height: 100%;
    position:absolute;
    left:0px;
    top:0px;
    display: block;
    margin-left: 100px;
    margin-right: 100px;
}



p
{
    font-size: small; /* Paragraphes de 14 pixels */
}