JSFiddle - React, Tailwind, and code Playground

by gr1mm3r

HTML

<article class="text_right">
<figure class="right"> 
<img src="http://placehold.it/150x150" alt="Michael Rush" />
   </figure>
  <header>
   <h3>Michael <span>Rush</span></h3>
   Founder & CEO
  </header>
  <hr/>
   Continually coordinate leveraged functional value. Holisticly target stand-alone action items with ethical
</article>
 
<article >
<figure class="left"> 
<img src="http://placehold.it/150x150" alt="Michael Rush" />
   </figure>
  <header>
   <h3>Michael <span>Rush</span></h3>
   Founder & CEO
  </header>
  <hr/>
   Continually coordinate leveraged functional value. Holisticly target stand-alone action items with ethical
</article>

<article class="text_right">
<figure class="right"> 
<img src="http://placehold.it/150x150" alt="Michael Rush" />
   </figure>
  <header>
   <h3>Michael <span>Rush</span></h3>
   Founder & CEO
  </header>
  <hr/>
   Continually coordinate leveraged functional value. Holisticly target stand-alone action items with ethical
</article>

<article>
<figure class="left"> 
<img src="http://placehold.it/150x150" alt="Michael Rush" />
   </figure>
  <header>
   <h3>Michael <span>Rush</span></h3>
   Founder & CEO
  </header>
  <hr/>
   Continually coordinate leveraged functional value. Holisticly target stand-alone action items with ethical
</article>

CSS

body{
  color:#444;
  font-family: Geneva, Arial, Helvetica, sans-serif;
}
span{
text-transform: uppercase;
}
header{
  display:block;
}
h3{
  margin-bottom:0;
}
article{
width: 48.333333333333%;
margin: 0.8%;
float: left;
display: block;

}
figure,
div{
display:block;

margin:1%;
}

img{
  border-radius: 100%;
}
.text_right{
  text-align:right;
}
.left{
 float: left;
}
.right{
 float: right;
}