JSFiddle - React, Tailwind, and code Playground

by Maanstaart

HTML

<div id="gallery">
  <div class="snapshot"></div>
  <div class="thumbs">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

CSS

#gallery {
  display: inline-block;
  width: 100%;
  height: 400px;
}

#gallery .snapshot {
  float : left;
  background : #000;
  width: 40%;
  height: 100%;
}

#gallery .thumbs {
  float : left;
  width: 60%;
  height: 100%;
}

ul {
  display: inline-block;
  width: 100%;
  height: 400px;
}

li {
  width: calc(25% - 20px);
  height: calc(33.333% - 13.333px);
  display: block;
  background: pink;
  float: left;
  margin: 20px 0 0 20px;
}

li:first-child,
li:first-child + li,
li:first-child + li + li,
li:first-child + li + li + li{
  margin-top : 0;
}