JSFiddle - React, Tailwind, and code Playground
by jipexu
HTML
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<a class="mr-3" href="#" data-toggle="modal" data-target="#mo47" title="Information sur le fichier" data-toggle="tooltip"><i class="fa fa-info-circle fa-2x"></i></a>
<a href="download.php?op=mydown&did=47" target="_blank" title="Charger maintenant" data-toggle="tooltip"><i class="fa fa-download fa-2x"></i></a>
<div class="modal fade" id="mo47" tabindex="-1" role="dialog" aria-labelledby="my47" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-left" id="my47">Information sur le fichier - npds_galerie</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" title=""><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body text-left">
<p><strong>Taille du fichier : </strong>0 B</p>
<p><strong>Version :</strong> 3</p>
<p><strong>Date de chargement sur le serveur :</strong> 27-09-2018 00:00</p>
<p><strong>Chargements :</strong> 54</p>
<p><strong>Catégorie :</strong> Modules</p>
<p><strong>Description :</strong> <p>v3</p>
</p>
<p><strong>Auteur :</strong> </p>
<p><strong>Page d'accueil :</strong> <a href="http://npds" target="_blank">npds</a></p>
</div>
<div class="modal-footer">
<a class=""...
CSS
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}