JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
    <div class="col-md-4 col-sm-6 popin">
        <div class="containerdiv">
            <div id="underlay"></div>
            <img class="cornerimage" src="http://video-js.zencoder.com/oceans-clip.png" /> 
        </div>
    </div>
</div>

CSS

.containerdiv { position: relative; } 
    .cornerimage { position: absolute; top: 0; left: 50%; 
transform: translate(-50%, 0px);}

    .popin{
      background:#fff;
      padding:15px;
      box-shadow: 0 0 20px #999;
      border-radius:2px;
    }

    #underlay {
        width: 320px;
        height: 320px;
        position: relative;
        top: 0;
    margin: 0 auto;
    }
img{
    width:320px;
    height:320px;
    
}