JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">

  <div class="player-wrapper">

    <div class="player-holder">

      <div class="player-thumb"></div>

    </div>

  </div>

</div>

CSS

#wrapper {
  position: relative;
  max-width: 800px;
  height: 100%;
  -moz-box-shadow: 1px 1px 10px 1px #ccc;
  -webkit-box-shadow: 1px 1px 10px 1px #ccc;
  box-shadow: 1px 1px 10px #888;
  margin: 0 auto;
  top: 100px;
}

#wrapper:after {
  content: "";
  display: block;
  clear: both;
}

.player-wrapper {
  float: left;
  width: 100%;
}

.player-holder {
  height: 360px;
  max-width: 400px;
  background: #fff;
  margin-right: 400px;
}

.player-thumb {
  position: relative;
  margin-top: 50px;
  left: 0px;
  max-width: 400px;
  width: 100%;
  height: 260px;
  overflow: hidden;
  background: red;
}