JSFiddle - React, Tailwind, and code Playground

by Felype Rennan

HTML

<sl-galeria class="sl-galeria closed">
  <div class="controls">
    <button class="nav prev"><i class="fa fa-arrow-left"></i>&lt;</button>
    <button class="nav next"><i class="fa fa-arrow-right"></i>&gt;</button>
  </div>
  <div class="img-box">
    <img src="http://no-mans-sky.com/press/no_man's_sky/images/NewEridu.png">
  </div>
  <div class="thumbs-bar">
    <div class="thumb-container">
    
    </div>
    <div class="thumb-container">
    
    </div>
    <div class="thumb-container">
    
    </div>
  </div>
</sl-galeria>

SCSS

$height-thumbnails: 80px;

sl-galeria {
  width: 640px;
  height: 450px;
  background: rgba(45,45,45, 1);
  display: block;
  position: relative;
  z-index: 5;
  margin: 0;
  padding: 0;
  &:before {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
  }
  &:after {
    content: 'Clique para ver a galeria';
    text-align: center;
    line-height: 400px;
    color: rgba(250,250,250, 0.9);
    font-family: sans-serif;
    font-size: 22px;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,0, 0.4);
    position: absolute;
    z-index: 15;
    user-select: none;
    transition: 500ms ease-in-out;
  }
  .controls {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    transition: 500ms ease-in-out;
    opacity: 0;
    pointer-events: none;
    button {
      outline: none;
      border: 1px solid transparent;
      box-sizing: border-box;
    }
    button.nav {
      width: 80px;
      top: 0;
      bottom: $height-thumbnails;
      line-height: 100%;
      background: rgba(0,0,0,0);
      transition: 150ms ease-in-out;
      color: #eee;
      position: absolute;
      z-index: 12;
      &:hover {
        background: rgba(0,0,0,0.5);
      }
    }
    .prev {
      left:  0;
    }
    .next {
      right:  0;
    }
  }
  &:not(.closed){
    &:after {
      opacity: 0;
      pointer-events: none;
    }
    .controls {
      opacity: 1;
      pointer-events: all;
    }
    .img-box {
      bottom: $height-thumbnails;
    }
  }
  .img-box {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transition: 700ms cubic-bezier(0.62, 0, 0.35, 1.32);
    display: block;
    z-index:10;
    img {
      object-fit: cover; 
      width: 100%;
      height: 100%;
    }
  }
  .thumbs-bar {
    height: $height-thumbnails;
    bottom: 0;
    width: 100%;
    position: absolute;
    background: rgba(0,0,0,0.3);
    z-index:8;
    box-sizing: border-box;
    overflow: hidden;
   ...

JavaScript

$("sl-galeria").click(function(e) {
  if($(this).hasClass("closed")) {
    $(this).removeClass("closed");
  }
});