JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="container-fluid py-4">
  <div class="card-deck">
    <div class="card alert-warning border-warning">
      <div class="card-body">
        <h5 class="card-title display-3 font-weight-bold">45</h5>
        <p class="card-text">Documents enqueued</p>
        <p class="card-text"><small>Last updated 3 mins ago</small></p>
      </div>
    </div>
    <div class="card alert-success border-success">
      <div class="card-body">
        <h5 class="card-title display-3 font-weight-bold">34</h5>
        <p class="card-text">Lorem ipusum</p>
        <p class="card-text"><small>Last updated 10 mins ago</small></p>
      </div>
    </div>
    <div class="card text-muted bg-light">
      <div class="card-body">
        <h5 class="card-title display-3 text-muted">0</h5>
        <p class="card-text">TODO<br>
          Something</p>
        <p class="card-text"><small>Last updated 10 mins ago</small></p>
      </div>
    </div>
  </div>
  <div class="card-deck mt-4">
    <div class="card alert-primary border-primary">
      <div class="card-body">
        <h5 class="card-title display-3 font-weight-bold">254</h5>
        <p class="card-text">Documents enqueued</p>
        <p class="card-text"><small>Last updated 3 mins ago</small></p>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <h5 class="card-title display-3 font-weight-bold">11</h5>
        <p class="card-text">Yolo<br>Lorem ipusum</p>
        <p class="card-text"><small>Last updated 10 mins ago</small></p>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <h5 class="card-title display-3 font-weight-bold text-danger">49</h5>
        <p class="card-text">
          Dolor sit
        </p>
        <p class="card-text"><small>Last updated 10 mins ago</small></p>
      </div>
    </div>
  </div>
</div>