JSFiddle - React, Tailwind, and code Playground

by kboucher

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row card-group">
  <div class="col-xs-3">
    <div class="card-style"></div>
    <div class="card text-center">
      <div class="card-body">
        <img src="https://placeholdit.co//i/80x80">
        <h3 class="card-title">
          Card Title
        </h3>
        <p class="card-text">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="card-style"></div>
    <div class="card text-center">
      <div class="card-body">
        <img src="https://placeholdit.co//i/80x80">
        <h3 class="card-title">
          Card Title
        </h3>
        <p class="card-text">Lorem ipsum</p>
      </div>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="card-style"></div>
    <div class="card text-center">
      <div class="card-body">
        <img src="https://placeholdit.co//i/10x10">
        <h3 class="card-title">
          Card Title
        </h3>
        <p class="card-text">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="card-style"></div>
    <div class="card text-center">
      <div class="card-body">
        <img src="https://placeholdit.co//i/20x20">
        <h3 class="card-title">
          Card Title
        </h3>
        <p class="card-text">Lorem ipsum</p>
      </div>
    </div>
  </div>
</div>

CSS

.col-xs-12 {
  position: relative;
}

.card-style {
  border: solid 1px blue;
  position: absolute;
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;
  
}