JSFiddle - React, Tailwind, and code Playground

by joshmoto

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.bundle.min.js"></script>
<div class="wrapper d-flex flex-column min-vh-100">
  <main class="flex-grow-1 d-flex">
    <div class="container d-flex justify-content-center align-items-center">
      <div class="row">
        <div class="col-12 text-center">
          Currently under <abbr class="text-lighter" data-bs-toggle="tooltip" title="<strong>restoration</strong> <em>/ˌrɛstəˈreɪʃən/</em> <small>noun</small><br>The action of returning something to a former owner, place, or condition.">restoration</abbr>.
        </div>
      </div>
    </div>
  </main>
  <footer>
    <div class="container">
      <div class="row">
        <div class="col-12 text-center py-3 text-lighter">
          <small>© restorer.org</small>
        </div>
      </div>
    </div>
  </footer>
</div>

<script>
  // Initialize Bootstrap tooltips with HTML support
  document.addEventListener('DOMContentLoaded', function () {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl, {
        html: true
      })
    })
  });
</script>

CSS

.text-lighter {
  color: rgba(0,0,0,.25);
}

abbr {
  border-bottom: 1px rgba(0,0,0,.25) dotted;
  cursor: help;
}