JSFiddle - React, Tailwind, and code Playground

by will

HTML

<div>
    <span class="facebook"></span>
    <span class="app"></span>
</div>

SCSS

div {
    position: relative;
    width: 1000px;
    height: 680px;
    background: #efefef;
    box-shadow: inset 0 0 0 1px #ccc;
    
    span {
        display: block;
        position: absolute;
    }
}

.facebook {
    top: 182px; left: 74px;
    width: 851px;
    height: 315px;
    background: rgba(blue, .1);
    box-shadow: inset 0 0 0 1px blue;
    
    &:before {
        content: '';
        display: block;
            position: absolute;
            top: 15px; right: 15px;
            width: 635px;
            height: 285px;
            background: rgba(white, .4);
            box-shadow: inset 0 0 0 1px white;
        }
    
    &:after {
        content: '';
        display: block;
            position: absolute;
            top: 100%; left: 15px;
            width: 170px;
            height: 170px;
            margin-top: -143px;
            background: blue;
        }
}

.app {
    top: 90px; left: 0;
    width: 1000px;
    height: 500px;
    background: rgba(red, .1);
    box-shadow: inset 0 0 0 1px red;
}