JSFiddle - React, Tailwind, and code Playground

by Joe Saad

HTML

<!-- .promo*10>img[src="http://placehold.it/80x80"][alt="promo image"]+p{Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis nam earum dignissimos maxime consequatur a cupiditate quis numquam consequuntur inventore dolore veritatis. Quae facilis distinctio tenetur at illo laboriosam dolor?}+a.cta{Sign up} -->
<div class="promo">
    <img src="http://placehold.it/80x80" alt="promo image">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis nam earum dignissimos maxime consequatur a cupiditate quis numquam consequuntur inventore dolore veritatis. Quae facilis distinctio tenetur at illo laboriosam dolor?</p>
    <a href="" class="cta">Sign up</a>
</div>
<div class="promo">
    <img src="http://placehold.it/80x80" alt="promo image">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis nam earum dignissimos maxime consequatur a cupiditate quis numquam consequuntur inventore dolore veritatis. Quae facilis distinctio tenetur at illo laboriosam dolor?</p>
    <a href="" class="cta">Sign up</a>
</div>
<div class="promo">
    <img src="http://placehold.it/80x80" alt="promo image">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis nam earum dignissimos maxime consequatur a cupiditate quis numquam consequuntur inventore dolore veritatis. Quae facilis distinctio tenetur at illo laboriosam dolor?</p>
    <a href="" class="cta">Sign up</a>
</div>
<div class="promo">
    <img src="http://placehold.it/80x80" alt="promo image">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis nam earum dignissimos maxime consequatur a cupiditate quis numquam consequuntur inventore dolore veritatis. Quae facilis distinctio tenetur at illo laboriosam dolor?</p>
    <a href="" class="cta">Sign up</a>
</div>
<div class="promo">
    <img src="http://placehold.it/80x80" alt="promo image">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis nam earum dignissimos...

CSS

.promo {border:1px solid red; float:left; padding: 20px; margin: 5px 0;}
.promo img {float:left; margin-right: 20px;}
.promo .cta {float: right;}
.promo p {margin-top: 2px; padding-top: 0px;}