JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>item 1
    <div class="overlay">overlaid</div>
  </li>
  <li>item 2
    <div class="overlay">overlaid 2</div>
  </li>
  <li>item 3
    <div class="overlay">overlaid 3</div>
  </li>
</ul>

CSS

li {
   width: 100px;
   height: 100px;
   float: left;
 }
 /* overlay invisible et plus grand que les carrés, s'affiche uniquement on mouse over */
 
 .overlay {
   position: relative;
   top: -1em;
   left: 80px;
   width: 200px;
   height: 200px;
   border: 1px solid red;
   background-color : orangered;
 }