JSFiddle - React, Tailwind, and code Playground

HTML

<article class="gauche">
      <header>
        <h1>Isaac Asimov</h1>
        <h2>Fondation</h2>
      </header>
      <hr>
        <p>Au cours du 13e millénaire de l’ère impériale, un homme, Hari Seldon, prédit au moyen d’une science statistique dont il est le créateur — la psychohistoire — la chute de cet empire, suivie de 30 000 ans de barbarie qui précéderont la naissance d'un autre Empire. Pour réduire cette période de barbarie à 1 000 ans, il suggère la création d’une Fondation dont le rôle sera de rassembler le savoir de toute l'humanité dans une Encyclopédie. </p>
    </article>
    <article class="droite">
      <header>
        <h1>Ray Bradbury</h1>
        <h2>Chroniques martiennes</h2>
      </header>
      <hr>
        <p>Le livre est composé de nouvelles parues dans des magazines entre 1945 et 1950 ainsi que de nouveaux textes écrits spécialement pour le recueil, dont l'action se déroule sur la planète Mars. Chaque nouvelle, à laquelle est associée une date, raconte une histoire qui s'intègre à une histoire globale que l'on lit comme un roman.</p>
    </article>

CSS

article{
    background-color: #0d1a28;
    margin: 3em 3em 4em;
    padding: 0 0 1em;
    overflow: hidden;
}
article h1 {
    font-family: Ayuthaya, serif;
    color: white;
    padding-left: 20px;
    padding-top: 20px;
    font-size: 2em;
}
article h2 {
    font-family: Ayuthaya, serif;
    color: white;
    padding-left: 10px;
    padding-top: 10px;
    font-size: 1.5em;
}
article p {
    color: white;
    padding: 20px;
}
article.droite {
    animation-name: slidedroite;
    animation-duration: 3s;
}
article.gauche {
    animation-name: slidegauche;
    animation-duration: 3s;
}
@keyframes slidegauche {
    from{
        margin-left: 100%;
    }
    to{
        margin-left: 3em;
    }
}
@keyframes slidedroite {
    from{
        margin-right: 100%;
    }
    to{
        margin-right: 3em;
    }
}