Home
QQ-VVN
Login form #1

Login form #1

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

130

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-gradient-to-br from-gray-900 to-black p-4">
  <div class="w-full max-w-md backdrop-blur-xl bg-white/10 rounded-2xl overflow-hidden shadow-xl">
    <div class="p-8">
      <div class="text-center mb-8">
        <h2 class="text-3xl font-bold text-white mb-2">Hoş Geldiniz</h2>
        <p class="text-gray-300">Hesabınıza giriş yapın</p>
      </div>
      
      <form class="space-y-6">
        <div class="space-y-2">
          <label class="text-sm font-medium text-gray-300 block">E-posta</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
                <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
              </svg>
            </div>
            <input type="email" class="bg-gray-800/50 border border-gray-700 text-white placeholder-gray-400 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-3" placeholder="ornek@mail.com" required>
          </div>
        </div>
        
        <div class="space-y-2">
          <label class="text-sm font-medium text-gray-300 block">Şifre</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
              </svg>
            </div>
            <input type="password" class="bg-gray-800/50 border border-gray-700 text-white placeholder-gray-400 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-3" placeholder="••••••••" required>
          </div>
        </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-blue-600 focus:ring-blue-500 border-gray-600 rounded bg-gray-700">
            <label for="remember-me" class="ml-2 block text-sm text-gray-300">Beni hatırla</label>
          </div>
          <a href="#" class="text-sm font-medium text-blue-400 hover:text-blue-300">Şifremi unuttum</a>
        </div>
        
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
          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-600"></div>
          </div>
          <div class="relative flex justify-center text-sm">
            <span class="px-2 bg-gray-800/50 text-gray-400">veya şununla devam et</span>
          </div>
        </div>
        
        <div class="mt-6 grid grid-cols-3 gap-3">
          <button class="w-full flex items-center justify-center py-2 px-4 border border-gray-700 rounded-lg shadow-sm bg-gray-800 hover:bg-gray-700 transition-colors duration-300">
            <svg class="h-5 w-5 text-blue-500" 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="w-full flex items-center justify-center py-2 px-4 border border-gray-700 rounded-lg shadow-sm bg-gray-800 hover:bg-gray-700 transition-colors duration-300">
            <svg class="h-5 w-5 text-blue-400" fill="currentColor" viewBox="0 0 24 24">
              <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723 10.054 10.054 0 01-3.127 1.184 4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
            </svg>
          </button>
          <button class="w-full flex items-center justify-center py-2 px-4 border border-gray-700 rounded-lg shadow-sm bg-gray-800 hover:bg-gray-700 transition-colors duration-300">
            <svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 24 24">
              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/>
            </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-blue-400 hover:text-blue-300">Hemen kaydolun</a>
      </p>
    </div>
  </div>
</div>

</div>

Related Examples

Allconnect Logic

Author:
Mario Williams

2 days ago

10
Login Form

Author:
UI-Templates

1 month ago

164
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

8 months ago

837
Sign in From Phone number
do login with phone number and password

Author:
Kedar Ghimire

2 weeks ago

131
Simple Sign-up Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Author:
Anja Müller

2 years ago

10.6k
Login Form
Admin Login Form

Author:
Khalid

1 year ago

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

Author:
Jerome Soriano

1 year ago

1.7k
login page
modern login form by salvator

Author:
Baraka Salvator

6 months ago

390
Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Author:
Ameth Galarcio

1 year ago

2.5k
beautifull Authentication Page
I create a Authentication page using cloude ai model.

Author:
Akram Khan

1 year ago

2.1k
Sign up
sign up page

Author:
gidy

6 months ago

1.1k
Simple Sign-In Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Author:
Anja Müller

2 years ago

7.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components