JSFiddle - React, Tailwind, and code Playground
HTML
<section class="frontpagearticle">
<figure class="frontpagearticlefigure">
<img class="frontpagearticleimg">
</figure>
</section>
<section class="frontpagearticlemain">
<header>
<h2 class="frontpagearticleh2">My Header</h2>
</header>
<time class="frontpagearticletime">pubtime</time>
<p class="frontpagearticletext">Lorem ipsum dolor sit amet, sit sit dapibus ac molestie, vivamus non ut sed at nunc elementum, leo erat quisque at aliquam rutrum. Iste phasellus sociosqu auctor tincidunt proin, molestiae aliquet leo elit, mus in quisque nisi pretium. Ac ac sit rutrum, tincidunt dapibus, ipsum cum, urna dui a venenatis, aliquam dolor. Risus lacus et massa aliquam. Platea varius leo facilisi eros nunc diam, pellentesque cras eu nulla dui nullam praesent, posuere elementum lacus quis nibh pulvinar, in ut amet vestibulum, nibh pellentesque dui. </p>
<p> <a href="">Read more...</a></p>
</section>
CSS
body
{
padding: 20px;
}
.frontpagearticlefigure img
{
height: 140px;
width: 250px;
background: #ccc;
display: block;
}
.frontpagearticle
{
float: left;
}
.frontpagearticlemain
{
float: left;
margin-left: 30px;
width: 300px;
}
header
{
white-space: nowrap;
}
header h2
{
font-size: 38px;
}
time
{
float: right;
position: relative;
top: -30px;
}
.frontpagearticletext
{
width: 300px;
display: block;
margin-top: 20px;
}