JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="card">
Hello
</div>
<div class="card">
Bye
</div>
</div>
CSS
.container {
border-radius: 10px;
position: relative;
margin: 0 auto;
background: #DCDCDC;
height: 500px;
width: 500px;
}
.card{
margin: 8%; /*10% because the width is 80% and padding is 2%, and 8% on each side gets the remaining 16%*/
background: #DAA80D;
border-radius: 10px;
position: absolute;
height: auto;
width: 80%;
box-shadow: 0 3px 5px #A0A0A0;
transition: box-shadow .3s;
text-align: justify;
padding: 2%;
}