JSFiddle - React, Tailwind, and code Playground

HTML

<section>
    <p>
        <span class="txt1">Apps to</span>
        <span class="txt2">perfect fdsfds fdsjdsf dsflmk</span>
        <span class="txt3">your</span>
        <span class="txt4">cool</span>
    </p>
</section>

<!--
Photo By ahhyeah
http://www.flickr.com/photos/ahhyeah/101408115/sizes/z/in/photostream/

Created for stack overflow:
http://stackoverflow.com/questions/8841208/recreate-text-effect-through-html5-and-google-text-api
-->

CSS

@import 'http://fonts.googleapis.com/css?family=Cabin:400|Cabin+Condensed:600';

section {
    background:#999 url(http://farm1.staticflickr.com/19/101408115_252ef7db1b_z.jpg?zz=1) no-repeat left top;
    background-size:100% auto;
    padding:0px 25px 15px;
    width:600px;    
}
section > p {
    display:inline-block;
    background:#CCC;
    background:rgba(255,255,255,0.33);
    padding:10px 20px 20px;
    width:300px;
    line-height:0.95;
}
section > p > span {
    font-family:"Cabin Condensed", sans-serif;
    font-weight:600;
    display:inline-block;
    color:#FFF;
    color:rgba(255,255,255,0.95);
    text-shadow:0px 2px 5px rgba(0,0,0,0.75);
    text-transform:uppercase;
    vertical-align:text-top;
}
section > p > span.txt1,
section > p > span.txt3 {font-size:40px; padding-left:5px;}
section > p > span.txt2 {font-size:80px;}
section > p > span.txt3 {padding-right:15px;}
section > p > span.txt4 {font-size:62px; font-family:"Cabin", sans-serif; font-weight:400; }