JSFiddle - React, Tailwind, and code Playground

HTML

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

CSS

html, body {max-width:1120px;margin:auto;text-align:center;}
div {position:relative;display:inline-block;vertical-align:top;width:240px;height:280px;top:0;margin:40px 40px 0 0;background:#fff;border-radius:4px;box-shadow:0 0 10px 0 #bbb;cursor:pointer;}
div:after {content:"";position:absolute;width:100%;height:55px;left:0;bottom:0;border:2px solid #e8e8e8;background:#eee;z-index:-1;}
div:after {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
div:after, div {-moz-transition:all .3s ease;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;}
div:hover:after {bottom:-55px;}


@media screen and (min-width:1120px) {
	div:hover+div+div+div+div {top:40px;}
}

@media screen and (min-width:840px) and (max-width:1119px) {
	div:hover+div+div+div {top:40px;}
}

@media screen and (min-width:560px) and (max-width:839px) {
	div:hover+div+div {top:40px;}
}

@media screen and (min-width:280px) and (max-width:559px) {
	div:hover+div {top:40px;}
}