JSFiddle - React, Tailwind, and code Playground

by AkaiKen

HTML

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <link rel="stylesheet" href="style.css"/>         <title>Smart Stream</title>     </head>          <body>         <div id="bloc_page">             <header>                 <div id="titre_principal">                     <h1>Smart Stream</h1>                     <h2 id="slogan">The smartest solution to enjoy your multimedia content!</h2>                 </div>             </header>                  <div id="banniere">             <nav>                     <ul>                        <li><a href="#">Accueil</a></li>                        <li><a href="#">Films</a></li>                        <li><a href="#">Séries</a></li>                        <li><a href="#">Contenu</a></li>                     </ul>             </nav>         </div>                  <section>             <article>                         <h1>The Smart Stream Project</h1>                         <h2>Qu'est ce que c'est?</h2>                         <p>Dans le câdre du cours de MOR (montage ou réalisation) donné par Mr Arnaud, professeur à <a href="http://www.isims.be/" >l'Isims</a>                          mes camarades et moi avons décidé de reprendre un ancien pc et d'en faire un serveur de fichiers (principalement de films)                          que l'on pourrait consulter en réseau local.</p>                                     </article>         </section>         <!--logo html de gauche         <div id="logo_html5">                 <img src="images/html5_logo.png" height="15%" width="15%" title="Ce site a été codé en HTML5 !" alt="HTML5"/>         </div>-->                  <footer>             <div id="chrome_pub">                 <img src="images/chrome_logo.png" height="50 %" width="50 %" title="Chrome" alt="logo chrome"/>                 <p>Site optimisé pour Google Chrome!                  Si vous n'êtes pas sous Google Chrome, c'est par <a id="link_google_chrome"...

CSS

/*Design*/ 
body {     
    background:url("images/html5_logo.png") center left no-repeat fixed, url("images/background.png") fixed center no-repeat; 
} 
#bloc_page {  
    margin: 0% 20% 0% 20%;
} 
/*Footer*/ 
footer  {  
    position: absolute;  
    bottom:0; 
    left:0;
    right:0;
} 
#chrome_pub { 
    text-align: center; 
}
#chrome_pub p{
    margin-top:0;
}