JSFiddle - React, Tailwind, and code Playground

by weranda

HTML

<div class="wrap">

  <div class="section">
    <div class="goods">-</div>
  </div>

  <div class="section">
    <div class="goods">-</div>
  </div>

  <div class="section">
    <div class="goods">-</div>
  </div>

  <div class="section">
    <div class="goods">-</div>
  </div>

  <div class="section">
    <div class="goods">-</div>
  </div>
</div>

<br><br><br><br><br><br><br><br><br><br>

<div class="wrap1">

  <div class="section">
    <div class="goods">-</div>
  </div>

  <div class="section">
    <div class="goods">-</div>
  </div>

  <div class="section">
    <div class="goods">-</div>
  </div>

  <div class="section">
    <div class="goods">-</div>
  </div>

  <div class="section">
    <div class="goods">-</div>
  </div>
</div>

CSS

body{
    background: #f7f7f7;
  }
  .wrap, .wrap1{
    width: 500px;
    margin: 50px auto;
  }

  .section{
    width: 20%;
    float: left;
  }

  .goods{
    border: 1px solid #e6e6e6;
    height: 100px;
    margin: -1px 0 0 -1px;
    padding: 15px;
    height: 100px;
    display: block;
  }
  .goods:hover{box-shadow: rgba(0, 0, 0, 0.14902) 0px 2px 10px 0px;}

  .wrap1 .goods{
    background: #FFF;
  }