JSFiddle - React, Tailwind, and code Playground

by Kleber Mota

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <nav class="navbar navbar-dark bg-dark">
      <a class="navbar-brand" href="#">
        <svg class="bd-placeholder-img card-img-top" width="120" height="240" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
      </a>
    </nav>

    <main role="main">
      <div class="row">
        <div class="col-lg-6 col-xl-3">
          <div class="list-group ml-3 pt-3 pr-1">
            <a href="#" class="list-group-item list-group-item-action">Cras justo odio</a>
            <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
            <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
            <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
          </div>
        </div>

        <div class="col-sm-9">
          <div class="mr-3 mb-3 pt-3 pl-1" th:each="i: ${#numbers.sequence(1, 4)}">
            <div class="alert alert-dark" role="alert">A simple dark alert—check it out!</div>

            <div class="row">
              <div class="col-sm-3">
                <div class="card p-3">
                  <!-- <img src="..." class="card-img-top" alt="..."> -->
                  <svg class="bd-placeholder-img card-img-top" width="55%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder:...

CSS

body {
  margin: 0;
  padding: 0;
}

.navbar {
  height: 3rem;
}

.navbar-brand svg {
  position: absolute;
}