Home
Anonymous
Full page sign-In form

Full page sign-In form

This tailwind example is contributed by Anonymous, on 06-Feb-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 Anonymous

2.2k

Fork Fullscreen

<div class="bg-green-100 dark:bg-gray-800 h-screen">
  <div class="container mx-auto px-6 py-8">
    <h2 class="text-4xl font-bold text-center text-green-800 dark:text-white mb-8">Welcome to Our Website!</h2>
    <div class="flex flex-wrap items-center">
      <div class="w-full md:w-1/2">
        <h3 class="text-2xl text-green-800 dark:text-white font-bold">Stay connected with us!</h3>
        <p class="text-green-600 dark:text-gray-400 mt-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus quia molestias delectus reprehenderit sequi iste ut, quod alias. Consequuntur, quis?</p>
      </div>
      <div class="w-full md:w-1/2 mt-8 md:mt-0">
        <form action="#" class="bg-white dark:bg-gray-900 rounded shadow-md px-8 pt-6 pb-8 mb-4">
          <div class="mb-4">
            <label class="block text-green-700 dark:text-gray-200 text-sm font-bold mb-2" for="username">Username</label>
            <input class="shadow appearance-none border border-green-500 dark:border-gray-700 rounded w-full py-2 px-3 text-green-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
          </div>
          <div class="mb-6">
            <label class="block text-green-700 dark:text-gray-200 text-sm font-bold mb-2" for="password">Password</label>
            <input class="shadow appearance-none border border-green-500 dark:border-gray-700 rounded w-full py-2 px-3 text-green-700 dark:text-gray-200 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
          </div>
          <div class="flex items-center justify-between">
            <button class="bg-green-500 hover:bg-green-700 dark:bg-gray-700 dark:hover:bg-gray-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">Sign In</button>
            <a class="inline-block align-baseline font-bold text-sm text-green-500 hover:text-green-800 dark:text-gray-200 dark:hover:text-gray-400" href="#">Forgot Password?</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Related Examples

Simple Login Form
Username and Password inputs with Login button. Very simple. You might like it.

Author:
Jerome Soriano

3 months ago

555
Sign In page CezeriLab

Author:
Sedat Kumcu

2 months ago

344
Modern and Fully Responsive Login Form with Social Media Authentication and Floating Label Inputs
This sleek, fully responsive login form is designed with usability and aesthetics in mind. It features a clean, minimalistic design with smooth transitions and modern UI elements. The form includes: Email and Password Inputs: Both fields feature floating labels that animate seamlessly when focused or filled, ensuring a visually appealing user experience. Input validation is built-in, and placeholders are hidden for a clean look. Social Media Login Buttons: Integrated Google and Facebook sign-in buttons, allowing users to authenticate easily using their social media accounts. These buttons are styled to match the platform’s branding and include an intuitive hover effect to enhance interactivity. “Forgot Password?” & “Remember Me” Options: The form allows users to easily reset their password or opt to remain logged in. These options are aligned neatly, and the labels are clear and concise for accessibility. Custom Styling: Built with Tailwind CSS, ensuring a responsive, mobile-first design that adapts seamlessly to any screen size. The form's design utilizes smooth hover effects, rounded corners, subtle shadow effects, and modern color schemes for an enhanced visual appeal. Easy Integration: This component can be easily integrated into any web application. Whether you're building a dashboard, a website, or a SaaS product, this login form is a perfect fit for any modern application that needs secure user authentication. Features: Fully responsive: Looks great on mobile, tablet, and desktop. Floating labels: Clear input fields with animated labels that enhance the user interface. Social Media Integration: Includes Google and Facebook login options for quick authentication. Password Reset: A "Forgot Password?" link allows for easy password recovery. Remember Me: A checkbox for staying logged in. Customizable Design: Built using Tailwind CSS, easy to adapt to match any branding. Smooth Interactivity: Subtle hover effects and animations for a modern user experience. This login form not only provides the essential features needed for user authentication but also elevates the user experience with its modern design and smooth animations.

Author:
Jay Dee

1 week ago

35
Register Form
This is a simple Register Form component with dark mode supported and mobile responsive

Author:
Shariar Hasan

10 months ago

2k
Login page

Author:
Reuben Enahoro

1 month ago

323
Sign Up form with dark mode support

Author:
Anonymous

1 year ago

10k
Login Form
Admin Login Form

Author:
Khalid

10 months ago

1.5k
Extreme Signup Page
I create a signup page using html, tailwindcss and font awesome icons using cdn.

Author:
Akram Khan

6 months ago

1.2k
Login
Login Creen office

Author:
Rushikesh Latpate

4 weeks ago

197
Login form
responsive login page design

Author:
Aman kumar

11 months ago

3.5k
Login form with blured background image

Author:
Noah Schmidt

2 years ago

13.5k
Simple login page template

Author:
Freja Jensen

1 year ago

11.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components