Login E-commerce Modern

                <!--
@type: Login
@industry: E-commerce
@style: Modern
@category: UI Element, Page Section, Navigation
@framework: Tailwind
@license: Free
-->

<section class="w-full min-h-screen flex items-center justify-center bg-white py-12 md:py-24">
  <div class="bg-card text-card-foreground flex flex-col gap-6 border py-6 w-full max-w-md mx-auto shadow-xl rounded-xl overflow-hidden">
    <div class="grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 text-center space-y-2 pt-8 pb-6">
      <div class="flex justify-center mb-4">
        <div class="flex items-center gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-8 w-8 text-orange-500">
            <path d="m7.5 4.27 9 5.15"></path>
            <path
              d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z">
            </path>
            <path d="m3.3 7 8.7 5 8.7-5"></path>
            <path d="M12 22V12"></path>
          </svg>
          <span class="text-2xl font-bold text-gray-900">StyleHub</span>
        </div>
      </div>
      <div class="text-3xl font-bold text-gray-900">Welcome Back!</div>
      <div class="text-sm text-gray-600">Sign in to your StyleHub account to continue
        shopping.</div>
    </div>
    <div class="px-6 pb-8">
      <form class="space-y-6">
        <div class="space-y-2">
          <label class="flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
            for="email">Email
          </label>
          <input class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border-gray-300 focus:border-orange-500 focus:ring-orange-500"
            id="email" placeholder="[email protected]" required="" type="email">
        </div>
        <div class="space-y-2">
          <div class="flex items-center justify-between">
            <label
              class="flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
              for="password">Password</label>
              <a href="#" class="text-sm text-orange-500 hover:underline">
                Forgot password?</a>
              </div>
              <input class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border-gray-300 focus:border-orange-500 focus:ring-orange-500"
            id="password" required="" type="password" placeholder="Password">
        </div>
        <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-9 has-[&gt;svg]:px-3 w-full bg-orange-500 hover:bg-orange-600 text-white px-8 py-3 text-lg font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200"
          type="submit">
          Sign In
        </button>
      </form>
      <div class="mt-6 text-center text-sm text-gray-600">Don't have an account? 
        <a href="#" class="font-medium text-orange-500 hover:underline">Sign Up</a>
      </div>
    </div>
  </div>
</section>