JSFiddle - React, Tailwind, and code Playground

by replicateur

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="card text-white border-light bg-dark mb-3" style="max-width: 18rem;">
  <img class="card-img-top" src="https://levadrouilleururbain.files.wordpress.com/2020/05/toutankhamon-tc3aate-de-pharaon-vendu-768x385-1.jpg?w=768&h=385&crop=1" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Pharaon</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <p class="btn btn-danger">1</p>
    <p class="btn btn-success">4</p>
  </div>
</div>

CSS

.card {
  margin: auto;
  cursor: pointer;
}