미니멀리스트 양식 구성 요소
포트폴리오에 맞게 조정된 미니멀리스트 양식 구성 요소로, 파스텔 색상 구성표, 단순한 레이아웃, 반응형 디자인 및 Tailwind CSS를 사용한 다크 모드 지원을 특징으로 합니다.
HTML 코드
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-100 to-purple-100 dark:from-gray-800 dark:to-gray-900 p-6">
<div class="max-w-md w-full bg-white dark:bg-gray-700 rounded-lg shadow-xl p-8">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Get in Touch</h2>
<form>
<div class="mb-4">
<label for="name" class="block text-gray-700 dark:text-gray-200 text-sm font-medium mb-2">Name</label>
<input type="text" id="name" name="name" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-600 text-gray-900 dark:text-white">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 dark:text-gray-200 text-sm font-medium mb-2">Email</label>
<input type="email" id="email" name="email" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-600 text-gray-900 dark:text-white">
</div>
<div class="mb-6">
<label for="message" class="block text-gray-700 dark:text-gray-200 text-sm font-medium mb-2">Message</label>
<textarea id="message" name="message" rows="4" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-600 text-gray-900 dark:text-white"></textarea>
</div>
<button type="submit" class="w-full bg-blue-400 dark:bg-blue-700 text-white py-2 px-4 rounded-md hover:bg-blue-500 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 transition duration-200">Send Message</button>
</form>
</div>
</div>