JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<div class="container">


  <div class="Files-list-file">

    <figure>
      <a href="https://www.w3schools.com/tags/pic_trulli.jpg">
        <img src="https://www.w3schools.com/tags/pic_trulli.jpg" alt="Trulli">
      </a>
      <figcaption><small>Fig.1 - Trulli, Puglia, Italy.</small></figcaption>
    </figure>

  </div>

</div>

CSS

.container {
  margin-top: 1%;
}

.Files-list-file {
  background: #EEEEEE;
  border: 1px solid #CCCCCC;
  padding: 5px 10px;

  max-width: 25%;
  min-width: 15%;
  width: auto;


}

.Files-list-file figure {
  margin: 0px;
}

.Files-list-file figure figcaption {
  text-align: center;
}

.Files-list-file figure img {
  width: 100%;
}