JSFiddle - React, Tailwind, and code Playground

HTML

<div class="one">
    <div class="blue">        
        <div class="yellow"></div>
    </div>
</div>

CSS

.one{
    width: 500px;
    height: 500px;
    background: url('http://www.moonlightcompanies.com/wp-content/uploads/2013/01/6973_MOONF-PomegranatesOnTree-8536-1.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    padding: 20px;    
}
.blue{
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid blue; 
    border-width: 20px 115px 65px 20px;
}
.yellow{
    width: 95%;
    height: 95%;
    border: 5px solid yellow;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;    
}