JSFiddle - React, Tailwind, and code Playground

HTML

<div class="device laptop">
  <div class="device-screen expand-screen">
    <img src="http://www.designboom.com/wp-content/uploads/2015/11/stefano-boeri-architetti-vertical-forest-residential-tower-lausanne-switzerland-designboom-01.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 = (e) ->
    console.log("open");
    console.dir(e);
    e.preventDefault();
    e.stopPropagation();
    $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()
    return false

  deviceCloseView = (e) ->
    console.log("close");
    $("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