JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<header>
 	<h1 class="headerh1">Pas le temps de lire</h1>
 	<h2 class="headerh2">Le site des résumés de livres !</h2>
 	 
 	<img class="headerimg" src="images/once_upon_a_time_acceuil.jpg" alt="Photo d'une feuille avec écrit 'Once upon a time' au stylo" title="Il était une fois..." />
 	     
 	<p class="headerp">Quand le temps nous manque, il devient compliqué de lire.</p>
 	 
 	<nav>
 	    <ul>
 	        <li><a href="Acceuil.html">Accueil</a></li>
 	        <li><a href="Résumés.html">Résumés</a></li>
 	        <li><a href="Biographies.html">Biographies</a></li>
 	        <li><a href="Calendrier.html">Calendrier</a></li>
 	        <li><a href="Contact.html">Contact</a></li>
 	    </ul>
 	   </nav>
 </header>
 	 
 <section class="corps2">
     <article class="corps1">
 	 <h1 class="corpsh1">Les résumés disponibles</h1>
 	<p class="corps">Vous trouverez ci-dessous tous les résumés disponibles pour le moment !<br />
 	Ils sont dans un premier temps classés par ordre alphabétique suivant leur titre, puis ils sont regroupés par auteur, pour faciliter votre recherche.</p>
 	 
 	<button id="afficheMasque">Les résumés par ordre alphabétique &darr;</button>
 	 
 	<div id="text">
 	ici le texte à afficher
 	</div>
 	 
 	<button id="AfficheMasque">Les résumés par auteur &darr;</button>
 	 
 	<div id="Text">Ici un autre texte à affaicher</div>
 	<button id="affichemasque">Zola &darr;</button>
 	 
 	<div id="Texte">
 	-L'Assommoir
 	</div>
 	 
 	</article>
    <aside>

 	<h1>Informations</h1>
 	 
 	<p>Cette partie est exclusivement réservée aux nouveautés du site : un nouveau résumé, une nouvelle biographie, ou n'importe quel autre changement sera notifié ici !</p>
 	<p>Vous pouvez aussi être prévenu de ces nouveautés via Twitter, Facebookk ou Google + !</p>
 	</aside>
 	 
 	</section>

CSS

#afficheMasque, #AfficheMasque, #affichemasque {
    background: green;
    font-size: large;
    width: 86%;
    text-align : justify;
    margin-bottom: 2px;
    margin-top: 2px;
    margin: auto;
    font-family: arial;
    text-align: left;
    padding: 2%;
    border: dotted;
}

#text, #Text, #Texte {
    background:yellow;
    display:block;
    font-size: large;
    width: 81%;
    text-align : justify;
    margin-bottom: 2px;
    margin-top: 2px;
    font-family: arial;
    text-align: left;
    padding: 2%;
    border: dotted;
}