These 50+ Instagram login page variations demonstrate the flexibility of Tailwind CSS in crafting visually distinct and functionally sound login experiences. From bold, brand-inspired designs to movie-themed interfaces and minimalist layouts, these variations serve as a rich playground for creative web development. This collection offers valuable insights into how design choices — from typography and color palettes to form elements and user experience — can transform a standard login page into an immersive, on-brand experience.
<div class="flex flex-col md:flex-row justify-center items-center min-h-screen bg-gray-50">
<!-- Login Form -->
<div class="flex flex-col items-center bg-white p-8 border border-gray-300 rounded-md shadow-sm">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-12 mb-6" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-4">
<input type="text" placeholder="Phone number, username, or email" class="px-4 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
<input type="password" placeholder="Password" class="px-4 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
<button type="submit" class="bg-blue-500 text-white font-semibold py-2 rounded hover:bg-blue-600">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-blue-500 hover:underline">Forgotten your password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-gray-300">
<span class="px-2 text-gray-500">OR</span>
<hr class="w-full border-t border-gray-300">
</div>
<p class="mt-4 text-sm mx-auto">Don't have an account? <a href="#" class="text-blue-500 font-semibold">Sign up</a></p>
<p class="mt-4 text-xs text-gray-500 mx-auto">Get the app.</p>
</form>
</div>
</div>
<div class="flex flex-col lg:flex-row justify-center items-center min-h-screen bg-blue-50">
<!-- Login Form -->
<div class="flex flex-col items-center bg-white p-10 border border-blue-300 rounded-lg shadow-lg">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-12 mb-6" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-4">
<input type="text" placeholder="Phone number, username, or email" class="px-4 py-2 border border-blue-300 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
<input type="password" placeholder="Password" class="px-4 py-2 border border-blue-300 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
<button type="submit" class="bg-blue-500 text-white font-semibold py-2 rounded hover:bg-blue-600">Log in</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-blue-500 hover:underline">Forgotten your password?</a>
</div>
<div class="flex items-center justify-between my-4">
</div>
</form>
</div>
</div><div class="flex flex-cols-1 md:grid-cols-2 justify-center gap-6 items-center min-h-screen bg-gray-100">
<!-- Login Form -->
<div class="flex flex-col items-center bg-white p-12 border border-gray-400 rounded-lg shadow-md">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-12 mb-6" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-4">
<input type="text" placeholder="Phone number, username, or email" class="px-4 py-2 border border-gray-400 rounded focus:ring-2 focus:ring-gray-500 focus:outline-none">
<input type="password" placeholder="Password" class="px-4 py-2 border border-gray-400 rounded focus:ring-2 focus:ring-gray-500 focus:outline-none">
<button type="submit" class="bg-gray-600 text-white font-semibold py-2 rounded hover:bg-gray-700">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-gray-600 hover:underline">Forgotten your password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-gray-400">
<span class="px-2 text-gray-500">OR</span>
<hr class="w-full border-t border-gray-400">
</div>
<button class="flex items-center justify-center w-full py-2 border border-gray-400 rounded-md">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-4 text-sm">Don't have an account? <a href="#" class="text-gray-600 font-semibold">Sign up</a></p>
<p class="mt-4 text-xs text-gray-500">Get the app.</p>
</div>
</div><div class="flex flex-cols-1 items-center justify-center min-h-screen bg-yellow-100">
<!-- Login Form -->
<div class="flex flex-col items-center bg-white p-8 border border-yellow-400 rounded-xl shadow-lg">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-12 mb-6" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-4">
<input type="text" placeholder="Phone number, username, or email" class="px-4 py-2 border border-yellow-400 rounded focus:ring-2 focus:ring-yellow-500 focus:outline-none">
<input type="password" placeholder="Password" class="px-4 py-2 border border-yellow-400 rounded focus:ring-2 focus:ring-yellow-500 focus:outline-none">
<button type="submit" class="bg-yellow-500 text-white font-semibold py-2 rounded hover:bg-yellow-600">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-yellow-600 hover:underline">Forgotten your password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-yellow-400">
<span class="px-2 text-gray-500">OR</span>
<hr class="w-full border-t border-yellow-400">
</div>
<button class="flex items-center justify-center w-full py-2 border border-yellow-400 rounded-md">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-4 text-sm">Don't have an account? <a href="#" class="text-yellow-600 font-semibold">Sign up</a></p>
<p class="mt-4 text-xs text-gray-500">Get the app.</p>
</div>
</div><div class="flex flex-col justify-center items-center min-h-screen bg-indigo-100 py-10">
<!-- Login Form -->
<div class="flex flex-col items-center bg-white p-10 border border-indigo-400 rounded-lg shadow-xl">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-12 mb-6" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-4">
<input type="text" placeholder="Phone number, username, or email" class="px-4 py-2 border border-indigo-400 rounded focus:ring-2 focus:ring-indigo-500 focus:outline-none">
<input type="password" placeholder="Password" class="px-4 py-2 border border-indigo-400 rounded focus:ring-2 focus:ring-indigo-500 focus:outline-none">
<button type="submit" class="bg-indigo-500 text-white font-semibold py-2 rounded hover:bg-indigo-600">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-indigo-600 hover:underline">Forgotten your password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-indigo-400">
<span class="px-2 text-gray-500">OR</span>
<hr class="w-full border-t border-indigo-400">
</div>
<button class="flex items-center justify-center w-full py-2 border border-indigo-400 rounded-md">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-4 text-sm">Don't have an account? <a href="#" class="text-indigo-600 font-semibold">Sign up</a></p>
<p class="mt-4 text-xs text-gray-500">Get the app.</p>
</div>
</div><div class="flex flex-col items-center justify-center min-h-screen bg-green-50 px-4">
<!-- Login Form -->
<div class="flex flex-col items-center bg-white p-6 border border-green-400 rounded-md shadow-sm">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-12 mb-6" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-4">
<input type="text" placeholder="Phone number, username, or email" class="px-4 py-2 border border-green-400 rounded focus:ring-2 focus:ring-green-500 focus:outline-none">
<input type="password" placeholder="Password" class="px-4 py-2 border border-green-400 rounded focus:ring-2 focus:ring-green-500 focus:outline-none">
<button type="submit" class="bg-green-500 text-white font-semibold py-2 rounded hover:bg-green-600">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-green-600 hover:underline">Forgotten your password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-green-400">
<span class="px-2 text-gray-500">OR</span>
<hr class="w-full border-t border-green-400">
</div>
<button class="flex items-center justify-center w-full py-2 border border-green-400 rounded-md">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-4 text-sm">Don't have an account? <a href="#" class="text-green-600 font-semibold">Sign up</a></p>
<p class="mt-4 text-xs text-gray-500">Get the app.</p>
</div>
</div><div class="flex flex-col md:flex-row p-7 justify-center items-center min-h-screen bg-gray-900 text-white">
<!-- Login Form -->
<div class="flex flex-col items-center bg-black p-8 border border-gray-700 rounded-xl shadow-2xl space-y-4 hover:rotate-0 transition-transform duration-500 ease-in-out">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-16 mb-6 filter invert" alt="Instagram Logo">
<form class="flex flex-col w-96 space-y-6">
<input type="text" placeholder="Enter username" class="px-4 py-3 border border-gray-600 bg-gray-800 text-white rounded focus:ring-4 focus:ring-green-600 focus:outline-none">
<input type="password" placeholder="Password" class="px-4 py-3 border border-gray-600 bg-gray-800 text-white rounded focus:ring-4 focus:ring-green-600 focus:outline-none">
<button type="submit" class="bg-green-600 text-white font-semibold py-3 rounded-lg hover:bg-green-700 transition-colors duration-300">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-green-400 hover:underline">Forgot password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-gray-700">
<span class="px-4 text-gray-500">OR</span>
<hr class="w-full border-t border-gray-700">
</div>
<button class="flex items-center justify-center w-full py-2 border border-gray-600 rounded-lg hover:bg-gray-800">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2 filter invert" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-4 text-sm">Don't have an account? <a href="#" class="text-green-400 font-semibold">Sign up</a></p>
<p class="mt-4 text-xs text-gray-500">Get the app.</p>
</div>
</div><div class="flex flex-col justify-center items-center min-h-screen bg-gradient-to-r from-yellow-300 via-pink-300 to-purple-300">
<!-- Login Form -->
<div class="flex flex-col items-center bg-white p-10 border-8 border-yellow-400 rounded-lg shadow-md transform rotate-3 hover:rotate-0 transition-transform duration-500">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-14 mb-6 saturate-150" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-5">
<input type="text" placeholder="Phone number, username, or email" class="px-4 py-3 border-2 border-purple-400 bg-pink-100 rounded focus:ring-4 focus:ring-purple-600 focus:outline-none shadow-lg">
<input type="password" placeholder="Password" class="px-4 py-3 border-2 border-purple-400 bg-pink-100 rounded focus:ring-4 focus:ring-purple-600 focus:outline-none shadow-lg">
<button type="submit" class="bg-purple-500 text-white font-semibold py-3 rounded-xl hover:bg-purple-600 transition-all duration-300">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-purple-600 hover:underline">Forgotten your password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-pink-400">
<span class="px-4 text-purple-600">OR</span>
<hr class="w-full border-t border-pink-400">
</div>
<button class="flex items-center justify-center w-full py-3 border-2 border-yellow-400 bg-pink-100 rounded-lg hover:bg-purple-200 transition duration-500">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-6 text-sm">Don't have an account? <a href="#" class="text-purple-700 font-semibold">Sign up</a></p>
<p class="mt-4 text-xs text-yellow-500">Get the app.</p>
</div>
</div><div class="flex flex-col items-center justify-center min-h-screen bg-white">
<!-- Login Form -->
<div class="flex flex-col items-center p-10 bg-white border border-gray-200 rounded-2xl shadow-lg w-[350px]">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-10 mb-6 grayscale" alt="Instagram Logo">
<form class="flex flex-col w-full space-y-4">
<input type="text" placeholder="Phone number, username" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-4 focus:ring-gray-400">
<input type="password" placeholder="Password" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-4 focus:ring-gray-400">
<button type="submit" class="bg-gray-800 text-white py-2 rounded-lg hover:bg-gray-900 transition-colors duration-300">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-gray-500 hover:underline">Forgot password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-gray-300">
<span class="px-4 text-gray-400">OR</span>
<hr class="w-full border-gray-300">
</div>
<button class="flex items-center justify-center w-full py-2 border border-gray-300 rounded-lg">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2 grayscale" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-4 text-sm">Don't have an account? <a href="#" class="text-gray-700 font-semibold">Sign up</a></p>
<p class="mt-4 text-xs text-gray-400">Get the app.</p>
</div>
</div><div class="flex flex-col justify-center items-center p-6 min-h-screen bg-gradient-to-t from-black via-gray-900 to-purple-900 text-white">
<!-- Login Form -->
<div class="flex flex-col items-center bg-black bg-opacity-70 p-12 border-2 border-indigo-700 rounded-lg shadow-lg space-y-4">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-16 mb-6 filter brightness-200" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-6">
<input type="text" placeholder="Enter username" class="px-4 py-3 border border-indigo-400 bg-black text-white rounded-lg focus:ring-2 focus:ring-indigo-500 focus:outline-none">
<input type="password" placeholder="Password" class="px-4 py-3 border border-indigo-400 bg-black text-white rounded-lg focus:ring-2 focus:ring-indigo-500 focus:outline-none">
<button type="submit" class="bg-indigo-600 text-white font-semibold py-3 rounded-xl hover:bg-indigo-700 transition-all duration-300">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-indigo-400 hover:underline">Forgotten your password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-indigo-400">
<span class="px-4 text-gray-500">OR</span>
<hr class="w-full border-t border-indigo-400">
</div>
<button class="flex items-center justify-center w-full py-2 border border-indigo-400 bg-black rounded-lg hover:bg-indigo-800 transition duration-500">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2 filter invert" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-6 text-sm">Don't have an account? <a href="#" class="text-indigo-500 font-semibold">Sign up</a></p>
<p class="mt-4 text-xs text-indigo-300">Get the app.</p>
</div>
</div><div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-blue-900 to-black text-white relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full grid grid-cols-6 gap-2 transform scale-150 opacity-10">
<div class="bg-blue-800 rounded-full"></div>
<div class="bg-blue-800 rounded-full"></div>
<div class="bg-blue-800 rounded-full"></div>
<div class="bg-blue-800 rounded-full"></div>
<div class="bg-blue-800 rounded-full"></div>
<div class="bg-blue-800 rounded-full"></div>
</div>
<!-- Login Form -->
<div class="relative flex flex-col items-center bg-black bg-opacity-70 p-12 border-2 border-blue-800 rounded-lg shadow-xl">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-12 mb-6 invert" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-6">
<input type="text" placeholder="Phone number, username, or email" class="px-4 py-2 border border-blue-600 bg-blue-900 text-white rounded-lg focus:ring-4 focus:ring-blue-600 focus:outline-none">
<input type="password" placeholder="Password" class="px-4 py-2 border border-blue-600 bg-blue-900 text-white rounded-lg focus:ring-4 focus:ring-blue-600 focus:outline-none">
<button type="submit" class="bg-blue-700 text-white font-semibold py-2 rounded-lg hover:bg-blue-800 transition-colors duration-300">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-blue-500 hover:underline">Forgot password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-blue-600">
<span class="px-4 text-blue-400">OR</span>
<hr class="w-full border-t border-blue-600">
</div>
<button class="flex items-center justify-center w-full py-2 border border-blue-600 rounded-lg hover:bg-blue-800">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2 invert" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-4 text-sm">Don't have an account? <a href="#" class="text-blue-400 font-semibold">Sign up</a></p>
<p class="mt-4 text-xs text-blue-500">Get the app.</p>
</div>
</div><div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-blue-500 to-purple-600">
<!-- Glassmorphic Login Form -->
<div class="flex flex-col items-center bg-white bg-opacity-10 backdrop-blur-lg p-10 border border-white border-opacity-20 rounded-xl shadow-xl space-y-4">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-12 mb-6" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-5">
<input type="text" placeholder="Phone number, username, or email" class="px-4 py-3 bg-white bg-opacity-20 border border-white border-opacity-30 rounded-lg focus:ring-2 focus:ring-white focus:outline-none backdrop-blur-sm text-white placeholder-white">
<input type="password" placeholder="Password" class="px-4 py-3 bg-white bg-opacity-20 border border-white border-opacity-30 rounded-lg focus:ring-2 focus:ring-white focus:outline-none backdrop-blur-sm text-white placeholder-white">
<button type="submit" class="bg-white bg-opacity-30 text-white font-semibold py-2 rounded-lg hover:bg-opacity-40 transition-colors duration-300 backdrop-blur-sm">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-white hover:underline">Forgot password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-white border-opacity-30">
<span class="px-4 text-white">OR</span>
<hr class="w-full border-t border-white border-opacity-30">
</div>
<button class="flex items-center justify-center w-full py-3 border border-white border-opacity-30 rounded-lg hover:bg-opacity-20 backdrop-blur-sm">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-6 text-sm text-white">Don't have an account? <a href="#" class="font-semibold text-white hover:underline">Sign up</a></p>
<p class="mt-4 text-xs text-white">Get the app.</p>
</div>
</div><div class="flex flex-col justify-center items-center min-h-screen bg-gradient-to-bl from-gray-900 via-gray-600 to-black">
<!-- Glassmorphic Login Form -->
<div class="flex flex-col items-center bg-white bg-opacity-20 backdrop-blur-md p-12 rounded-lg shadow-2xl border border-gray-400 border-opacity-40">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-14 mb-6" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-4">
<input type="text" placeholder="Email or Username" class="px-4 py-2 bg-gray-800 bg-opacity-30 border border-gray-400 rounded-lg focus:ring-2 focus:ring-gray-300 focus:outline-none backdrop-blur-sm text-white placeholder-gray-300">
<input type="password" placeholder="Password" class="px-4 py-2 bg-gray-800 bg-opacity-30 border border-gray-400 rounded-lg focus:ring-2 focus:ring-gray-300 focus:outline-none backdrop-blur-sm text-white placeholder-gray-300">
<button type="submit" class="bg-white bg-opacity-10 text-white py-2 rounded-lg border border-gray-500 hover:bg-opacity-30 transition duration-300">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-gray-300 hover:underline">Forgot your password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-gray-400 border-opacity-30">
<span class="px-2 text-gray-300">OR</span>
<hr class="w-full border-gray-400 border-opacity-30">
</div>
<button class="flex items-center justify-center w-full py-2 border border-gray-500 bg-gray-800 bg-opacity-30 rounded-lg hover:bg-opacity-50">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-4 text-sm text-gray-200">Don't have an account? <a href="#" class="text-gray-100 font-semibold">Sign up</a></p>
<p class="mt-4 text-xs text-gray-400">Get the app.</p>
</div>
</div><div class="flex flex-col justify-center items-center min-h-screen bg-gradient-to-r from-blue-800 to-blue-500">
<!-- Glassmorphic Login Form -->
<div class="flex flex-col items-center bg-white bg-opacity-20 backdrop-blur-xl p-10 border border-white border-opacity-20 rounded-3xl shadow-2xl space-y-4">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-12 mb-6" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-5">
<input type="text" placeholder="Phone number, username, or email" class="px-4 py-3 bg-white bg-opacity-20 border border-white border-opacity-30 rounded-lg focus:ring-2 focus:ring-blue-200 focus:outline-none text-white placeholder-white">
<input type="password" placeholder="Password" class="px-4 py-3 bg-white bg-opacity-20 border border-white border-opacity-30 rounded-lg focus:ring-2 focus:ring-blue-200 focus:outline-none text-white placeholder-white">
<button type="submit" class="bg-blue-500 bg-opacity-30 text-white font-semibold py-2 rounded-lg hover:bg-opacity-40 transition-colors duration-300">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-white hover:underline">Forgot password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-white border-opacity-30">
<span class="px-4 text-white">OR</span>
<hr class="w-full border-t border-white border-opacity-30">
</div>
<button class="flex items-center justify-center w-full py-3 border border-white border-opacity-30 rounded-lg hover:bg-opacity-20">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-6 text-sm text-white">Don't have an account? <a href="#" class="font-semibold text-white hover:underline">Sign up</a></p>
<p class="mt-4 text-xs text-white">Get the app.</p>
</div>
</div><div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-tl from-white to-gray-300">
<!-- Glassmorphic Login Form -->
<div class="flex flex-col items-center bg-white bg-opacity-30 backdrop-blur-md p-12 rounded-2xl shadow-lg border border-white border-opacity-40">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-14 mb-6" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-4">
<input type="text" placeholder="Email or Username" class="px-4 py-2 bg-white bg-opacity-20 border border-white border-opacity-30 rounded-lg focus:ring-2 focus:ring-white focus:outline-none text-black placeholder-black">
<input type="password" placeholder="Password" class="px-4 py-2 bg-white bg-opacity-20 border border-white border-opacity-30 rounded-lg focus:ring-2 focus:ring-white focus:outline-none text-black placeholder-black">
<button type="submit" class="bg-white bg-opacity-20 text-black py-2 rounded-lg border border-white hover:bg-opacity-40 transition duration-300">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-black hover:underline">Forgot password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-white border-opacity-30">
<span class="px-2 text-black">OR</span>
<hr class="w-full border-white border-opacity-30">
</div>
<button class="flex items-center justify-center w-full py-2 border border-white border-opacity-30 rounded-lg">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-4 text-sm text-black">Don't have an account? <a href="#" class="text-black font-semibold">Sign up</a></p>
<p class="mt-4 text-xs text-black">Get the app.</p>
</div>
</div><div class="flex flex-col p-2 justify-center items-center min-h-screen bg-gradient-to-b from-purple-500 to-green-500">
<!-- Glassmorphic Login Form -->
<div class="flex flex-col items-center bg-white bg-opacity-10 backdrop-blur-lg p-12 border border-white border-opacity-20 rounded-xl shadow-xl space-y-4">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-14 mb-6" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-5">
<input type="text" placeholder="Phone number, username, or email" class="px-4 py-3 bg-white bg-opacity-20 border border-white border-opacity-30 rounded-lg focus:ring-2 focus:ring-green-300 focus:outline-none text-white placeholder-white">
<input type="password" placeholder="Password" class="px-4 py-3 bg-white bg-opacity-20 border border-white border-opacity-30 rounded-lg focus:ring-2 focus:ring-green-300 focus:outline-none text-white placeholder-white">
<button type="submit" class="bg-purple-500 bg-opacity-40 text-white font-semibold py-2 rounded-lg hover:bg-opacity-50 transition-colors duration-300">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-white hover:underline">Forgot password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-white border-opacity-30">
<span class="px-4 text-white">OR</span>
<hr class="w-full border-t border-white border-opacity-30">
</div>
<button class="flex items-center justify-center w-full py-3 border border-white border-opacity-30 rounded-lg hover:bg-opacity-20">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-6 text-sm text-white">Don't have an account? <a href="#" class="font-semibold text-white hover:underline">Sign up</a></p>
<p class="mt-4 text-xs text-white">Get the app.</p>
</div>
</div><div class="flex flex-col justify-center p-2 items-center min-h-screen bg-gradient-to-tl from-black to-indigo-900">
<!-- Glassmorphic Login Form -->
<div class="flex flex-col items-center bg-white bg-opacity-10 backdrop-blur-md p-10 border border-white border-opacity-10 rounded-lg shadow-lg">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-16 mb-6 invert" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-6">
<input type="text" placeholder="Enter your username" class="px-4 py-3 bg-white bg-opacity-10 border border-indigo-500 rounded-lg focus:ring-2 focus:ring-indigo-400 focus:outline-none text-white placeholder-white">
<input type="password" placeholder="Password" class="px-4 py-3 bg-white bg-opacity-10 border border-indigo-500 rounded-lg focus:ring-2 focus:ring-indigo-400 focus:outline-none text-white placeholder-white">
<button type="submit" class="bg-indigo-600 bg-opacity-20 text-white font-semibold py-3 rounded-lg hover:bg-opacity-40 transition-colors duration-300">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-white hover:underline">Forgot password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-white border-opacity-20">
<span class="px-4 text-white">OR</span>
<hr class="w-full border-white border-opacity-20">
</div>
<button class="flex items-center justify-center w-full py-3 border border-white bg-opacity-10 rounded-lg hover:bg-opacity-20">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2 invert" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-6 text-sm text-white">Don't have an account? <a href="#" class="font-semibold text-white hover:underline">Sign up</a></p>
<p class="mt-4 text-xs text-white">Get the app.</p>
</div>
</div><div class="flex flex-col justify-center items-center min-h-screen bg-gradient-to-b from-red-500 to-blue-500">
<!-- Mario-themed Login Form -->
<div class="flex flex-col items-center bg-yellow-400 border-8 border-red-500 p-10 rounded-2xl shadow-lg transform scale-110 hover:scale-100 transition-transform duration-500">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-12 mb-6" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-6">
<input type="text" placeholder="Phone number, username, or email" class="px-4 py-3 border-2 border-blue-500 bg-white rounded-lg text-blue-800 focus:ring-2 focus:ring-red-600 focus:outline-none shadow-md">
<input type="password" placeholder="Password" class="px-4 py-3 border-2 border-blue-500 bg-white rounded-lg text-blue-800 focus:ring-2 focus:ring-red-600 focus:outline-none shadow-md">
<button type="submit" class="bg-red-600 text-white font-bold py-3 rounded-lg shadow-lg hover:bg-red-700 transition-all duration-300">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-yellow-900 hover:underline">Forgot password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-red-500">
<span class="px-4 text-yellow-900">OR</span>
<hr class="w-full border-t border-red-500">
</div>
<button class="flex items-center justify-center w-full py-2 border-2 border-blue-500 rounded-lg bg-white hover:bg-yellow-300">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-4 text-sm text-yellow-900">Don't have an account? <a href="#" class="text-red-600 font-bold hover:underline">Sign up</a></p>
<p class="mt-4 text-xs text-blue-800">Get the app.</p>
</div>
</div><div class="flex flex-col justify-center items-center min-h-screen bg-black text-white">
<!-- Pornhub-themed Login Form -->
<div class="flex flex-col items-center bg-black bg-opacity-80 border border-gray-600 p-12 rounded-lg shadow-lg">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-14 mb-6" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-6">
<input type="text" placeholder="Phone number, username, or email" class="px-4 py-3 bg-gray-900 text-gray-300 border border-gray-700 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:outline-none">
<input type="password" placeholder="Password" class="px-4 py-3 bg-gray-900 text-gray-300 border border-gray-700 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:outline-none">
<button type="submit" class="bg-yellow-500 text-black font-semibold py-2 rounded-lg hover:bg-yellow-600 transition-all duration-300">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-gray-400 hover:underline">Forgot password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-gray-700">
<span class="px-4 text-gray-400">OR</span>
<hr class="w-full border-t border-gray-700">
</div>
<button class="flex items-center justify-center w-full py-2 border border-gray-700 rounded-lg hover:bg-gray-800">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-4 text-sm text-gray-400">Don't have an account? <a href="#" class="text-yellow-500 font-semibold hover:underline">Sign up</a></p>
<p class="mt-4 text-xs text-gray-400">Get the app.</p>
</div>
</div><div class="flex flex-col justify-center items-center min-h-screen bg-gradient-to-b from-red-600 to-red-400 text-white">
<!-- Coca-Cola-themed Login Form -->
<div class="flex flex-col items-center bg-white bg-opacity-10 p-10 border border-white border-opacity-20 rounded-3xl shadow-2xl space-y-4">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-12 mb-6 filter brightness-200" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-5">
<input type="text" placeholder="Phone number, username, or email" class="px-4 py-3 bg-white bg-opacity-20 border border-white rounded-lg focus:ring-2 focus:ring-white focus:outline-none text-white placeholder-white">
<input type="password" placeholder="Password" class="px-4 py-3 bg-white bg-opacity-20 border border-white rounded-lg focus:ring-2 focus:ring-white focus:outline-none text-white placeholder-white">
<button type="submit" class="bg-red-600 text-white font-semibold py-2 rounded-lg hover:bg-red-700 transition-colors duration-300">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-white hover:underline">Forgot password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-white">
<span class="px-4 text-white">OR</span>
<hr class="w-full border-t border-white">
</div>
<button class="flex items-center justify-center w-full py-3 border border-white rounded-lg hover:bg-white hover:text-red-600 transition-all duration-300">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-6 text-sm">Don't have an account? <a href="#" class="font-semibold hover:underline">Sign up</a></p>
<p class="mt-4 text-xs">Get the app.</p>
</div>
</div><div class="flex flex-col justify-center items-center min-h-screen bg-gradient-to-r from-green-600 to-black">
<!-- Spotify-themed Login Form -->
<div class="flex flex-col items-center bg-green-800 bg-opacity-80 p-10 border border-green-900 rounded-xl shadow-2xl space-y-4">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-12 mb-6" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-5">
<input type="text" placeholder="Phone number, username, or email" class="px-4 py-3 bg-black text-white border border-green-600 rounded-lg focus:ring-2 focus:ring-green-400 focus:outline-none">
<input type="password" placeholder="Password" class="px-4 py-3 bg-black text-white border border-green-600 rounded-lg focus:ring-2 focus:ring-green-400 focus:outline-none">
<button type="submit" class="bg-green-500 text-white font-semibold py-2 rounded-lg hover:bg-green-600 transition-colors duration-300">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-white hover:underline">Forgot password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-green-700">
<span class="px-4 text-white">OR</span>
<hr class="w-full border-t border-green-700">
</div>
<button class="flex items-center justify-center w-full py-2 border border-green-600 bg-black rounded-lg hover:bg-green-800">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-4 text-sm text-white">Don't have an account? <a href="#" class="text-green-400 font-semibold hover:underline">Sign up</a></p>
<p class="mt-4 text-xs text-white">Get the app.</p>
</div>
</div><div class="flex flex-col justify-center items-center min-h-screen bg-black text-green-400">
<!-- Matrix-themed Login Form -->
<div class="flex flex-col items-center bg-black bg-opacity-60 border border-green-600 p-10 rounded-lg shadow-lg">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-14 mb-6 filter invert" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-4">
<input type="text" placeholder="Phone number, username, or email" class="px-4 py-3 bg-black border border-green-600 text-green-400 rounded-lg focus:ring-2 focus:ring-green-500 focus:outline-none">
<input type="password" placeholder="Password" class="px-4 py-3 bg-black border border-green-600 text-green-400 rounded-lg focus:ring-2 focus:ring-green-500 focus:outline-none">
<button type="submit" class="bg-green-600 text-black font-semibold py-2 rounded-lg hover:bg-green-700 transition-all duration-300">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-green-300 hover:underline">Forgot password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-green-600">
<span class="px-4 text-green-400">OR</span>
<hr class="w-full border-t border-green-600">
</div>
<button class="flex items-center justify-center w-full py-2 border border-green-600 rounded-lg hover:bg-green-700">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2 invert" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-4 text-sm">Don't have an account? <a href="#" class="text-green-400 font-semibold hover:underline">Sign up</a></p>
<p class="mt-4 text-xs">Get the app.</p>
</div>
</div><div class="flex flex-col justify-center items-center min-h-screen bg-gradient-to-r from-black to-gray-900 text-white">
<!-- Star Wars-themed Login Form -->
<div class="flex flex-col items-center bg-black bg-opacity-70 border border-gray-800 p-10 rounded-xl shadow-lg">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-14 mb-6" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-4">
<input type="text" placeholder="Phone number, username, or email" class="px-4 py-3 bg-black border border-gray-600 text-white rounded-lg focus:ring-2 focus:ring-yellow-400 focus:outline-none">
<input type="password" placeholder="Password" class="px-4 py-3 bg-black border border-gray-600 text-white rounded-lg focus:ring-2 focus:ring-yellow-400 focus:outline-none">
<button type="submit" class="bg-yellow-400 text-black font-semibold py-2 rounded-lg hover:bg-yellow-500 transition-all duration-300">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-gray-400 hover:underline">Forgot password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-gray-600">
<span class="px-4 text-gray-300">OR</span>
<hr class="w-full border-t border-gray-600">
</div>
<button class="flex items-center justify-center w-full py-2 border border-gray-600 bg-black hover:bg-gray-800 rounded-lg">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2 invert" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-4 text-sm">Don't have an account? <a href="#" class="text-yellow-400 font-semibold hover:underline">Sign up</a></p>
<p class="mt-4 text-xs text-gray-400">Get the app.</p>
</div>
</div><div class="flex flex-col justify-center items-center min-h-screen bg-gradient-to-b from-gray-900 to-purple-900 text-yellow-500">
<!-- Harry Potter-themed Login Form -->
<div class="flex flex-col items-center bg-gray-800 bg-opacity-70 border border-yellow-600 p-10 rounded-lg shadow-2xl">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-14 mb-6 filter invert" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-4">
<input type="text" placeholder="Phone number, username, or email" class="px-4 py-3 bg-black border border-yellow-500 text-yellow-500 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:outline-none">
<input type="password" placeholder="Password" class="px-4 py-3 bg-black border border-yellow-500 text-yellow-500 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:outline-none">
<button type="submit" class="bg-yellow-600 text-black font-semibold py-2 rounded-lg hover:bg-yellow-700 transition-all duration-300">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-yellow-400 hover:underline">Forgot password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-yellow-500">
<span class="px-4 text-yellow-400">OR</span>
<hr class="w-full border-t border-yellow-500">
</div>
<button class="flex items-center justify-center w-full py-2 border border-yellow-500 bg-black rounded-lg hover:bg-yellow-700">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2 invert" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-4 text-sm">Don't have an account? <a href="#" class="text-yellow-500 font-semibold hover:underline">Sign up</a></p>
<p class="mt-4 text-xs text-yellow-400">Get the app.</p>
</div>
</div><div class="flex flex-col justify-center items-center min-h-screen bg-gradient-to-b from-green-700 to-black">
<!-- Jurassic Park-themed Login Form -->
<div class="flex flex-col items-center bg-green-900 bg-opacity-90 p-10 border-4 border-yellow-600 rounded-xl shadow-2xl">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-14 mb-6" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-4">
<input type="text" placeholder="Phone number, username, or email" class="px-4 py-3 bg-black border border-green-700 text-yellow-500 rounded-lg focus:ring-2 focus:ring-green-600 focus:outline-none">
<input type="password" placeholder="Password" class="px-4 py-3 bg-black border border-green-700 text-yellow-500 rounded-lg focus:ring-2 focus:ring-green-600 focus:outline-none">
<button type="submit" class="bg-yellow-600 text-black font-semibold py-2 rounded-lg hover:bg-yellow-700 transition-all duration-300">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-yellow-300 hover:underline">Forgot password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-green-700">
<span class="px-4 text-yellow-400">OR</span>
<hr class="w-full border-t border-green-700">
</div>
<button class="flex items-center justify-center w-full py-2 border border-green-700 bg-black rounded-lg hover:bg-green-800">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2 invert" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-4 text-sm text-yellow-400">Don't have an account? <a href="#" class="text-yellow-500 font-semibold hover:underline">Sign up</a></p>
<p class="mt-4 text-xs text-green-300">Get the app.</p>
</div>
</div><div class="flex flex-col justify-center items-center min-h-screen bg-gradient-to-b from-gray-900 to-black text-white">
<!-- The Dark Knight-themed Login Form -->
<div class="flex flex-col items-center bg-black bg-opacity-90 p-12 border border-gray-700 rounded-lg shadow-2xl">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-14 mb-6" alt="Instagram Logo">
<form class="flex flex-col w-80 space-y-4">
<input type="text" placeholder="Phone number, username, or email" class="px-4 py-3 bg-gray-900 border border-gray-600 text-white rounded-lg focus:ring-2 focus:ring-yellow-400 focus:outline-none">
<input type="password" placeholder="Password" class="px-4 py-3 bg-gray-900 border border-gray-600 text-white rounded-lg focus:ring-2 focus:ring-yellow-400 focus:outline-none">
<button type="submit" class="bg-yellow-600 text-black font-semibold py-2 rounded-lg hover:bg-yellow-700 transition-all duration-300">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-gray-400 hover:underline">Forgot password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-gray-600">
<span class="px-4 text-gray-400">OR</span>
<hr class="w-full border-t border-gray-600">
</div>
<button class="flex items-center justify-center w-full py-2 border border-gray-600 rounded-lg hover:bg-gray-800">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/698/original/facebook-logo-facebook-icon-transparent-free-png.png" class="h-6 mr-2 invert" alt="Facebook Icon">
Log in with Facebook
</button>
</form>
<p class="mt-4 text-sm">Don't have an account? <a href="#" class="text-yellow-400 font-semibold hover:underline">Sign up</a></p>
<p class="mt-4 text-xs text-gray-400">Get the app.</p>
</div>
</div>
Don't have an account? Sign up
<div class="flex flex-col justify-center items-center min-h-screen bg-white">
<!-- Minimalist White-themed Login Form -->
<div class="flex flex-col items-center bg-white p-8 border border-gray-200 rounded-lg shadow-sm w-80">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-12 mb-6" alt="Instagram Logo">
<form class="flex flex-col w-full space-y-4">
<input type="text" placeholder="Username or email" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-200">
<input type="password" placeholder="Password" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-200">
<button type="submit" class="bg-gray-800 text-white py-2 rounded-lg hover:bg-gray-900 transition duration-300">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-gray-500 hover:underline">Forgot password?</a>
</div>
</form>
<p class="mt-4 text-sm text-gray-500">Don't have an account? <a href="#" class="text-gray-700 font-semibold">Sign up</a></p>
</div>
</div>
Don't have an account? Sign up
<div class="flex flex-col justify-center items-center min-h-screen bg-black text-white">
<!-- Minimalist Dark-themed Login Form -->
<div class="flex flex-col items-center bg-black p-8 border border-gray-700 rounded-lg shadow-sm w-80">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-12 mb-6 invert" alt="Instagram Logo">
<form class="flex flex-col w-full space-y-4">
<input type="text" placeholder="Username or email" class="px-4 py-2 bg-gray-800 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-600">
<input type="password" placeholder="Password" class="px-4 py-2 bg-gray-800 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-600">
<button type="submit" class="bg-gray-600 text-white py-2 rounded-lg hover:bg-gray-700 transition duration-300">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-gray-400 hover:underline">Forgot password?</a>
</div>
</form>
<p class="mt-4 text-sm text-gray-400">Don't have an account? <a href="#" class="text-gray-500 font-semibold">Sign up</a></p>
</div>
</div>
Don't have an account? Sign up
<div class="flex flex-col justify-center items-center min-h-screen bg-gray-100">
<!-- Minimalist Gray-themed Login Form -->
<div class="flex flex-col items-center bg-gray-50 p-8 border border-gray-300 rounded-lg shadow-sm w-80">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-12 mb-6" alt="Instagram Logo">
<form class="flex flex-col w-full space-y-4">
<input type="text" placeholder="Username or email" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-300">
<input type="password" placeholder="Password" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-300">
<button type="submit" class="bg-gray-500 text-white py-2 rounded-lg hover:bg-gray-600 transition duration-300">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-gray-500 hover:underline">Forgot password?</a>
</div>
</form>
<p class="mt-4 text-sm text-gray-600">Don't have an account? <a href="#" class="text-gray-700 font-semibold">Sign up</a></p>
</div>
</div>
Don't have an account? Sign up
<div class="flex flex-col justify-center items-center min-h-screen bg-blue-100">
<!-- Minimalist Blue-themed Login Form -->
<div class="flex flex-col items-center bg-white p-8 border border-blue-200 rounded-lg shadow-sm w-80">
<img src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png" class="h-12 mb-6" alt="Instagram Logo">
<form class="flex flex-col w-full space-y-4">
<input type="text" placeholder="Username or email" class="px-4 py-2 border border-blue-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-200">
<input type="password" placeholder="Password" class="px-4 py-2 border border-blue-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-200">
<button type="submit" class="bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 transition duration-300">
Log in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-blue-500 hover:underline">Forgot password?</a>
</div>
</form>
<p class="mt-4 text-sm text-blue-600">Don't have an account? <a href="#" class="text-blue-700 font-semibold">Sign up</a></p>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<div class="flex flex-col justify-center items-center min-h-screen bg-gradient-to-b from-gray-800 to-black">
<!-- Apple Corporation-themed Login Form -->
<div class="flex flex-col items-center bg-white bg-opacity-90 p-10 border-4 border-gray-400 rounded-xl shadow-2xl">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg" class="h-14 mb-6" alt="Apple Logo">
<form class="flex flex-col w-80 space-y-4">
<input type="text" placeholder="Apple ID or email" class="px-4 py-3 bg-gray-100 border border-gray-300 text-gray-800 rounded-lg focus:ring-2 focus:ring-gray-500 focus:outline-none">
<input type="password" placeholder="Password" class="px-4 py-3 bg-gray-100 border border-gray-300 text-gray-800 rounded-lg focus:ring-2 focus:ring-gray-500 focus:outline-none">
<button type="submit" class="bg-black text-white font-semibold py-2 rounded-lg hover:bg-gray-700 transition-all duration-300">
Sign in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-gray-600 hover:underline">Forgot Apple ID or password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-gray-300">
<span class="px-4 text-gray-600">OR</span>
<hr class="w-full border-t border-gray-300">
</div>
<button class="flex items-center justify-center w-full py-2 border border-gray-300 bg-gray-100 rounded-lg hover:bg-gray-200">
Sign in with Facebook
</button>
</form>
<p class="mt-4 text-sm text-gray-600">Don't have an account? <a href="#" class="text-black font-semibold hover:underline">Create Apple ID</a></p>
<p class="mt-4 text-xs text-gray-400">Get the app.</p>
</div>
</div>
<div class="flex flex-col justify-center items-center min-h-screen bg-gradient-to-b from-gray-800 to-blue-500">
<!-- Microsoft-themed Login Form -->
<div class="flex flex-col items-center bg-white bg-opacity-90 p-10 border-4 border-blue-600 rounded-xl shadow-lg">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAclBMVEXz8/PzUyWBvAYFpvD/ugjz9PX19PXz+fr39fr69vPy9fp5uAAAofD/tgDz3Nji6tfzRADzTBfzmYew0oB/xfH70IDX5/P16tfz5eLo7eHzPADzlICs0Hfh6/N3wvH7znj07eEAnvDzvbPL3q6u1/L43q6vy/leAAABd0lEQVR4nO3cR1IDQRREwcb0SEgj770B7n9FNmhEBL1g8zUs8l2gIi9QKUmSpHs5vPtWFV4uANMwunUD3IyiS7+Jebgdx7bddb63uvt+dKOqIBw/xTaZNsLZc3CEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEjxVuJ7GNfwj7LQjTejcN7noTVu+z4PabgjB1wmumqm50JaAkSX/oLbxmKveiK/zqp8NxHtvx40bMn6dFbKdzgbi81MEdb8LeaRDdqiSsX2Kr541wMXiNjZCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkPCxwuj/0kvb/6V5Gd2hmTqvokulm90HluNrFyhJ0j/rC6N0RI28dGy3AAAAAElFTkSuQmCC" class="h-14 mb-6" alt="Microsoft Logo">
<form class="flex flex-col w-80 space-y-4">
<input type="text" placeholder="Email, phone, or Skype" class="px-4 py-3 bg-gray-100 border border-blue-300 text-gray-800 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none">
<input type="password" placeholder="Password" class="px-4 py-3 bg-gray-100 border border-blue-300 text-gray-800 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none">
<button type="submit" class="bg-blue-600 text-white font-semibold py-2 rounded-lg hover:bg-blue-500 transition-all duration-300">
Sign in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-blue-400 hover:underline">Can't access your account?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-blue-300">
<span class="px-4 text-blue-500">OR</span>
<hr class="w-full border-t border-blue-300">
</div>
<button class="flex items-center justify-center w-full py-2 border border-blue-300 bg-gray-100 rounded-lg hover:bg-blue-200">
Sign in with Facebook
</button>
</form>
<p class="mt-4 text-sm text-blue-500">Don't have an account? <a href="#" class="text-blue-600 font-semibold hover:underline">Create one!</a></p>
<p class="mt-4 text-xs text-gray-400">Get the app.</p>
</div>
</div>
<div class="flex flex-col justify-center items-center min-h-screen bg-gradient-to-b from-black to-gray-800">
<!-- Tesla-themed Login Form -->
<div class="flex flex-col items-center bg-white bg-opacity-10 p-10 border-4 border-red-600 rounded-xl shadow-2xl">
<img src="https://i.pinimg.com/736x/21/b1/38/21b138fc483f76537233bc7d9ea25619.jpg" class="h-14 mb-6" alt="Tesla Logo">
<form class="flex flex-col w-80 space-y-4">
<input type="text" placeholder="Email" class="px-4 py-3 bg-gray-200 border border-red-400 text-gray-900 rounded-lg focus:ring-2 focus:ring-red-500 focus:outline-none">
<input type="password" placeholder="Password" class="px-4 py-3 bg-gray-200 border border-red-400 text-gray-900 rounded-lg focus:ring-2 focus:ring-red-500 focus:outline-none">
<button type="submit" class="bg-red-600 text-white font-semibold py-2 rounded-lg hover:bg-red-500 transition-all duration-300">
Sign in
</button>
<div class="flex justify-between items-center">
<a href="#" class="text-sm text-red-400 hover:underline">Forgot your password?</a>
</div>
<div class="flex items-center justify-between my-4">
<hr class="w-full border-t border-red-400">
<span class="px-4 text-red-500">OR</span>
<hr class="w-full border-t border-red-400">
</div>
<button class="flex items-center justify-center w-full py-2 border border-red-400 bg-gray-300 rounded-lg hover:bg-red-200">
Sign in with Google
</button>
</form>
<p class="mt-4 text-sm text-red-500">Don't have an account? <a href="#" class="text-red-600 font-semibold hover:underline">Create one!</a></p>
<p class="mt-4 text-xs text-gray-400">Get the app.</p>
</div>
</div>This project features 50+ creative and bold Instagram login page variations built using JSX and Tailwind CSS. Each design captures a unique essence, reflecting various iconic themes ranging from movies, popular brands, gaming, and bold color palettes. By combining modern web development practices with creative design, these login screens offer diverse experiences while maintaining core functionality and usability.
The goal of this project is to demonstrate the versatility and customization possibilities for login screens while adhering to a recognizable brand identity (Instagram logo). Each variation embodies a distinct theme, focusing on visual storytelling, user engagement, and enhancing brand association.
This variation offers a minimal, classic Instagram login page with a neutral color palette, keeping focus on simplicity, usability, and clean design:
Inspired by nature and urban environments, this design combines earthy tones with bold colors:
This variation creates a playful, game-like interface:
With an edgy, mature design, this dark mode variation features:
Reflecting the timeless brand of Coca-Cola:
This music-inspired variation features:
This design invokes the famous green code aesthetic:
This login page focuses on the galaxy’s dark and light sides:
A magical design inspired by the Harry Potter universe:
This design channels adventure and excitement:
This variation offers a dark, bold interface:
A retro-futuristic design:
A sleek and modern glassmorphism design offers:
This design is futuristic and edgy:
This variation captures an eerie, nostalgic feel:
This variation reflects simplicity:
Inspired by the iconic movie:
This design combines modernity with minimalism:
This design uses bold shapes:
A calming design:
Modern & Sleek: This design combines cutting-edge aesthetics with simplicity
Clean & Professional: This design balances minimalism with professionalism
Elegant & Minimal: This design exudes luxury through simplicity
