JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content" class="contentList">
   <ul id="slist" class="storyList">    
     <li>
         <div id="storyBox1" class="sbox"> 
            <div class="boxContent" >
                <span class="overlay"><h5>Picture1 </h5></span>
                <div class="txtOverlay"><h3>This is spring and weather looks good ...</h3>
                </div>
                <span><img src="http://img13.imageshack.us/img13/38/picture11tp.jpg"/></span>
                    </div>
                </div>
            </li>    
        </ul>
    </div>

CSS

body{
    background:#D8DBDC;
}

.storyList {
    width:100%;
    height:100%;   
}


.sbox {
    float:left;
    width:300px;
    height:100px;
    padding: 5px 7px 8px 5px;
    margin-top:20px;
    margin-right:40px;

    background:white;
    border:1px solid #DDD;

    <!--border radius-->
    -webkit-border-radius: 3px;
    -moz-border-radius: 2px;
    border-radius: 3px;

    overflow: hidden;

}

.boxContent {

    width:100%;
    height:100%;
    border: 1px solid #777;
}

.storyList li {
    list-style:none;
}

.overlay {

    float:left;
    opacity: .7;
    background: #000;  
    height: 40px;  
    width: 300px; 
    position: absolute;    
}


h5{
    float:left;
    margin-top:0px;
    padding:0 0 0 5px;
    font-family: Tahoma;
    letter-spacing: 0.5px;
    font-size:30px;
    color: white; 

}


.txtOverlay {
    opacity: .7;
    background: #000;  
    height: 110px;  
    width: 300px; 
    position: absolute;        
    margin-top:150px;
    z-index:1;
    font-weight:bold;
    float:left;
    font-family: OpenSansRegular;
    letter-spacing: 0.5px;
    font-size:10px;
    color: white;
    
}