JSFiddle - React, Tailwind, and code Playground

by Madalina Taina

HTML

<div class="card"></div>

CSS

body {
  background: #ccc;
  text-align: center;
}

.card {
  background: #1A237E;
  border-radius: 2px;
  display: inline-block;
  height: 300px;
  margin: 1rem;
  position: relative;
  width: 300px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.25);
  transition: all 0.5s ease;
}

.card:hover {
  box-shadow: 0 10px 15px rgba(0,0,0,0.2), 0 10px 10px rgba(0,0,0,0.3);
}