JSFiddle - React, Tailwind, and code Playground

HTML

<div id="films">
    <ul>
        <li class="title"><h3>Spring 2011 Season Films</h3></li>
        <li>...film title...</li>
        <li class="title"><h3>Spring 2011 Season Films</h3></li>
        <li>...film title...</li>
        <li>...film title...</li>  
        <li class="title"><h3>Spring 2011 Season Films</h3></li>  
        <li>...film title...</li>
        <li>...film title...</li>  
    </ul>
</div>

CSS

#films {
background: url("http://www.perplexitypictures.com/test/paper-pattern.jpg") repeat scroll 0 0 #FBFBFD;
    border-radius: 4px 4px 4px 4px;
    margin: 50px;
    padding: 60px 0px;
}

#films ul {
    position: relative;
    list-style:none;
    float:left;
    display:block;
    border:red 1px solid;
}

#films ul li {
    float: left;
    clear: both;
    display: block;
    width:470px;
    height:170px;
    background: url('http://www.perplexitypictures.com/test/images/film-hug-sprite.jpg') no-repeat 0 0
}

#films ul li.title {
    height: 0px;
    position:relative;
}


    #films ul li.title h3 {
        z-index: 200;
        display: block;
        position: absolute;
        top: -4px;
        left: -45px;
        width: 548px;
        height: 90px;
        line-height:95px;
        padding-left:40px;
        background: url('http://www.perplexitypictures.com/test/images/ribbon-yellow.png') no-repeat 0 0
    }