JSFiddle - React, Tailwind, and code Playground

by sidouglas

HTML

<div ref="root" class="common-room" >
  <img class="common-room__client" src="https://via.placeholder.com/120/100/FFFFFF/CCCCCC">

  <img class="common-room__client" src="https://via.placeholder.com/150/0000FF/808080">

  <img class="common-room__client" src="https://via.placeholder.com/150/0000FF/808080">

  <img class="common-room__client" src="https://via.placeholder.com/150/0000FF/808080">

  <img class="common-room__client" src="https://via.placeholder.com/150/0000FF/808080">
</div>


<!-- should look like this -->
<div ref="root" class="common-room--hack" >
  <img class="working-hack" src="https://via.placeholder.com/120/100/FFFFFF/CCCCCC">

  <img class="working-hack" src="https://via.placeholder.com/150/0000FF/808080">

  <img class="working-hack" src="https://via.placeholder.com/150/0000FF/808080">

  <img class="working-hack" src="https://via.placeholder.com/150/0000FF/808080">

  <img class="working-hack" src="https://via.placeholder.com/150/0000FF/808080">
</div>

SASS

.common-room
 position: relative
 background: pink
 height: 200px !important
 display: grid
 grid-template-rows: repeat(auto-fit, minmax(0, 1fr))


.common-room__client
  object-fit: contain
  height: 100%
  display: block
  margin: 0 auto




// just for reference to show the expected outcome.
.common-room--hack 
 opacity: 0.5
 margin-top: 500px
 position: relative
 background: red
 height: 300px !important // this is just for the example
 display: grid
 grid-template-columns: repeat(1, 1fr)
 
 
 .working-hack
  height: 60px
  display: block
  margin: 0 auto