아트데코오트컴포넌트
아르데코(Art Deco)에서 영감을 받은 헬스케어/의료 애플리케이션을 위한 인증 구성 요소로, 기하학적 패턴, 고대비 색상, 다크 모드 지원을 통한 완전한 응답성을 특징으로 합니다. 로그인 또는 등록 양식에 적합합니다.
HTML 코드
<div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-800 font-sans">
<div class="max-w-md w-full bg-white dark:bg-gray-800 shadow-2xl rounded-lg overflow-hidden border-t-8 border-b-8 border-teal-500 dark:border-teal-700 transform transition-all duration-300 scale-95 md:scale-100 ease-in-out hover:shadow-3xl hover:scale-100">
<div class="p-8 pb-0 text-center">
<svg class="mx-auto h-16 w-16 text-teal-600 dark:text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.001 12.001 0 002.92 12c0 3.072 1.354 5.961 3.75 8.016A12.001 12.001 0 0012 21c3.072 0 5.961-1.354 8.016-3.75A12.001 12.001 0 0021.08 12c0-3.072-1.354-5.961-3.75-8.016z" />
</svg>
<h2 class="mt-4 text-3xl font-extrabold text-gray-900 dark:text-white tracking-wider uppercase leading-tight font-serif">
<span class="text-teal-600 dark:text-teal-500">Pharma</span>Login
</h2>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
Your health, simplified.
</p>
</div>
<div class="p-8 pt-6">
<form class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
<div class="mt-1 relative rounded-md shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
</svg>
</div>
<input id="email" name="email" type="email" autocomplete="email" required class="block w-full py-3 pl-10 pr-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400" placeholder="[email protected]">
</div>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<div class="mt-1 relative rounded-md shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2h2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2h2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
</svg>
</div>
<input id="password" name="password" type="password" autocomplete="current-password" required class="block w-full py-3 pl-10 pr-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400" placeholder="••••••••">
</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-teal-600 dark:text-teal-500 focus:ring-teal-500 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600">
<label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
Remember me
</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-teal-600 dark:text-teal-500 hover:text-teal-500 dark:hover:text-teal-400 hover:underline">
Forgot your password?
</a>
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-bold text-white bg-teal-600 hover:bg-teal-700 dark:bg-teal-700 dark:hover:bg-teal-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 uppercase tracking-widest transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
Sign In
</button>
</div>
</form>
<div class="mt-6 text-center">
<p class="text-sm text-gray-600 dark:text-gray-400">
Don't have an account?
<a href="#" class="font-medium text-teal-600 dark:text-teal-500 hover:text-teal-500 dark:hover:text-teal-400 hover:underline">
Sign Up for free
</a>
</p>
</div>
</div>
<div class="relative bg-gradient-to-r from-teal-500 to-teal-700 dark:from-teal-700 dark:to-teal-900 h-16 flex items-center justify-center">
<div class="absolute w-full h-full opacity-10 dark:opacity-20" style="background-image: url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23000\' fill-opacity=\'0.05\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6zm30 30v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zm0 4v-4H4v4H0v2h4v4h2v-4h4v-2H6zM42 0h-2v4h-4v2h4v4h2V6h4V4h-4zM24 6v4h-4v-4h-4V0h4v4h4V0h4v4h4V0h-4v6h-4zm0-6V0h-2v4h-4v2h4v4h2V6h4V4h-4zM0 6h4V0h-4v6zM42 6h4V0h-4v6zM0 42h4V36H0v6zM42 42h4V36h-4v6zM24 42h4V36h-4v6zM6 42h4V36H6v6zM36 42h4V36h-4v6zM48 6h4V0h-4v6zM54 0h-2v4h-4v2h4v4h2V6h4V4h-4zM54 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM48 42h4V36h-4v6zM54 42h4V36h-4v6zM48 36h4v6h-4v-6zM36 0h4V6h-4V0zM60 0h-4v6h4V0zM60 36h-4v6h4V36zM36 36h4v6h-4v-6zM6 0h4V6H6V0zM6 36h4v6H6v-6zM24 0h4V6h-4V0zM24 36h4V42h-4V36zM30 6h4V0h-4v6zM30 36h4V42h-4V36zM18 0h4V6h-4V0zM18 36h4V42h-4V36zM12 0h4V6h-4V0zM12 36h4V42h-4V36z%27/%3E%3C/g%3E%3C/svg%3E'); display: block;"></div>
<p class="relative z-10 text-xs text-white uppercase tracking-widest">
Secure & Compliant Access
</p>
</div>
</div>
</div>