• Home
  • /
  • Modern Login & Signup Form with Tailwind CSS

Modern Login & Signup Form with Tailwind CSS

HTML

				
					<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Learn With Arshyan – Signup & Login</title>
  <template id="Ly3g80DZp1aH5i3kcLuV"></template>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
  <style>
    .form-section {
      min-height: 100%;
      transition: all 0.3s ease-in-out;
    }
  </style>
</head>
<body class="bg-gradient-to-tr from-indigo-100 via-pink-100 to-yellow-100 min-h-screen flex items-center justify-center p-6">

  <div class="bg-white shadow-2xl rounded-3xl max-w-4xl w-full h-[580px] grid grid-cols-1 md:grid-cols-2 overflow-hidden">

    
    <div class="bg-gradient-to-br from-indigo-500 to-purple-600 text-white flex flex-col justify-center items-center p-10 space-y-4">
      <h2 class="text-3xl font-bold text-center">Welcome to Learn With Arshyan</h2>
      <div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<template id="QYPwYq964A699xp7Sn1T"></template>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-2094722033678002"
     data-ad-slot="2248279416"></ins>
<script type="bv_inline_delayed_js" bv_unique_id="ug9ljFzEyLM0rksQVg1G" defer="1" data-cfasync="" bv_inline_delayed="1" async="">(adsbygoogle = window.adsbygoogle || []).push({});</script></div>
<p class="text-center">Build your coding future with free HTML, CSS, JavaScript & Python tutorials</p>
      <button id="toggleBtn" class="bg-white text-indigo-600 px-6 py-2 rounded-full font-semibold hover:bg-gray-200 transition">
        Switch to Signup
      </button>
    </div>

    
    <div class="relative p-8 bg-white h-full">
      
      <form id="signupForm" class="form-section absolute inset-0 space-y-6 px-6 py-8 overflow-y-auto hidden">
        <h3 class="text-2xl font-bold text-indigo-600 text-center">Create Account</h3>

        <div class="flex space-x-4 justify-center">
          <button type="button" class="flex items-center space-x-2 bg-white shadow px-4 py-2 border rounded-xl">
            <i class="fab fa-google text-red-500"></i>
            <span>Google</span>
          </button>
          <button type="button" class="flex items-center space-x-2 bg-white shadow px-4 py-2 border rounded-xl">
            <i class="fab fa-facebook text-blue-600"></i>
            <span>Facebook</span>
          </button>
        </div>

        <div class="flex items-center my-4">
          <div class="flex-grow h-px bg-gray-300"></div>
          <span class="px-3 text-gray-500 text-sm">or</span>
          <div class="flex-grow h-px bg-gray-300"></div>
        </div>

        <input type="text" placeholder="Full Name" class="w-full border rounded-xl px-4 py-3" required>
        <input type="email" placeholder="Email Address" class="w-full border rounded-xl px-4 py-3" required>
        <input type="password" placeholder="Password" class="w-full border rounded-xl px-4 py-3" required>
        <button type="submit" class="w-full bg-indigo-600 text-white py-3 rounded-xl font-semibold hover:bg-indigo-700 transition">
          Sign Up
        </button>
      </form>

      
      <form id="loginForm" class="form-section absolute inset-0 space-y-6 px-6 py-8 overflow-y-auto">
        <h3 class="text-2xl font-bold text-indigo-600 text-center">Login to Your Account</h3>

        <div class="flex space-x-4 justify-center">
          <button type="button" class="flex items-center space-x-2 bg-white shadow px-4 py-2 border rounded-xl">
            <i class="fab fa-google text-red-500"></i>
            <span>Google</span>
          </button>
          <button type="button" class="flex items-center space-x-2 bg-white shadow px-4 py-2 border rounded-xl">
            <i class="fab fa-facebook text-blue-600"></i>
            <span>Facebook</span>
          </button>
        </div>

        <div class="flex items-center my-4">
          <div class="flex-grow h-px bg-gray-300"></div>
          <span class="px-3 text-gray-500 text-sm">or</span>
          <div class="flex-grow h-px bg-gray-300"></div>
        </div>

        <input type="email" placeholder="Email Address" class="w-full border rounded-xl px-4 py-3" required>
        <input type="password" placeholder="Password" class="w-full border rounded-xl px-4 py-3" required>
        <button type="submit" class="w-full bg-indigo-600 text-white py-3 rounded-xl font-semibold hover:bg-indigo-700 transition">
          Login
        </button>
      </form>
    </div>
  </div>

  <script type="bv_inline_delayed_js" bv_unique_id="4bOQX0MjFRejDB14A2S9" defer="1" data-cfasync="" async="">const toggleBtn = document.getElementById("toggleBtn");
    const signupForm = document.getElementById("signupForm");
    const loginForm = document.getElementById("loginForm");

    toggleBtn.addEventListener("click", () => {
      signupForm.classList.toggle("hidden");
      loginForm.classList.toggle("hidden");
      toggleBtn.textContent = signupForm.classList.contains("hidden") ? "Switch to Signup" : "Switch to Login";
    });</script>

</body>
</html>

				
			

Share this post

1 Comment

  1. There is a gentle consistency in the rhythm of your sentences. They move with deliberate calm, creating a balance between clarity, depth, and meditative resonance.

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to Top