JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<div class="wrapper">
  <div class="grid">
    <div class="card"><span class="card__title">One</span><img src="https://loremflickr.com/360/240/dog" /></div>
    <div class="card"><span class="card__title">Two</span><img src="https://loremflickr.com/330/245/dog" /></div>
    <div class="card"><span class="card__title">Three</span><img src="https://loremflickr.com/360/245/dog" /></div>
    <div class="card card--featured"><span class="card__title">Four</span><img src="https://loremflickr.com/310/240/dog" /></div>
    <div class="card"><span class="card__title">Five</span><img src="https://loremflickr.com/420/440/dog" /></div>
    <div class="card"><span class="card__title">Six</span><img src="https://loremflickr.com/320/340/dog" /></div>
    <div class="card"><span class="card__title">Seven</span><img src="https://loremflickr.com/322/240/dog" /></div>
    <div class="card"><span class="card__title">Eight</span><img src="https://loremflickr.com/321/240/dog" /></div>
    <div class="card"><span class="card__title">Nine</span><img src="https://loremflickr.com/325/240/dog" /></div>
    <div class="card"><span class="card__title">Ten</span><img src="https://loremflickr.com/320/243/dog" /></div>
    <div class="card"><span class="card__title">Eleven</span><img src="https://loremflickr.com/320/242/dog" /></div>
    <div class="card"><span class="card__title">Twelve</span><img src="https://loremflickr.com/320/340/dog" /></div>
    <div class="card"><span class="card__title">Thirteen</span><img src="https://loremflickr.com/320/440/dog" /></div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100%;
}

.wrapper {
  overflow-x: scroll;
  overflow-y: visible;
  padding: 0 0 2rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(100, minmax(100px, 1fr));
  grid-template-rows: repeat(2, minmax(100px, 1fr));
  /* grid-gap: 1rem; */
  grid-auto-flow: column;
}

.card {
  /* border: 1px solid rgba(0,0,0,0.1);
  border-radius: 0.5rem; */
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem;
  overflow: hidden;
  position: relative;
  transition: all 200ms;
  box-shadow: 0 0 0 transparent;
}
.card:hover {
  transform: scale(1.025);
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
  z-index: 1;
}
.card img {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card__title {
  position: relative;
  z-index: 1;
  color: #FFF;
}

.grid .card--featured {
  background-color: #FDD;
  grid-area: span 2 / span 2;
}