JSFiddle - React, Tailwind, and code Playground

by HugeHugh

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="recipe-search-results">

<a href="#" title="Steak Tacos with Homemade Pico De Gallo" class="recipe recipe-lg recipe-fav">
    <h3 class="recipe-title">
        Steak Tacos with Homemade Pico De Gallo
    </h3>
    <div class="recipe-footer">
        <div class="recipe-time">
            <i class="fa fa-clock-o"></i>
            20 min
        </div>
        <div class="recipe-views">
            1,475 views
        </div>
    </div>
    <div class="rwb-star" title="Favorite"></div>
</a>
<a href="#" title="Steak Tacos with Homemade Pico De Gallo" class="recipe recipe-sm">
    <h3 class="recipe-title">
        Steak Tacos with Homemade Pico De Gallo
    </h3>
    <div class="recipe-footer">
        <div class="recipe-time">
            <i class="fa fa-clock-o"></i>
            20 min
        </div>
        <div class="recipe-views">
            1,475 views
        </div>
    </div>
    <div class="rwb-star" title="Favorite"></div>
</a>
<a href="#" title="Steak Tacos with Homemade Pico De Gallo" class="recipe recipe-sm recipe-fav">
    <h3 class="recipe-title">
        Steak Tacos with Homemade Pico De Gallo
    </h3>
    <div class="recipe-footer">
        <div class="recipe-time">
            <i class="fa fa-clock-o"></i>
            20 min
        </div>
        <div class="recipe-views">
            1,475 views
        </div>
    </div>
    <div class="rwb-star" title="Favorite"></div>
</a>
<a href="#" title="Steak Tacos with Homemade Pico De Gallo" class="recipe recipe-sm recipe-fav">
    <h3 class="recipe-title">
        Steak Tacos with Homemade Pico De Gallo
    </h3>
    <div class="recipe-footer">
        <div class="recipe-time">
            <i class="fa fa-clock-o"></i>
            20 min
        </div>
        <div class="recipe-views">
            1,475 views
        </div>
    </div>
    <div class="rwb-star"...

CSS

.recipe-search-results {
    width: 848px;
    font-family: sans-serif;
}
.recipe {
    display: block;
    position: relative;
    float: left;
    color: white;
    margin: 6px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.recipe-sm {
    width: 200px;
    height: 200px;
}
.recipe-md {
    width: 412px;
    height: 200px;
}
.recipe-lg {
    width: 412px;
    height: 412px;
}
.recipe-title {
    font-weight: bold;
    font-size: 15px;
    position: absolute;
    bottom: 28px;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0 10px;
}
.recipe-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: rgba(0,0,0,0.5);
    line-height: 20px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: bold;
}
.recipe-time {
    float: left;
}
.recipe-views {
    float: right;
}
.recipe-footer .fa {
    font-weight: normal;
}
.rwb-star {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    background-size: cover;
    background-repeat: no-repeat;
    display: none;
}
.recipe-fav .rwb-star {
    display: block;
}



/* inline images below here */

.rwb-star {
    background-image:...