JSFiddle - React, Tailwind, and code Playground
HTML
<div class="item_date">
<div class="item">
<button>+</button>
<div class="item_desc">01</div>
</div>
</div>
<div class="item_date">
<div class="item">
<button>+</button>
<div class="item_desc">02</div>
</div>
</div>
<div class="item_date">
<div class="item">
<button>+</button>
<div class="item_desc">03</div>
</div>
</div>
<div class="item_date">
<div class="item">
<button>+</button>
<div class="item_desc">04</div>
</div>
</div>
<div class="item_date">
<div class="item">
<button>+</button>
<div class="item_desc">05</div>
</div>
</div>
<div class="item_date">
<div class="item">
<button>+</button>
<div class="item_desc">06</div>
</div>
</div>
<div class="item_date">
<div class="item">
<button>+</button>
<div class="item_desc">07</div>
</div>
</div>
<div class="item_date">
<div class="item">
<button>+</button>
<div class="item_desc">08</div>
</div>
</div>
<div class="item_date">
<div class="item">
<button>+</button>
<div class="item_desc">09</div>
</div>
</div>
<div class="item_date">
<div class="item">
<button>+</button>
<div class="item_desc">10</div>
</div>
</div>
<div class="item_date">
<div class="item">
<button>+</button>
<div class="item_desc">...</div>
</div>
</div>
<div class="item_date">
<div class="item">
<button>+</button>
<div class="item_desc">N</div>
</div>
</div>
CSS
.item_date{
position: relative;
width: 13vw;
float: left;
margin: 0 2px 2px 0;
}
.item {
display: block;
position: relative;
width: 100%;
height: 70px;
background-color: red;
z-index:1;
}
.item > button{
display: none;
position: absolute;
right:0;
bottom:0;
}
.item:hover > button{
display: block;
}
.item_desc {
text-align: center;
color:white;
height: 70px;
}