JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<div id='block'>
 <div id='part1'>
  <img src="http://simpleicon.com/wp-content/uploads/gear-2.svg" id="part1image">
 </div>
</div>

CSS

#block {
    left: 50%;
    top: 50%;
    margin-top: -12.5%;
    margin-left: -17.5%;
    position: absolute;
    display: block;
    height: 50%;
    width: 35%;
    background: black;
    opacity: 0.75;
    border-radius: 30px;
    z-index: 0;
}
#part1 {
    display: block;
    z-index: 1;
    position: absolute;
    height: 50%;
    width: 50%;
    background: black;
    border-top-left-radius: 30px;
}
#part1image {
    position: relative;
    top: 50%;
    left: 50%;
    height: 50%;
    width: 50%;
    z-index: 1;
    opacity: 1;

}