Home
QQ-VVN
Neon login Form #3

Neon login Form #3

This tailwind example is contributed by QQ-VVN, on 11-May-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Register, Sign in

Author QQ-VVN

370

Fork Fullscreen

<div class="bg-white dark:bg-gray-800 flex justify-center items-center w-screen h-screen p-5">
  <div class="min-h-screen flex items-center justify-center bg-black p-4">
  <div class="w-full max-w-md">
    <div class="text-center mb-10">
      <div class="inline-block p-4 bg-black border border-pink-500 rounded-full mb-4 shadow-lg shadow-pink-500/20">
        <svg class="w-10 h-10 text-pink-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
        </svg>
      </div>
      <h2 class="text-4xl font-bold text-white mb-2 text-shadow-neon">NEON LOGIN</h2>
      <p class="text-pink-400">Hesabınıza giriş yapın</p>
    </div>
    
    <div class="bg-gray-900 border border-gray-800 rounded-xl shadow-2xl shadow-pink-500/10 overflow-hidden">
      <div class="p-8">
        <form class="space-y-6">
          <div>
            <label for="email" class="block text-sm font-medium text-gray-400 mb-2">E-posta</label>
            <input type="email" id="email" name="email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-500/50 transition-all duration-300" placeholder="ornek@mail.com">
          </div>
          
          <div>
            <label for="password" class="block text-sm font-medium text-gray-400 mb-2">Şifre</label>
            <input type="password" id="password" name="password" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-500/50 transition-all duration-300" placeholder="••••••••">
          </div>
          
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-pink-500 focus:ring-pink-500 border-gray-700 rounded bg-gray-800">
              <label for="remember-me" class="ml-2 block text-sm text-gray-400">Beni hatırla</label>
            </div>
            <a href="#" class="text-sm font-medium text-pink-400 hover:text-pink-300 transition-colors duration-300">Şifremi unuttum</a>
          </div>
          
          <button type="submit" class="w-full py-3 px-4 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white font-medium rounded-lg shadow-lg shadow-pink-500/30 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 focus:ring-offset-gray-900 transition-all duration-300">
            Giriş Yap
          </button>
        </form>
        
        <div class="mt-6">
          <div class="relative">
            <div class="absolute inset-0 flex items-center">
              <div class="w-full border-t border-gray-700"></div>
            </div>
            <div class="relative flex justify-center text-sm">
              <span class="px-2 bg-gray-900 text-gray-400">veya şununla devam et</span>
            </div>
          </div>
          
          <div class="mt-6 grid grid-cols-3 gap-3">
            <button class="flex justify-center items-center py-2 px-4 bg-gray-800 hover:bg-gray-700 text-white rounded-lg border border-gray-700 transition-colors duration-300">
              <svg class="h-5 w-5 text-blue-400" fill="currentColor" viewBox="0 0 24 24">
                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
              </svg>
            </button>
            <button class="flex justify-center items-center py-2 px-4 bg-gray-800 hover:bg-gray-700 text-white rounded-lg border border-gray-700 transition-colors duration-300">
              <svg class="h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"/>
              </svg>
            </button>
            <button class="flex justify-center items-center py-2 px-4 bg-gray-800 hover:bg-gray-700 text-white rounded-lg border border-gray-700 transition-colors duration-300">
              <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 0C5.373 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.6.113.793-.261.793-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.386-1.332-1.755-1.332-1.755-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.605-.015 2.895-.015 3.285 0 .315.18.69.8.57C20.565 21.795 24 17.295 24 12c0-6.627-5.373-12-12-12z"/>
              </svg>
            </button>
          </div>
        </div>
        
        <p class="mt-8 text-center text-sm text-gray-400">
          Hesabınız yok mu?
          <a href="#" class="font-medium text-pink-400 hover:text-pink-300 transition-colors duration-300">Hemen kaydolun</a>
        </p>
      </div>
    </div>
  </div>
</div>

</div>

Related Examples

Login Form - Agendamiento

Author:
Jhonatan Llamuca

9 months ago

1.2k
cards
html , css ,

Author:
Hacker Development

5 months ago

595
Authentication
Tailwind CSS Authentication Beautifully designed, fully responsive, expertly crafted authentication examples

Author:
Aman kumar

6 months ago

715
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

1 year ago

3.2k
login from with fingerprint

Author:
Tanvir Hasan Bappy (Tanvir)

8 months ago

1.2k
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

9 months ago

917
Loginform
Animated Login Form with Google Sign-In (Tailwind CSS)

Author:
ishimwe prince

5 months ago

394
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

5 months ago

460
FacePass: Animated Image Authentication
"Where your image becomes your key" "Biometric meets beautiful animations" "A login experience that recognizes you – literally" "Security through personalized visual authentication" "Your face, animated, authenticated"

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

964
Sign in form
includes Google login button

Author:
Paul Intay

1 year ago

2.8k
Auth Page with TailwindCSS and AlpineJS

Author:
ariaw

6 months ago

476
Authentication form
Use this example to authenticate users with a login form using a phone number instead of an email address.

Author:
Md. Tofayel islam

1 year ago

2.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components