JSFiddle - React, Tailwind, and code Playground

by Jake Cattrall

HTML

<div class="fleet-cards grid-row">

  <!-- One Card -->
  <div class="fleet-card grid-row__col-294" style="https://f9dc70c40ff6d8e40e49-d7a4a906c087627ac5facee86b51592c.ssl.cf3.rackcdn.com/img/fleet-thumbnails/284642-1538501256.jpg">
    <div class="fleet-card__title">
      <h5>View Aircraft</h5>
    </div>
    <div class="fleet-card__contracted" *ngIf="aircraft.isContracted">
      <i class="fa fa-2x fa-handshake-o"></i>
    </div>
    <div class="fleet-card__info">
      <div class="fleet-card__logo">
        <img src="https://f9dc70c40ff6d8e40e49-d7a4a906c087627ac5facee86b51592c.ssl.cf3.rackcdn.com/img/airlines/logos/494-iberia-airlines.png?v=5bb0eeb6">
      </div>

      <div class="fleet-card__value">
        <label class="input-label">Type</label>
        <p>A319</p>
      </div>

      <div class="fleet-card__value fleet-card__location">
        <label class="input-label">Location</label>
        <p>EGLL/LHR</p>
        <p>Unknown</p>
      </div>

      <div class="fleet-card__value">
        <label class="input-label">Hours</label>
        <p>2:00</p>
      </div>

      <div class="fleet-card__registration">
        EI-ZEZ
      </div>
    </div>
  </div>


</div>

SCSS

$default-border-radius: 3px;
$default-transition: all .2s;

.grid-row {
  display: flex;
  flex-wrap: wrap;
}

.fleet-card {
  flex: 0 0 calc(100% / 12 * 2.94);
  background-position: center;
  background-size: cover;
  border: 0;
  border-radius: $default-border-radius;
  cursor: pointer;
  height: 20rem;
  margin: 1.5rem;
  min-width: 42rem;
  position: relative;
  transition: $default-transition;
  @media only screen and (max-width: 2365px) {
    flex: 0 0 calc(100% / 13 * 3.94);
    height: 20rem;
    min-width: 42rem;
  }
  @media only screen and (max-width: 1867px) {
    flex: 0 0 calc(100% / 13 * 5.94);
    height: 20rem;
    min-width: 42rem;
  }
  @media only screen and (max-width: 1375px) {
    flex: 0 0 calc(100% / 13 * 11.94);
    height: 20rem;
    min-width: 42rem;
  }
}