Home
Paul Intay
Quick Signup Form

Quick Signup Form

This tailwind example is contributed by Paul Intay, on 07-Mar-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Register, Sign in

Author Paul Intay

1.4k

Fork Fullscreen

<div class="bg-black border-t-[1px] bg-gray-900 lg:mt-9 p-9">
    <div class="max-w-[500px] m-auto my-9">
        <h1 class="text-white font-bold text-center text-5xl mb-9">Experience the Power of <span class="text-orange-600">D54</span></h1>
        <div class="space-y-4">
            <input class="block w-full disabled:cursor-not-allowed disabled:opacity-50 p-3 focus:border-orange-500 focus:ring-orange-500 dark:focus:border-orange-500 dark:focus:ring-orange-500 bg-gray-50 text-gray-900 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 border-gray-300 dark:border-gray-600 sm:text-base rounded-lg" required="" placeholder="Your name" type="text">
            
            <input class="block w-full disabled:cursor-not-allowed disabled:opacity-50 p-3 focus:border-orange-500 focus:ring-orange-500 dark:focus:border-orange-500 dark:focus:ring-orange-500 bg-gray-50 text-gray-900 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 border-gray-300 dark:border-gray-600 sm:text-base rounded-lg" placeholder="Your email" type="email">
            
            <button type="button" class="focus:ring-4 focus:outline-none inline-flex items-center justify-center px-6 py-3 text-base font-medium text-white bg-orange-700 hover:bg-orange-800 dark:bg-orange-600 dark:hover:bg-orange-700 focus:ring-orange-300 dark:focus:ring-orange-800 rounded-lg w-full">
                Sign Up for Beta Access
            </button>
        </div>
    </div>
</div>

Related Examples

Beautiful sign in form
form with continue with google and continue with github buttons

Author:
Anonymous

10 months ago

3.6k
Login Card

Author:
Anonymous

1 year ago

5.2k
Login popup
with social media login buttons

Author:
Nikolai

9 months ago

2k
Login Form
Login Form

Author:
Md. Tofayel islam

3 months ago

519
Login Form

Author:
Amit Pachange

2 years ago

10.6k
Login form with blured background image

Author:
Noah Schmidt

1 year ago

13.3k
Login Form
Color Updates: - Changed background to gradient `from-indigo-800 to-blue-900` - Updated text colors to match the new theme - Updated button and interactive element colors - Added dark mode color variants Enhanced Styling: - Added gradient background - Increased padding and spacing - Improved border radius to `rounded-xl` - Added hover scale effects - Enhanced shadow with `shadow-2xl` Added Animations: - Fade-in animation on load - Scale transition on card hover - Button ripple effect on click - Smooth transitions for all interactive elements Improved Dark Mode: - Enhanced dark mode colors - Added system preference detection - Improved dark mode contrast - Added dark mode specific focus rings Enhanced Functionality: - Added basic form validation - Added ripple effect on button click - Improved hover and focus states - Added transition animations Accessibility Improvements: - Maintained proper contrast ratios - Enhanced focus states - Added proper ARIA attributes - Improved form labels

Author:
nejaa badr

1 month ago

555
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Author:
Anonymous

6 months ago

1.8k
LoginModal

Author:
Rohan Babu

10 months ago

2.1k
Sign In page with google/facebook/twitter buttons

Author:
Orion.c

1 year ago

18.6k
Login with social media buttons

Author:
TailwindFlex

2 years ago

12.1k
Responsive registration form
form with social login buttons

Author:
Anonymous

1 year ago

21.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components