JSFiddle - React, Tailwind, and code Playground

by Ralph Echter

HTML

<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title"><b>Related Links</b></h3>
						</div>
						<div class="panel-body">
							<ul class="equal-height-thumbnail">
								<li>
									<figure><img src="http://www.htmllion.com/img/thumb.jpg" alt="Equal height of thumbnail"></figure>
									<div class="caption">
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nec eget felis. </p>
									</div>
									<div class="panel-footer">
										<p><a href="#" class="btn btn-primary btn-block" role="button">Read</a></p>
										<p><span class="glyphicon glyphicon-time"> 13:27</span></p>
									</div>
								</li>
								<li>
									<figure><img src="http://www.htmllion.com/img/thumb.jpg" alt="Equal height of thumbnail"></figure>
									<div class="caption">
										<p>Lorem ipsum dolor sit amet, consectetur adi amet, consectetur adi amet, consectetur adi amet, consectetur adi amet, consectetur adipiscing elit. Pellentesmet, consectetur adipiscing elit. Pellentesmet, consectetur adipiscing elit. Pellentesmet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nec eget felis. </p>
									</div>
									<div class="panel-footer">
										<p><a href="#" class="btn btn-primary btn-block" role="button">Read</a></p>
										<p><span class="glyphicon glyphicon-time"> 13:27</span></p>
									</div>
								</li>
								<li>
									<figure><img src="http://www.htmllion.com/img/thumb.jpg" alt="Equal height of thumbnail"></figure>
									<div class="caption">
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesmet, consectetur adipiscing elit. Pellentesmet, consectetur adipiscing elit. Pellentesmet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nec eget felis. </p>
										
									</div>
									<div class="panel-footer">
										<p><a href="#"...

CSS

.equal-height-thumbnail {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  
  
  margin: 0;
  padding: 0;
  list-style: none;
}

.equal-height-thumbnail li {
  position: relative;
  width: 30%;
  margin: 0 1% 20px;
  padding:0 0.5% 80px;
  background: #FFF;
  box-shadow: 0 0 1px 1px rgba(0,0,0,0.1)
}

.equal-height-thumbnail figure {
  display: block;
  margin: 5px 0;
  padding: 0;
}

.equal-height-thumbnail figure img{ width:100%;}

.caption { padding: 2%;}

.panel-footer {
  position: absolute;
  padding: 0 2%;
  bottom: 0;
}