JSFiddle - React, Tailwind, and code Playground

by Matthew Day

HTML

<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse condimentum at odio sed tincidunt. Cras finibus arcu at justo ullamcorper, et imperdiet mauris consectetur. Pellentesque eu bibendum nisl. Mauris sollicitudin consectetur eros, ut lobortis quam bibendum eu. Phasellus vitae est lorem. Vestibulum porttitor, mi quis viverra vestibulum, nibh nulla suscipit augue, ac viverra urna magna quis augue. In commodo pellentesque tellus nec gravida. Praesent lacus lectus, imperdiet nec mollis nec, porttitor eu felis.</p>
<img src="http://placehold.it/200/300" />
<p>Etiam eleifend blandit ullamcorper. Pellentesque nec lectus vel enim hendrerit elementum et et nisi. Aenean porttitor mollis ornare. Aliquam erat volutpat. Duis et turpis dolor. Nunc placerat diam mauris, eu congue est volutpat vel. Nulla arcu lorem, semper ac fringilla sed, interdum ac nisi.</p>
</div>

CSS

div {
  /* the parent div needs this to center its children */
  text-align: center;
}

p {
  /* you have to override what the parent is doing to all of its children or the text will be centered, as well */
  text-align: left;
}

img {
  /* in order for the image to respect what the parent is doing to it, you need this */
  display: inline-block;
}