JSFiddle - React, Tailwind, and code Playground

by Lore ZZ

HTML

<div id="splash-wrapper">
    <div id="bg">
        <!--<img src="http://placehold.it/500x300" />-->
    </div>
    <div id="over" class="round"><img class="round"  src="http://placehold.it/120/ffffff/4285F4" /></div>
    <div style="position:absolute;left:50%;top:150px; z-index:1;"><div style="position:relative;left:-50%; border: dotted red 1px;"><img class="round"  src="http://placehold.it/120/4285F4/ffffff" /></div>
    </div>
</div>

CSS

#splash-wrapper {
    width: 800px;
    height: 300px;
    position: relative;
    background-color:#ddd;
}

#bg {
      position: absolute;
      margin:0 auto;  
      top: 0; left: 0; bottom: 0; right: 0;
      width:100%;
      height:200px;
      background: url('http://placehold.it/800x300/27AE60/f4f4f4') top center;
}

#over {
    z-index: 10;
    position:absolute;   
    width:120px;
    height:120px;
    margin:0 auto;
    background:#fff;
    top:150px; 
    left:0;
    bottom:0; 
    right:0;
}

.round {
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 50%; 
  /* Firefox 1-3.6 */
  -moz-border-radius: 50%; 
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 50%; 
}