JSFiddle - React, Tailwind, and code Playground

by Derek Wood

HTML

<section class='images'>

  <div class='image-w one'>
    <img src='https://placehold.it/300x150' alt='left'>
  </div>
  
  <div class='image-w two'>
    <img src='https://placehold.it/600x300' alt='center'>
  </div>
  
  <div class='image-w three'>
    <img src='https://placehold.it/300x150' alt='right'>
  </div>

</section>

CSS

.image-w img {
  display: block;
  width: 100%;
  height: auto;
}

.one {
  max-width: 200px;
}

.two {
  max-width: 400px;
  margin: 0 1rem;
}

.three {
  max-width: 200px;
}

.images {
  text-align: center;
}

.images .image-w {
  display: inline-block;
  vertical-align: middle;
}