JSFiddle - React, Tailwind, and code Playground

by Caleb Wong

HTML

<div class="story-block prm prm-story   sbpos-1 sbrpos-5">
    <h4 class="heading">
        <strong class="kicker">Updated</strong>
        <a href="/news/" class="prm prm-story">Monaco royals deny pre-wedding rift</a>
    </h4>
    <a href="/news/" class="prm prm-story thumb-link"><img src="http://uat.api.news.com.au/content/1.0/theaustralian/images/1225852545468?format=jpg&amp;group=iphone&amp;size=small" alt="Bloody wedding" class="thumbnail"></a>
    <p class="standfirst">
        <span class="article-info">
            <em class="timestamp">5:32PM</em>
            <em class="byline">John Grey</em>
        </span>NEWLYWEDS Prince Albert II and Princess Charlene of Monaco have embarked on their honeymoon, as her father dismissed reports of a pre-wedding rift.
    </p>
</div>

CSS

.story-block { background: #ccc; padding: 0.5em; position: relative; width: 320px; }
.kicker { background: #c00; border-radius:5px; color: #fff; padding: 0 0.2em; }
.heading { margin-left: 110px; }
.standfirst .timestamp { display: none; }
.standfirst .byline { color: #888; font-weight: bold; }