JSFiddle - React, Tailwind, and code Playground

by ilyador

HTML

<div id="page" role="main">
    <div class="wide-box"></div>
    <div class="gallery">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div><!-- gallery -->
  </div>

CSS

body {
  background-color: yellow;
}

#page {
  overflow-x: hidden;
  width: 320px;
  margin-top: 40px;
}

.gallery {
  margin: 0 auto;
  width: 310px;
}
.box:nth-child(5n+4) {
  margin-left: 52px;
}

.box {
  display: inline-block;
  width: 100px;
  height: 200px;
  margin: -42px 0 -70px 0;
  background-color: black;
  cursor: pointer;
}
.wide-box {
  width: 700px;
  height: 200px;
  background-color: red;
}