JSFiddle - React, Tailwind, and code Playground

HTML

<div>    
    <img src="http://www.amnh.org/var/ezflow_site/storage/images/media/amnh/images/exhibitions/space-shows/space-show-v-dark-universe/dark-universe-red-shift-interior/1070732-1-eng-US/dark-universe-red-shift-interior.jpg" alt=""/> 
    <span>this is text</span>
</div>

<div>    
    <img src="http://blogs.cardenalcisneros.es/p3-primaria/wp-content/uploads/2014/05/bright-light.jpg" alt=""/> 
    <span>this is text</span>
</div>

CSS

div {
    height:300px;
    width:600px;
    position:relative;
    text-align:center;
}
img {width:100%; height:100%;}
span {
    position:absolute;
    color:white;
    line-height:300px;
    top:0;
    font-size:25px;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.8), 0px 0px 2px  rgba(0,0,0,1);
}