JSFiddle - React, Tailwind, and code Playground

by Raphaël

HTML

        
<header>        
    <div class="entete"></div>        </header>                      
<div class="bloc_page">                
    <nav>                        
        <ul>                            
            <li><a href="#">Accueil</a>

            </li>                            
            <li><a href="#">Informations</a>

            </li>                            
            <li><a href="#">Services</a>

            </li>                            
            <li><a href="#">Contact</a>

            </li>                            
            <li>
                <form method="post" action="traitement.php">
                    <input type="search" placeholder="Recherche..." />
                </form>
            </li>                        </ul>                </nav>                                                
    <div class="banniere_image">                    
        <div class="banniere-contenu">                        <span class="bienvenue">Bienvenue</span>
                    </div>                </div>                              
    <section>                    
        <aside>                        
            <div class="emploi">                        
                 <h1>Offres d'emploi</h1>
                            
                <ul>                                
                    <li>
                        <div>Offre 1</div>
                    </li>                                
                    <li>
                        <div>Offre 2</div>
                    </li>                                
                    <li>
                        <div>Offre 3</div>
                    </li>                                
                    <li>
                        <div>Offre 4</div>
                    </li>                            </ul>                        </div>                    </aside>                    
        <aside>                        
            <div...

CSS

/* Définition des polices personnalisées */
 @font-face {
    font-family:'Helvetica';
    font-style: normal;
    font-weight: normal;
    src: url('polices/Helvetica-Bold.ttf') format('truetype');
}
@font-face {
    font-family:'Helvetica-regular';
    font-style: normal;
    font-weight: normal;
    src: url('polices/helvetica.ttf') format('truetype');
}
/* Eléments principaux de la page */
 body {
    background: -moz-linear-gradient(top, #fcc719 0%, #207cca 50%, #fcc719 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcc719), color-stop(50%, #207cca), color-stop(100%, #fcc719));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fcc719 0%, #207cca 50%, #fcc719 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fcc719 0%, #207cca 50%, #fcc719 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fcc719 0%, #207cca 50%, #fcc719 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #fcc719 0%, #207cca 50%, #fcc719 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcc719', endColorstr='#fcc719', GradientType=0);
    /* IE6-8 */
}
.entete {
    margin-bottom: 180px;
}
.bloc_page {
    background: #FFFFFF;
    width: auto;
    margin: auto;
    border-radius: 20px;
    padding-top: 1px;
    max-width: 1225px;
    height: 1040px;
}
section h1, aside h1 {
    color: #339999;
    font-family: Helvetica, sans serif;
    font-weight: normal;
    font-size: 20px;
    margin-top: 7px;
}
aside h1 {
    text-align: center;
}
/*Menu de navigation*/
 nav {
    background: url('images/banniere.png');
    border-radius: 20px;
    width: 98%;
    margin: auto;
    height: 70px;
    position: relative;
}
nav ul {
    list-style-type: none;
}
nav li {
    display: inline-block;
    font-family: Helvetica-regular, Sans Serif;
    font-size: 149%;
    font-weight: bold;
    margin-left: 55px;
   ...