JSFiddle - React, Tailwind, and code Playground

by webgleb

HTML

<div class="parent">
  <div class="block"> Блок с тенью 1 </div>
  <div class="block"> Блок с тенью 2 </div>
  <div class="block"> Блок с тенью 3 </div>
</div>

CSS

body {
  background: #fff;
}

.parent {
 	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
  width: 700px;
  margin: 20px auto;
  border: 1px solid red;
  padding: 5px;
}

.block {
  width: 200px;
  height: 200px;
  border: 1px solid #999;
}

.block:hover {
  box-shadow:10px 9px 16px 33px rgba(226,223,223,1);
  -webkit-box-shadow:10px 9px 16px 33px rgba(226,223,223,1);
  -moz-box-shadow:10px 9px 16px 33px rgba(226,223,223,1);
}