<div class="items">
  <div class="items_header">
    <p>Игроки</p>
  </div>
  <div class="items_icon">
    <svg viewBox="0 0 20 10" width="20">
       <path d="M0,0 10,10 20,0" fill="transparent" stroke="#000" stroke-width="3"/>
    </svg>
  </div>
  
  <div class="outer"></div>
</div>

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.items{
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  border: 1px solid #000;
  border-radius: 10px;
  background: transparent;
  width: 90%;
  margin: auto;
}

.items_header p{
  font-weight: 900;
  font-family: sans;
}

.items_icon{
  cursor: pointer;
}

.outer{
  position: absolute;
  top: 100%;
  left: 0;
  max-width: 100%;
}

.user{
  opacity: 0;
  height: 1px;
  transition: 0.2s linear;
  overflow: hidden;
}

.user_name{
  font-family: sans;
  font-weight: 800;
}

.user_ratio{
  font-family: sans;
  font-weight: 500;
}

.user.active{
  border: 1px solid;
  border-radius: 10px;
  height: 60px;
  padding: 10px 20px;
  opacity: 1;
}

let mass = [{
  user: "Алексей Викторович",
  percent: "63% побед"
},{
  user: "Игорь Ануфриевич",
  percent: "54% побед"
},{
  user: "Головач Лена",
  percent: "72% побед"
},];

let occum = "";

document.querySelector(".items").addEventListener("click", addTimeout);
addItem();

function addTimeout(){
 setTimeout(function (){
    document.querySelectorAll(".user").forEach(function(block){
      block.classList.add("active")
    })
  },300)
 
}

function addItem(){
  mass.forEach(function (el){
    occum += `
    <div class="user">
      <p class="user_name">${el.user}</p>
      <p class="user_ratio">${el.percent}</p>
    </div>`
  })
  document.querySelector(".items").insertAdjacentHTML("afterend", occum);
  occum = "";
}



document.querySelector(".items").addEventListener("mouseout", removeItem)

function removeItem(){
   setTimeout(function (){
    document.querySelectorAll(".user").forEach(function(block){
      block.classList.remove("active")
    })
  },3000) 
 
}