JSFiddle - React, Tailwind, and code Playground

by hcgriggs

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<?php foreach (loop('items') as $item): ?>
  <div class="container">
    <div class="item">
      <div class="row">
        <!-- attempt at square grid -->
        <div class="col-md-3 col-sm-4 col-xs-6 item-item">
          <div class="dummy"></div>
          <div class="thumbnail purple">
            Title: <br>
            Author: <br>
            Description <br>
             <br>
          </div>
        </div>
      </div>
    </div>
    <!-- end grid -->

CSS

.dummy {
  margin-top: 100%;
}

.thumbnail {
  position: absolute;
  top: 15px;
  bottom: 0;
  left: 15px;
  right: 0;
  text-align: center;
  padding-top: calc(50% - 30px);
}

.item-item {
  border: solid black 5px;
}