JSFiddle - React, Tailwind, and code Playground

by wdm954

HTML

<div class="free_tile">
    <a class="img_container canonical" href="/photos/10">
        <span class="transect_badge"></span>
        <img class="canonical" src="http://s3.amazonaws.com/t4e-development/photos/1/10/andrew_burleson_10_tile.jpg?1303238025" alt="Andrew_burleson_10_tile">
    </a>
    <div class="location">Houston</div>
    <div class="taxonomy"> T6 | Conduit | Infrastructure </div>
</div>

CSS

div.free_tile {
    width: 176px;
    height: 206px;
    float: left;
    margin: 40px;
}

a.img_container {
    display: block;
    margin-bottom: 10px;
}

span.transect_badge {
    display:block;
    position: absolute;
    height: 20px;
    width: 20px;
    background-image: url('/images/transect-badge.png');
    background-color: red;
}