JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>Ma première page Bootstrap</h1>
<p>Design responsif !</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Commentaire 1</h3>
<p>C'est terrible de ne pas savoir s'arrêter !</p>
<p>Quelque-part, je dois aimer me triturer les neurones ... serais-atteint par le syndrome de masochisme ?</p>
</div>
<div class="col-sm-4">
<h3>Commentaire 2</h3>
<p>Après tout, je disais la même chose en ce qui concerne le HTML et le CSS.</p>
<p>Toutefois, pas de quoi fantasmer, il s'agit d'un modèle simple.</p>
</div>
<div class="col-sm-4">
<h3>Commentaire 3</h3>
<p>Pour le responsif, c'est OK.</p>
<p>Il va falloir améliorer cette page ... pas fini de "bouffer" du code !</p>
</div>
<div class="col-sm-4">
<h3>Commentaire 4</h3>
<p>Ajouter des colonnes, c'est très simple.</p>
<p>Mais pour changer la police, les couleurs, et le reste ... pas aussi évident !</p>
</div>
<div class="col-sm-4">
<h3>Commentaire 5</h3>
<p>Où se trouve le fichier .css ?</p>
<p>Si j'active les deux liens cités dans le head, dans un autre onglet, je suis impressionné par le code auquel je ne comprends pas grand-chose ... à part quelques bribes. Il y a des personnes vraiment douées pour créer de telles pages !!!</p>
</div>
<div class="col-sm-4">
<h3>Commentaire 6</h3>
<p>Bon, assez pour aujourd'hui.</p>
<p>Comme disent les sages :...