JSFiddle - React, Tailwind, and code Playground

by Andrei Gheorghiu

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="nvgallery container">
	<ul class="row">
		<li class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="http://www.radiologycafe.com/images/xrays/nv_aberrant_right_subclavian_artery_1_thumb.jpg" alt="Aberrant right subclavian artery as seen on an axial CT (normal variant)" class="img-rounded img-responsive" title="Aberrant right subclavian artery as seen on an axial CT (normal variant)" data-target="#nv_arsa1" data-toggle="modal">
			<h5 data-target="#nv_arsa1" data-toggle="modal">Aberrant right subclavian artery</h5>
			<p class="small" data-target="#nv_arsa1" data-toggle="modal">Axial CT</p>
		</li>
		<li class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="http://www.radiologycafe.com/images/xrays/nv_aberrant_right_subclavian_artery_2_thumb.jpg" alt="Aberrant right subclavian artery as seen on an axial CT (normal variant)" class="img-rounded img-responsive" title="Aberrant right subclavian artery as seen on an axial CT (normal variant)" data-target="#nv_arsa2" data-toggle="modal">
			<h5 data-target="#nv_arsa2" data-toggle="modal">Aberrant right subclavian artery</h5>
			<p class="small" data-target="#nv_arsa2" data-toggle="modal">Sagittal CT. This description is intentionally longer. <br />I mean much longer.  Resize your browser and notice it no longer breaks layout.</p>
		</li>
		<li class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="http://www.radiologycafe.com/images/xrays/nv_aberrant_left_pulmonary_artery_1_thumb.jpg" alt="Aberrant left pulmonary artery as seen on an axial CT (normal variant)" class="img-rounded img-responsive" title="Aberrant left pulmonary artery as seen on an axial CT (normal variant)" data-target="#nv_alpa1" data-toggle="modal">
			<h5 data-target="#nv_alpa1" data-toggle="modal">Aberrant left pulmonary artery</h5>
			<p class="small" data-target="#nv_alpa1" data-toggle="modal">Axial CT</p>
		</li>
		<li class="col-lg-3...

CSS

.nvgallery ul.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;       
}


/* you don't need the CSS after this point, it's already in your project */

body {
  margin: 0;
}
.nvgallery ul.row {
  list-style-type: none;
  padding: 15px 0;
}
.nvgallery ul li {
    list-style: none;
    margin-bottom: 25px;
    padding: 0 10px 0;
    cursor: pointer;
}