JSFiddle - React, Tailwind, and code Playground

by Yaroslav Samardak

HTML

<div class='box1'></div>
<div class='box2'></div>
<div class='box2'></div>
<div class='box2'></div>
<div class='box2'></div>

CSS

.box1, .box2 {
	width: 150px;
	height: 48px;
	border-radius: 24px;
	margin: 16px;
	border: 1px solid #ddd;
	cursor: pointer;
}

.box1:hover, .box2:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.box2 {
	transition: box-shadow 0.3s ease-in-out;
}

.box2:hover {
	transition: all .2s ease-in-out;
}