JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div class="main">
    <div class="cover">
        <img src="http://hdwallcomp.com/wp-content/uploads/2014/02/Fantasy-Landscape-Wallpaper-Full-HD.jpg" />
    </div>
    <div class="profile">
        <img src="http://malvorlagen-fensterbilder.de/bilder-bunt/Micky-Maus.jpg" />
    </div>
</div>

CSS

.main{
    display:block;
    position:relative;
    width: 980px;
    margin: 0 auto;
}
.cover{
    display:block;
    position:relative;
    height:437px;
    overflow:hidden;
    z-index:1;
}
.cover img{
   max-width:100%;
    z-index:1;
}
.profile{
   display:block;
    position:relative;
    border:#d0efff solid 3px;
    border-radius:5px;
    width:200px;
    height:200px;
    margin: -100px 0 10px 20px;
    z-index:999;
}
.profile img{
   max-width:100%;
    z-index:999;
}