JSFiddle - React, Tailwind, and code Playground

HTML

<div class="device laptop">
  <div class="device-screen expand-screen">
    <img src="https://upload.wikimedia.org/wikipedia/commons/0/0f/Eiffel_Tower_Vertical.JPG" alt=""/>
  </div>
</div>

SCSS

*, *:before, *:after {
  box-sizing: border-box;
}

.device {
  position: relative;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  background: {
    size: contain;
    repeat: no-repeat;
    position: 0 0;
  }
  &:after {
    display: block;
    content: "";
  }
  &.laptop {
    max-width: 875px;
    //background-image: image-url("hardware/macbookpro.png");
    &:after {
      padding-top: 57.776618%; /* Maintian aspect ratio */
    }
    .device-screen {
      top: 7.317073%;
      width: 75.156576%;
      &:after {
        padding-top: 62.5%; /* Maintian aspect ratio */
      }
    }
  }

  .device-screen {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: block;
    overflow: hidden;
    &:after {
      display: block;
      content: "";
    }
  }
  .expand-screen {
    cursor: pointer;
  }
  img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}

.device-overlay-bg {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background-color: #000;
  opacity: 0.8;
}

CoffeeScript

$activeDeviceScreen = null
$deviceOverlay = $("<div>", {class: "device-overlay-bg"})
$closedHeight = null

deviceOpenView = ->
  $activeDeviceScreen = $(this)
  $closedHeight = $activeDeviceScreen.height()
  $openHeight = $activeDeviceScreen.children("img").height()

  $activeDeviceScreen.unbind "click"

  # Issue: this is being run on bind, not click.
  # Originally, I had $("body").bind "click", deviceCloseView
  # After some online research, I found the below as a recommended fix, but I still have the same issue.
  $("body").bind "click", ->
    deviceCloseView

  $(this).animate { height: $openHeight }

  $(this).parent(".device").css("z-index", "100")

  $("body").append($deviceOverlay)
  $deviceOverlay.fadeIn()

deviceCloseView = ->
  $("body").unbind "click"
  $activeDeviceScreen.bind "click", deviceOpenView

  $deviceOverlay.fadeOut 400, ->
    $deviceOverlay.remove()
  $activeDeviceScreen.animate {
    height: $closedHeight
  }, 400, ->
    $activeDeviceScreen.css("height", "")
    $activeDeviceScreen.parent(".device").css("z-index", "auto")
    
$(document).ready ->
  $(".expand-screen").bind "click", deviceOpenView