JSFiddle - React, Tailwind, and code Playground

by chardetm

HTML

<div class="panneau large" 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 class="panneau paslarge">
  <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 paslarge">
  <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 paslarge">
  <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 paslarge">
  <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>

CSS

body {
  margin: 0;
}

.panneau {
  font-family: sans-serif;
  text-align: center;
  padding: 30px 10px 50px 10px;
  display: inline-block;
  width: 100%;
}

.paslarge {
  width: calc(25% - 20px);
}

#fb {
  background: #d1edff;
}

@media (max-width: 1200px) {
  .paslarge {
    width: calc(50% - 20px);
  }
}

@media (max-width: 600px) {
  .paslarge {
    width: calc(100% - 20px);
  }
}