Focus Ring CSS Generator

.focusable {
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid #dbeafe;
  background: white;
  color: #111827;
}

.focusable:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, #dbeafe 24%, transparent);
}