JSFiddle - React, Tailwind, and code Playground

by Jens Kühn

HTML

<div class="host">
  <header>
    <h5>
      Image Overview
    </h5>
    <button>
      close
    </button>
  </header>
  <main>
    <button>
      pre
    </button>
    <div class="file-body">
      <img...

SCSS

.host {
  background-color: rgba(51, 51, 51, .95);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
}

header {
  background-color: #000;
  color: #fff;
  padding: 1em;

  display: flex;
  align-items: center;
  justify-content: space-between;

  h5 {
    margin: 0;
  }
}

main {
  position: absolute;
  display: flex;
  top: 53px;
  height: calc(100vh - 53px);
  width: 100vw;

  button {
    position: absolute;
    top: 50%;
    left: 1em;
    transform: translateY(-50%);

    &:last-of-type {
      left: unset;
      right: 1em;
    }
  }

}

.file-body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  
  img {
    height: 100%;
    widht: 100%;
  }
}