hover.css

.hover-card-content {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
}
.hover-card-content[data-side='top'] {
  animation-name: slideUp;
}
.hover-card-content[data-side='bottom'] {
  animation-name: slideDown;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hover-document {
  @apply text-sm bg-white border rounded shadow-xl dark:bg-slate-800 border-gray-50;
}

.hover-link {
  @apply font-normal text-blue-700 underline-offset-2 decoration-slate-200 dark:decoration-slate-600 dark:text-blue-100 hover:text-blue-500;
}