JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
        <div class="text">Here is some text</div>
        <div class="more-text">Here is even more text</div>
	</div>

CSS

#box{
			width:20%;
			padding-bottom: 20%;
			background-color: blue;
			border-radius: 10px;
            position:relative;
		}
.text{
    position:absolute;
    color:white;
    top:4%;
    left:6%;
    font-size:2vw
}
.more-text{
    position:absolute;
    color:white;
    bottom:10%;
    left:2%;
    font-size:2vw
}