Neumorphic_Gaming_Social_Login_Component
Un componente di social login complesso e reattivo in stile neumorfico con toni della terra, progettato per i siti Web di gioco. Include più opzioni di accesso e supporto per la modalità oscura.
Codice HTML
<div class="min-h-screen bg-stone-200 dark:bg-stone-900 flex items-center justify-center p-4 sm:p-6 font-sans antialiased text-stone-800 dark:text-stone-300">
<div class="w-full max-w-md p-6 sm:p-8 rounded-3xl bg-stone-200 dark:bg-stone-900 shadow-neu-light dark:shadow-neu-dark transition-all duration-300 relative overflow-hidden group">
<div class="absolute inset-0 rounded-3xl bg-gradient-to-br from-stone-300/30 to-stone-100/30 dark:from-stone-800/30 dark:to-stone-700/30 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
<h2 class="text-3xl sm:text-4xl font-bold text-center mb-6 sm:mb-8 text-stone-700 dark:text-stone-200 drop-shadow-sm">
<span class="block">Player Login</span>
<span class="block text-sm sm:text-base font-normal mt-1 opacity-70">Join the Arena!</span>
</h2>
<div class="space-y-4 sm:space-y-5 mb-6">
<button class="w-full py-3 px-6 rounded-xl flex items-center justify-center space-x-3 text-lg font-semibold bg-stone-200 dark:bg-stone-900 shadow-neu-inner-light dark:shadow-neu-inner-dark hover:shadow-neu-light hover:dark:shadow-neu-dark active:shadow-neu-inner-light active:dark:shadow-neu-inner-dark transition-all duration-300 text-stone-700 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.172 8.413 9.879v-6.988H7.078V12h2.335V9.75c0-2.322 1.41-3.592 3.49-3.592 1.002 0 1.98.074 1.98.074v2.16H13.6c-1.132 0-1.49.529-1.49 1.43v1.725h3.9L16 12h-3.328v6.988C18.343 21.172 22 16.991 22 12z" />
</svg>
<span>Login with Facebook</span>
</button>
<button class="w-full py-3 px-6 rounded-xl flex items-center justify-center space-x-3 text-lg font-semibold bg-stone-200 dark:bg-stone-900 shadow-neu-inner-light dark:shadow-neu-inner-dark hover:shadow-neu-light hover:dark:shadow-neu-dark active:shadow-neu-inner-light active:dark:shadow-neu-inner-dark transition-all duration-300 text-stone-700 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12.24 10.29c-.35-.2-.79-.34-1.24-.34-1.16 0-2.22.61-2.92 1.63V7.9H5.06v8.1h2.92v-2.02c.7-.91 1.76-1.63 2.92-1.63 1.08 0 2.05.35 2.87 1.01 1.07.82 1.73 2.1 1.73 3.61c0 1.5-.66 2.79-1.73 3.61-.82.66-1.79 1.01-2.87 1.01-1.16 0-2.22-.61-2.92-1.63v2.02H5.06v-8.1h2.92V9.92c-.7.91-1.76 1.63-2.92 1.63-1.08 0-2.05-.35-2.87-1.01-1.07-.82-1.73-2.1-1.73-3.61c0-1.5.66-2.79 1.73-3.61.82-.66 1.79-1.01 2.87-1.01 1.16 0 2.22.61 2.92 1.63V4.9H5.06v8.1h2.92V7.9H5.06V4.9h2.92V2.9c0-1.72 1.34-3.12 3.01-3.12 1.34 0 2.45.69 3.05 1.76L16 2.6c-.6-.73-1.46-1.2-2.45-1.2-1.67 0-3.01 1.41-3.01 3.12z" />
</svg>
<span>Login with Google</span>
</button>
<button class="w-full py-3 px-6 rounded-xl flex items-center justify-center space-x-3 text-lg font-semibold bg-stone-200 dark:bg-stone-900 shadow-neu-inner-light dark:shadow-neu-inner-dark hover:shadow-neu-light hover:dark:shadow-neu-dark active:shadow-neu-inner-light active:dark:shadow-neu-inner-dark transition-all duration-300 text-stone-700 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20.21 16.94c.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0 0 0 0 0 0 0 .0-.0 0-.0 0-.0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .0-.0.0-.0.0-.0.0-.0.0-.0V14.1c0 0 0-.0-.0-.0c0-.0-.0-.0-.0-.0c.0-.0-.0-.0-.0-.0.0-.0.0-.0-.0-.0.0-.0-.0-.0-.0-.0.0-.0-.0-.0-.0-.0.0-.0-.0-.0-.0-.0.0-.0-.0-.0-.0-.0.0-.0.0-.0.0-.0.0-.0.0-.0.0-.0V14.1zM12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zM12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zM12.91 16.974c-.032-.012-.064-.025-.096-.038-.035-.014-.07-.028-.105-.043-.03-.012-.06-.024-.09-.037-.035-.014-.07-.029-.105-.043-.033-.013-.066-.026-.099-.04-.04-.016-.08-.032-.12-.048-.034-.014-.068-.027-.101-.041-.04-.016-.079-.032-.119-.048-.034-.013-.069-.027-.103-.041-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.034-.013-.069-.027-.103-.041-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.018-.007-.036-.014-.054-.022-.02-.008-.04-.015-.06-.023C6.014 16.96 6.012 16.96 6.012 16.96h-.002c-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0 0 0 0 0 0 0 .0 0 .0-.0 .0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0C5.992 16.94 5.992 16.94 5.992 16.94h-.002c-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0 0 0 0 0 0 0 .0 0 .0-.0 .0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0S6.01 16.94 6.01 16.94z" />
</svg>
<span>Login with Apple</span>
</button>
</div>
<div class="relative flex py-5 items-center mb-6">
<div class="flex-grow border-t border-stone-400 dark:border-stone-700"></div>
<span class="flex-shrink mx-4 text-stone-500 dark:text-stone-400 text-sm">Or use your Player ID</span>
<div class="flex-grow border-t border-stone-400 dark:border-stone-700"></div>
</div>
<form class="space-y-5">
<div class="relative">
<input
type="text"
id="username"
name="username"
placeholder=""
class="peer w-full px-4 py-3 rounded-xl bg-stone-200 dark:bg-stone-900 border border-transparent shadow-neu-inner-light dark:shadow-neu-inner-dark focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900 transition-all duration-300 text-stone-800 dark:text-stone-300 placeholder-transparent"
autocomplete="username"
/>
<label
for="username"
class="absolute left-4 top-1/2 -translate-y-1/2 text-stone-500 dark:text-stone-400 text-base transition-all duration-300 ease-in-out
peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-stone-500 peer-placeholder-shown:dark:text-stone-400 peer-placeholder-shown:text-base
peer-focus:top-3 peer-focus:-translate-y-full peer-focus:text-xs peer-focus:text-amber-600 dark:peer-focus:text-amber-400"
>
Player ID or Email
</label>
</div>
<div class="relative">
<input
type="password"
id="password"
name="password"
placeholder=""
class="peer w-full px-4 py-3 rounded-xl bg-stone-200 dark:bg-stone-900 border border-transparent shadow-neu-inner-light dark:shadow-neu-inner-dark focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900 transition-all duration-300 text-stone-800 dark:text-stone-300 placeholder-transparent"
autocomplete="current-password"
/>
<label
for="password"
class="absolute left-4 top-1/2 -translate-y-1/2 text-stone-500 dark:text-stone-400 text-base transition-all duration-300 ease-in-out
peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-stone-500 peer-placeholder-shown:dark:text-stone-400 peer-placeholder-shown:text-base
peer-focus:top-3 peer-focus:-translate-y-full peer-focus:text-xs peer-focus:text-amber-600 dark:peer-focus:text-amber-400"
>
Password
</label>
</div>
<div class="flex items-center justify-between text-sm sm:text-base">
<div class="flex items-center">
<input
type="checkbox"
id="remember-me"
name="remember-me"
class="h-4 w-4 text-amber-600 dark:text-amber-500 rounded border-stone-300 dark:border-stone-700 bg-stone-300 dark:bg-stone-700 focus:ring-amber-500 dark:focus:ring-amber-600 mr-2 shadow-neu-inner-light dark:shadow-neu-inner-dark transform scale-90 checked:scale-100 transition-all duration-200 cursor-pointer"
/>
<label for="remember-me" class="text-stone-600 dark:text-stone-400 select-none">Remember me</label>
</div>
<a href="#" class="text-amber-600 dark:text-amber-500 hover:text-amber-700 dark:hover:text-amber-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900 rounded-md py-0.5 px-1 -mx-1 -my-0.5">Forgot Password?</a>
</div>
<button type="submit" class="w-full py-3 px-6 rounded-xl font-bold text-lg bg-amber-600 hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600 text-white shadow-lg shadow-amber-500/50 dark:shadow-amber-700/50 hover:shadow-xl hover:shadow-amber-600/60 dark:hover:shadow-amber-800/60 transition-all duration-300 transform active:scale-98 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900">
Login
</button>
</form>
<p class="mt-8 text-center text-stone-600 dark:text-stone-400 text-sm sm:text-base">
Don't have an account?
<a href="#" class="text-amber-600 dark:text-amber-500 hover:text-amber-700 dark:hover:text-amber-400 font-semibold transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900 rounded-md py-0.5 px-1 -mx-1 -my-0.5">Sign Up</a>
</p>
<!-- Decorative elements from Neumorphism principles -->
<div class="absolute -top-8 -left-8 w-24 h-24 rounded-full bg-stone-300 dark:bg-stone-800 shadow-xl opacity-30 blur-md group-hover:top-4 group-hover:left-4 transition-all duration-700 pointer-events-none"></div>
<div class="absolute -bottom-8 -right-8 w-32 h-32 rounded-full bg-amber-300 dark:bg-amber-800 shadow-xl opacity-20 blur-md group-hover:bottom-4 group-hover:right-4 transition-all duration-700 delay-100 pointer-events-none"></div>
</div>
</div>
<style>
/* Custom CSS for Neumorphism shadows */
.shadow-neu-light {
box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
}
.dark .shadow-neu-light {
box-shadow: none; /* Disable light shadow in dark mode */
}
.shadow-neu-dark {
box-shadow: none; /* Disable dark shadow in light mode */
}
.dark .shadow-neu-dark {
box-shadow: 6px 6px 12px #1c1c1c, -6px -6px 12px #2a2a2a;
}
.shadow-neu-inner-light {
box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
}
.dark .shadow-neu-inner-light {
box-shadow: none;
}
.shadow-neu-inner-dark {
box-shadow: none;
}
.dark .shadow-neu-inner-dark {
box-shadow: inset 5px 5px 10px #1c1c1c, inset -5px -5px 10px #2a2a2a;
}
/* Animated Label for input fields */
.group.relative input:placeholder-shown + label,
.peer:placeholder-shown + label {
top: 50%;
transform: translateY(-50%);
font-size: 1rem; /* Base size */
color: theme('colors.stone.500');
}
.dark .group.relative input:placeholder-shown + label,
.dark .peer:placeholder-shown + label {
color: theme('colors.stone.400');
}
.group.relative input:focus + label,
.peer:focus + label {
top: 0.75rem; /* 12px from top */
transform: translateY(-100%);
font-size: 0.75rem; /* text-xs */
color: theme('colors.amber.600');
}
.dark .group.relative input:focus + label,
.dark .peer:focus + label {
color: theme('colors.amber.400');
}
.peer:focus ~ .text-stone-500 {
color: theme('colors.amber.600'); /* Change label color on focus */
}
.dark .peer:focus ~ .text-stone-500 {
color: theme('colors.amber.400');
}
</style>Componenti correlati
Componente Social Login Neumorfismo
Componente Social Login con design del neumorfismo, effetti reattivi e supporto per temi scuri.
Componente Social Login
Componente di accesso social reattivo con microinterazioni - Incentrato su animazioni piccole e coinvolgenti che rispondono alle azioni dell'utente, combinazione di colori complementari, livello di complessità semplice, per scopi di blog/contenuti, con supporto per temi scuri.
Componente Social Login
Un semplice componente di accesso social con un design Skeuomorphic, toni della terra e un layout reattivo con supporto per la modalità oscura. Questo componente è adatto per blog o siti Web di consumo di contenuti, offrendo un'esperienza di accesso visivamente accattivante e facile da usare.