JSFiddle - React, Tailwind, and code Playground

by ericmorand

HTML

<div class="tile logo">
  <img src="http://placehold.it/640x640">
</div>
<div class="tile" style="background-image: url(http://placehold.it/640x640/123456)">
</div>
<div class="tile" style="background-image: url(http://placehold.it/640x640/134567)">
</div>
<div class="tile" style="background-image: url(http://placehold.it/640x640/145678)">
</div>
<div class="tile" style="background-image: url(http://placehold.it/640x640/156789)">
</div>
<div class="tile" style="background-image: url(http://placehold.it/640x640/167890)">
</div>
<div class="tile" style="background-image: url(http://placehold.it/640x640/178901)">
</div>

CSS

.tile {
  height: 200px;
  width: 50%;
  float: left;
  background-size: cover;
  background-position: center center;
}

.tile.logo {
  width: 100%;
  height: 400px;
}

.tile.logo img {
  height: 100%;
}