JSFiddle - React, Tailwind, and code Playground
by Sébastien Lorentz
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">
<ul class="container-fluid list-group"><li class="row p-2 text-white-50"><div class="col-4 d-flex align-items-center"><p class="m-0 small">Name</p></div> <div class="col-2 d-flex align-items-center"><p class="m-0 mr-3 small">Copies</p></div> <div class="col-2 d-flex align-items-center"><p class="m-0 mr-3 small">Height</p></div> <div class="col-3 d-flex align-items-center"><p class="m-0 small">Estimated time</p></div> <div class="col-1 d-flex align-items-center"></div></li> <li title="Media: Default Media | Format: A0 | Size: 841 x 1189" class="row p-2 cursor-pointer text-light user-select-none layout-current" active-fill-ratio="true" active-cut-time="true"><div class="col-4 d-flex align-items-center"><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMCIgaGVpZ2h0PSIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48L3N2Zz4=" alt="" class="img-square-2 img-thumbnail mr-2 p-0"> <div><div><p class="m-0 small"><span>New Layout</span> <!----></p></div></div></div> <div class="col-2 d-flex align-items-center"><div><div><span class="m-0 small">1</span></div></div></div> <div class="col-2 d-flex align-items-center"><p class="m-0 mr-3 small">-</p></div> <div class="col-3 d-flex align-items-center"><p class="m-0 small">
-
</p></div> <div class="col-1 d-flex align-items-center justify-content-end"><button class="btn btn-icon d-inline-flex align-items-center text-light"><i class="material-icons m-0 h5">check_box_outline_blank</i> <i class="material-icons m-0 h5...