JSFiddle - React, Tailwind, and code Playground

by schrodingers

HTML

<h1>
  Flexbox gallery.  
</h1>

<div class="gallery">

  <div class="pic">
    <img src="https://unsplash.it/600/400?image=958">
  </div>
  <div class="pic">
    <img src="https://unsplash.it/600/400?image=971">
  </div>
  <div class="pic">
    <img src="https://unsplash.it/600/400?image=915">
  </div>

  <div class="pic">
    <img src="https://unsplash.it/600/400?image=407">
  </div>
  <div class="pic">
    <img src="https://unsplash.it/600/400?image=785">
  </div>
  <div class="pic">
    <img src="https://unsplash.it/600/400?image=790">
  </div>

  <div class="pic">
    <img src="https://unsplash.it/600/400?image=615">
  </div>
  <div class="pic">
    <img src="https://unsplash.it/600/400?image=912">
  </div>
  <div class="pic">
    <img src="https://unsplash.it/600/400?image=890">
  </div>

  <div class="pic">
    <img src="https://unsplash.it/600/400?image=920">
  </div>
  <div class="pic">
    <img src="https://unsplash.it/600/400?image=881">
  </div>
  <div class="pic">
    <img src="https://unsplash.it/600/400?image=844">
  </div>


  <div class="pic">
    <img src="https://unsplash.it/600/400?random">
  </div>
</div>


<!-- EXPERIMENTAL THUMBNAILS -->
<div class="thumbs">

  <div class="pic">
    <img src="https://unsplash.it/600/400?image=958">
  </div>
  <div class="pic">
    <img src="https://unsplash.it/600/400?image=971">
  </div>
  <div class="pic">
    <img src="https://unsplash.it/600/400?image=915">
  </div>

  <div class="pic">
    <img src="https://unsplash.it/600/400?image=407">
  </div>
  <div class="pic">
    <img src="https://unsplash.it/600/400?image=785">
  </div>
  <div class="pic">
    <img src="https://unsplash.it/600/400?image=790">
  </div>

  <div class="pic">
    <img src="https://unsplash.it/600/400?image=615">
  </div>
  <div class="pic">
    <img src="https://unsplash.it/600/400?image=912">
  </div>
  <div class="pic">
    <img src="https://unsplash.it/600/400?image=890">
  </div>

  <div class="pic">
    <img...

CSS

body {
  font-size: 14pt;
  line-height: 1.2em;
  font-family: Gill Sans, sans-serif;
  font-weight: 300;
  color: lightgrey;
}

.gallery {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-content: space-around;
  overflow: hidden;
}

.pic {
  flex: 0 0 30%;
  display: flex;
  margin: .5em;
  object-fit: none;
  transition: all 1s;
}

img {
  width: 100%;
  height: 100%;
}

.pic:hover {
  filter: blur(15px) saturate(55);
}


/* EXPERIMANTAL THUMBNAILS */

.thumbs {
  display: flex;
  display: none;
  justify-content: space-between;
  align-content: space-between;
  height: 50vh;
  margin-bottom: 2.5em;
}