JSFiddle - React, Tailwind, and code Playground

by Kawaljit Singh

HTML

<h1>RIBBONS</h1>
<div class="ribbonrack">
  <div class="ribbons">
    <img src="https://via.placeholder.com/150x60?text=Ribbon 1">
    <img src="https://via.placeholder.com/150x60?text=Ribbon 2">
    <img src="https://via.placeholder.com/150x60?text=Ribbon 3">
    <img src="https://via.placeholder.com/150x60?text=Ribbon 4">
    <img src="https://via.placeholder.com/150x60?text=Ribbon 5">
  </div>
</div>

CSS

.ribbons{
  display: flex;
  width: 300px;
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
  justify-content: 
}

.ribbons > img{
  width: 150px;
}