JSFiddle - React, Tailwind, and code Playground

HTML

<div class="product_area">
                <ul class="product_ul">
                  <li><div class="product"></div></li>
  <li><div class="product"></div></li>
  <li><div class="product"></div></li>
  <li><div class="product"></div></li>
  <li><div class="product"></div></li>
  <li><div class="product"></div></li>
  <li><div class="product"></div></li>
  <li><div class="product"></div></li>
  </ul>
              </div>

CSS

.product
                {
                  width: 200px;
                  height: 300px;
                  background-color: green;
                }
                .product_area
                {
                  display: inline;
                }
                .product_ul
                {
                  display: flex;
                  list-style-type:none;
                }