Reactive-Resume/client/styles/partials/_forms.scss

.form-control {
  @apply flex flex-col;

  span:first-child {
    @apply block cursor-pointer text-[10px] font-semibold uppercase leading-6 tracking-wider;
  }

  input,
  textarea {
    @apply rounded px-4 py-2 transition;
    @apply bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-50;
    @apply border border-transparent border-opacity-50 focus:border-zinc-400 dark:focus:border-zinc-600;
  }

  .error {
    @apply pt-2 text-xs text-red-600 dark:text-red-400;
  }

  &.file {
    > input {
      @apply p-0;
      @apply file:mr-4 file:border-0 file:bg-zinc-800 file:py-2 file:px-5 file:font-semibold file:text-zinc-50 file:hover:bg-zinc-600;
    }
  }
}