Skeuomorphic Registration Form
Skeuomorphic registration form with monochromatic color scheme, designed for business/corporate use with dark mode support and responsiveness using Tailwind CSS. No JavaScript.
HTML Code
<div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8 flex items-center justify-center">
<div class="bg-white dark:bg-gray-700 p-10 rounded-lg shadow-xl w-full max-w-md border-t-8 border-gray-400 dark:border-gray-600 transform skew-y-2">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center transform -skew-y-2">Create Account</h2>
<form class="transform -skew-y-2">
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform skew-y-2" for="name">
Full Name
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:border-gray-500 transform skew-y-2" id="name" type="text" placeholder="John Doe">
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform skew-y-2" for="email">
Email Address
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:border-gray-500 transform skew-y-2" id="email" type="email" placeholder="[email protected]">
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform skew-y-2" for="password">
Password
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:border-gray-500 transform skew-y-2" id="password" type="password" placeholder="********">
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform skew-y-2" for="confirm-password">
Confirm Password
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:border-gray-500 transform skew-y-2" id="confirm-password" type="password" placeholder="********">
</div>
<div class="flex items-center justify-between transform skew-y-2">
<button class="bg-gray-600 dark:bg-gray-500 hover:bg-gray-700 dark:hover:bg-gray-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transform -skew-y-2" type="button">
Register
</button>
<a class="inline-block align-baseline font-bold text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 transform -skew-y-2" href="#">
Already have an account?
</a>
</div>
</form>
</div>
</div>Related Components
Registration Form Component
A minimalist and responsive Registration Form Component designed with Tailwind CSS, supporting dark mode and featuring clean spaces with minimal elements.
Registration Form Component
A minimalist flat design registration form with responsive effects and dark theme support, using Tailwind CSS.
Registration Form Component
A responsive registration form component with a glassmorphism style, earth tone color scheme, and dark theme support. Designed for social media platforms, with a simple layout and minimal elements. Uses Tailwind CSS for styling and includes example image placeholders.