JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.box2 {
        position: absolute;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        font-weight: bold;
        color: #FFF;
        border: 1px solid;  
        background-color:black;
        bottom: 5px;
        left: 0px;
        width:100%;

        opacity:0.4;
        filter:alpha(opacity=40); /* For IE8 and earlier */
}
.box{
    position:relative;
    width:200px;
    float:left;
    margin:5px;
   
}
.img1{
    width:100%;
    }
    .text{
    margin:5px;
    }
</style>
</head>

<body>
<div class="box" >
  <img src="http://4.bp.blogspot.com/_uSVW2RmbNkY/TRYevrrSIUI/AAAAAAAAAB0/S0aISGZ5YaQ/s400/Toyota-FT-HS-Hybrid-Sports-Car.jpg" class="img1" />
     <div class="box2">
         <div class="text">Texto 1
        <br>que tal?
           </div>  
    </div>
   
</div>
    <div class="box">
  <img src="http://4.bp.blogspot.com/_lG2az5ut9w0/S6ucSVRZGbI/AAAAAAAALys/xR1hgdVOdUU/s1600/japanese_cosplayers_29.jpg" class="img1" />
     <div class="box2">
         <div class="text">y esta bicha?
             <br>bien</div>
    </div>
   
</div>
</body>
</html>