JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/35/Information_icon.svg"/>
    <div class="text"><span class="inner-text">this is some text</span></div>
</div>

CSS

html{
    height: 100%;
}
body{
    height: 100%;
}
.main{
    height: 100%;
    width: 100%;
    background: pink;
}
img{
    display: block;
	position: absolute;
	top: 150px;
	bottom: 100px;
	right: 0;
	left: 0;
	margin: auto;
    width: 50px;
}

.text{
    display: block;
	position: absolute;
	bottom: 100px;
	right: 0;
	left: 0;
	margin: 0 auto;
    width:100%;
    text-align:center;
    height: 20px;
    top: 50%;
    margin-top: -10px;
}