JSFiddle - React, Tailwind, and code Playground

Images in ordered lists with text

by tonytlwu

HTML

<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur neque velit, tristique ac auctor vitae, rhoncus a justo. Morbi cursus tortor id sapien convallis ultrices.
  <p><img src="https://placehold.it/600x300" /></p>
  </li>
  <li>Duis convallis nunc a purus lacinia mollis. Nulla in tortor scelerisque, aliquam dui fermentum, facilisis libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse molestie tortor eget sollicitudin semper. Nunc eget euismod ex, vitae tempus tortor.</li>
</ol>

CSS

p {
  margin: 0 0 1em;
}

li p img {
  display: block;
  margin-top: 1em;
}