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

353

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

authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

1 year ago

2.5k
Sign in form

Author:
Simon Scheffer

2 years ago

15.7k
Modern Login Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

Author:
Anonymous

1 year ago

2.6k
Sign in / Login Form

Author:
Bunny

3 years ago

13.4k
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

2 months ago

532
Sign Up form with dark mode support

Author:
Anonymous

1 year ago

11.6k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Author:
Bunny

3 years ago

49.4k
Welcome Back

Author:
Tanvir Islam

7 months ago

998
Login page
Login and register page, you can reuse both

Author:
Abhiraj

7 months ago

1.4k
Modern Sign Up Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

Author:
Ari Mustofa

1 year ago

2.3k
Travel Guru - User Login Page
A clean and responsive login page designed with TailwindCSS for the Travel Guru platform. This component provides users with a secure and simple way to sign in using their username or email and password, with additional options for remembering login credentials and password recovery. It also supports social logins via Facebook and Google for a faster authentication experience. The design focuses on a minimal and modern user interface with clear call-to-actions and seamless user flow.

Author:
SHARIFUL ISLAM

6 months ago

740
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.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components