<div class="card">
  Here is a card
</div>
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90vh;
  background: #282c34;
}

.card {
  background-color: #fff;
  padding: 3rem 4rem;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 10px rgba(255, 255, 255, 0.1);
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 20px rgba(255, 255, 255, 0.3);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.