Neumorphic_Gaming_Social_Login_Component
어스 톤의 뉴모픽 스타일의 복잡하고 반응이 빠른 소셜 로그인 구성 요소로, 게임 웹 사이트용으로 설계되었습니다. 다양한 로그인 옵션과 다크 모드 지원이 포함됩니다.
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>관련 구성 요소
소셜 로그인 구성 요소
그레이스케일의 Glassmorphism 스타일의 소셜 로그인 구성 요소로, 전자 상거래 사이트에 적합한 다크 모드를 지원합니다. 디자인은 반응형이며 젖빛 유리 효과와 흐림을 포함합니다. JavaScript는 포함되어 있지 않습니다.
소셜 로그인 구성 요소
마켓플레이스를 위한 복잡한 소셜 로그인 구성 요소로, 소셜 로그인 버튼, 이메일/비밀번호 필드, '비밀번호 찾기'/'가입' 링크를 제공합니다. 보석 톤, 완전한 반응성 및 다크 모드 지원을 사용하는 Material Design 원칙에 따라 설계되었습니다.