로그인 양식 구성 요소
파스텔 색상, 반응형 및 다크 모드를 지원하는 소셜 미디어용 스큐어모픽 로그인 양식. 이 양식은 입력과 버튼에 미묘한 3D 효과를 주어 물리적 요소를 모방합니다. 그림자와 그라디언트는 스큐어모픽 느낌을 향상시키는 데 사용됩니다. 입력에는 부드러운 삽입 그림자가 있고 버튼은 돌출되어 클릭할 수 있는 모양입니다. 파스텔 색 구성표는 어두운 모드에서 더 어둡고 음소거된 버전으로 부드럽게 전환되어 가독성과 시각적 편안함을 유지합니다. 반응형 디자인은 여러 장치에서 사용성을 보장합니다.
HTML 코드
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-200 via-purple-200 to-pink-200 dark:from-gray-800 dark:via-gray-900 dark:to-black p-4">
<div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-2xl w-full max-w-md
transform transition-all duration-300 ease-in-out
hover:shadow-3xl hover:-translate-y-1
ring-4 ring-indigo-300/50 dark:ring-gray-600/50
relative overflow-hidden">
<!-- Skeuomorphic "Glass" Effect Overlay -->
<div class="absolute inset-0 bg-white/20 dark:bg-gray-800/20 backdrop-blur-sm rounded-xl
transform -rotate-3 translate-x-2 translate-y-2 opacity-0 group-hover:opacity-100 transition duration-500 ease-in-out"></div>
<h2 class="text-3xl font-extrabold text-gray-800 dark:text-white text-center mb-8
drop-shadow-lg [text-shadow:0px_2px_4px_var(--tw-shadow-color)] shadow-indigo-300/50 dark:shadow-purple-400/30">
Welcome Back!
</h2>
<form class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2
[text-shadow:0px_1px_2px_var(--tw-shadow-color)] shadow-white/50 dark:shadow-gray-900/50">
Email
</label>
<div class="relative">
<input type="email" id="email" name="email" autocomplete="email"
class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-inner-lg
bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100
focus:ring-2 focus:ring-indigo-400 focus:border-transparent
transition duration-200 ease-in-out
[box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.06),0px_1px_0px_rgba(255,255,255,0.8)]
dark:[box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.6),0px_1px_0px_rgba(255,255,255,0.05)]"
placeholder="[email protected]">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20">
<path d="M2.003 5.884L10 10.49l7.997-4.606A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
<path d="M18 8.118l-8 4.615-8-4.615V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
</svg>
</div>
</div>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2
[text-shadow:0px_1px_2px_var(--tw-shadow-color)] shadow-white/50 dark:shadow-gray-900/50">
Password
</label>
<div class="relative">
<input type="password" id="password" name="password" autocomplete="current-password"
class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-inner-lg
bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100
focus:ring-2 focus:ring-indigo-400 focus:border-transparent
transition duration-200 ease-in-out
[box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.06),0px_1px_0px_rgba(255,255,255,0.8)]
dark:[box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.6),0px_1px_0px_rgba(255,255,255,0.05)]"
placeholder="••••••••">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 2a5 5 0 00-5 5v2a2 2 0 00-2 2v5a2 2 0 002 2h10a2 2 0 002-2v-5a2 2 0 00-2-2H7V7a3 3 0 016 0v2h-2V7a1 1 0 00-1-1zm-4 8h8v7H6v-7z"></path>
</svg>
</div>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox"
class="h-4 w-4 text-indigo-600 dark:text-indigo-400 rounded
focus:ring-indigo-500 dark:focus:ring-indigo-300
ring-offset-white dark:ring-offset-gray-700
border-gray-300 dark:border-gray-600
cursor-pointer
[box-shadow:0px_1px_2px_rgba(0,0,0,0.1)] dark:[box-shadow:0px_1px_2px_rgba(0,0,0,0.4)]">
<label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-200
[text-shadow:0px_1px_1px_var(--tw-shadow-color)] shadow-white/50 dark:shadow-gray-900/50">
Remember me
</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300
[text-shadow:0px_1px_1px_var(--tw-shadow-color)] shadow-indigo-300/50 dark:shadow-purple-400/30">
Forgot your password?
</a>
</div>
</div>
<div>
<button type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg
text-lg font-semibold text-white
bg-gradient-to-r from-indigo-500 to-purple-500
hover:from-indigo-600 hover:to-purple-600
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-gray-300
transition duration-200 ease-in-out
transform active:scale-98 active:shadow-md
[box-shadow:0px_4px_8px_rgba(0,0,0,0.2),inset_0px_1px_0px_rgba(255,255,255,0.4)]
dark:[box-shadow:0px_4px_8px_rgba(0,0,0,0.6),inset_0px_1px_0px_rgba(255,255,255,0.1)]">
Sign In
</button>
</div>
</form>
<div class="mt-6 text-center">
<p class="text-sm text-gray-600 dark:text-gray-300">
Don't have an account?
<a href="#" class="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300
[text-shadow:0px_1px_1px_var(--tw-shadow-color)] shadow-indigo-300/50 dark:shadow-purple-400/30">
Sign Up
</a>
</p>
</div>
</div>
</div>관련 구성 요소
유기적 로그인 양식 구성 요소
자연에서 영감을 받은 유기적인 디자인 스타일과 차분한 색 구성표를 갖춘 복잡하고 반응이 빠른 로그인 양식 구성 요소로 음악/오디오 플랫폼에 적합합니다. 다크 모드 지원이 포함됩니다.
로그인 양식 구성 요소
블로그 또는 콘텐츠 사이트에 적합한 미니멀리스트/플랫 디자인의 반응형의 복잡한 로그인 양식입니다. 단색 색 구성표, 어두운 테마 지원 및 HTML 및 Tailwind CSS로만 순전히 구현된 여러 대화형 요소가 특징입니다.