JSFiddle - React, Tailwind, and code Playground

by moshfeu

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div style="display:grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));grid-gap: 5px;">
    <div>
        <figure class="figure">
            <a href="FixSongsReport00277_changes00041.html">
                <img src="../images/Antonin Dvorak; Itzhak Perlman, Daniel Barenboim, Samuel Sanders.jpg" class="figure-img" width="200" height="200">
            </a>
            <figcaption class="badge badge-secondary">
                12 files 
            </figcaption>
            <figcaption class="badge badge-secondary">
                0 files modified
            </figcaption>
            <figcaption class="figure-caption">
                <a href="FixSongsReport00277_changes00041.html">
                    Antonin Dvorak; Itzhak Perlman, Daniel Barenboim, Samuel Sanders
                </a>
            </figcaption>
        </figure>
    </div>
    <div>
        <figure class="figure">
            <a href="FixSongsReport00277_changes00029.html">
                <img src="../style/images/folder.jpg" class="figure-img" width="200" height="200">
            </a>
            <figcaption class="badge badge-secondary">
                27 files 
            </figcaption>
            <figcaption class="badge badge-secondary">
                0 files modified
            </figcaption>
            <figcaption class="figure-caption">
                <a href="FixSongsReport00277_changes00029.html">
                    Choir of Trinity College
                </a>
            </figcaption>
        </figure>
    </div>

CSS

.badge{
    position: relative;
    top: -3em;   
}

.figure-caption {
position: relative;
  top: -2em
}