JSFiddle - React, Tailwind, and code Playground

CSS

/* Основной блок */
 
.container{
            max-width: 1200px;
            margin: 0 auto;
            background: #eeeeee;
            padding: 20px;
            border: 1px solid #000;
            column-gap: 1.5em;
            -moz-column-gap: 1.5em;
            -webkit-column-gap: 1.5em;
        }
 
/* его боксы */
 
.box{
            display: inline-block;
            padding: 1em;
            margin: 0 0 1.5em;
            background: #fff;
            width: 100%;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-shadow: 2px 2px 4px 0 #ccc;
            position: relative;
            padding: 10px;
        }
 
/* ховер блок */
 
.hidden{ 
            opacity: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background-color: rgba(244,81,17,.85);
            color: #fff;
            text-align: center;
            transition: all 0.5s;
            overflow: hidden;
            cursor: default;
        }
 
/* Когда наводим на бокс, отображаем скрытый HOVER */
 
.box:hover .hidden{
            opacity: 1;
            display: block;
        }
 
/* подхоняем количество блоков под размер экрана */
 
@media only screen and (min-width: 400px) { .container{-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;}}
         
@media only screen and (min-width: 700px) { .container { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; }}
         
@media only screen and (min-width: 900px) { .container { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; }}
         
@media only screen and (min-width: 1100px) { .container { -moz-column-count: 5; -webkit-column-count: 5; column-count: 5;}}