JSFiddle - React, Tailwind, and code Playground

by chardetm

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="panneau col-12" id="fb">
      <h1>
        Bienvenue chez Fakebook !
      </h1>
      <p>
        Déjà utilisé par plus de 2 utilisateurs, rejoignez-les !
      </p>
      <button>
    S'inscrire
      </button>
      <button>
    Se connecter
      </button>
    </div>
  </div>
  <div class="row">
    <div class="panneau col-xl-3 col-sm-6 col-12">
      <h2>Réseau social</h2>
      <p>
        Un réseau social révolutionnaire qui permet de rester en contact avec votre famille et vos amis ! Partagez vos meilleurs moments sans retenue avec ceux que vous aimez.
      </p>
    </div>
    <div class="panneau col-xl-3 col-sm-6 col-12">
      <h2>Messagerie instantanée</h2>
      <p>
        Une messagerie instantanée pour ne plus avoir à demander le numéro de téléphone de vos amis ! Les messages sont cryptés de bout en bout pour respecter votre vie privée.
      </p>
    </div>
    <div class="panneau col-xl-3 col-sm-6 col-12">
      <h2>Une d'actualité</h2>
      <p>
        Des articles sur vos centres d'intérêts vous sont proposés tous les jours. Vous pouvez régler l'anti-spoiler si vous n'avez pas vu le dernier épisode de Game of Thrones !
      </p>
    </div>
    <div class="panneau col-xl-3 col-sm-6 col-12">
      <h2>Et bien plus !</h2>
      <p>
        Rejoignez-nous et nous pourrons utiliser toutes vos données personnelles pour vous fournir des services sur-mesure ! Et aussi nous faire de l'argent, normal quoi.
      </p>
    </div>
  </div>
</div>

CSS

.panneau {
  font-family: sans-serif;
  text-align: center;
  padding: 30px 10px 50px 10px;
}

#fb {
  background: #d1edff;
}