In this tutorial we will create simple tailwind css login modal, tailwind v3 signin modal, responsive login modal with alpinejs, tailwind navbar login modal, examples with Tailwind CSS.
How to install & setup Tailwind CSS v3
Example 1
tailwind css with alpinejs simple login modal.
<div x-data="{show:false}">
<div class="flex items-center justify-center mt-40">
<button @click="show=true" class="px-4 py-2 font-semibold text-blue-100 bg-blue-600 rounded" type="button">Login
Modal</button>
</div>
<div x-show="show" class="absolute inset-0 flex items-center justify-center bg-gray-700 bg-opacity-50">
<div @click.away="show = false" class="flex flex-col w-full p-20 m-8 bg-white rounded-md lg:m-0 lg:w-1/4 sm:p-10">
<div class="mb-8 text-center">
<h1 class="my-3 text-4xl font-bold">Sign in</h1>
<p class="text-sm text-coolGray-600">Sign in to access your account</p>
</div>
<form action="" class="">
<div class="space-y-4">
<div>
<label for="email" class="block mb-2 text-sm">Email address</label>
<input type="email" name="email" placeholder="email"
class="w-full px-3 py-2 text-blue-800 border border-blue-300 rounded-md bg-blue-50 focus:outline-none focus:ring-1 focus:ring-blue-300">
</div>
<div>
<div class="flex justify-between mb-2">
<label for="password" class="text-sm">Password</label>
<a href="#" class="text-xs text-blue-600 hover:underline">Forgot password?</a>
</div>
<input type="password" name="password" placeholder="password"
class="w-full px-3 py-2 text-blue-800 border border-blue-300 rounded-md bg-blue-50 focus:outline-none focus:ring-1 focus:ring-blue-300">
</div>
</div>
<div class="mt-6 space-y-2">
<div class="flex gap-x-2">
<button type="button" class="w-full px-8 py-3 text-blue-100 bg-blue-600 rounded-md">Sign
in</button>
<button @click="show = false" type="button"
class="w-full px-8 py-3 text-blue-600 border border-blue-600 rounded-md">Cancel</button>
</div>
<p class="px-6 text-sm text-center text-coolGray-600">Don't have an account yet?
<a href="#" class="text-blue-600 hover:underline">Sign up</a>.
</p>
</div>
</form>
</div>
</div>
</div>
tailwind css with alpinejs animation transition signin modal.
<div x-data="{show:false}">
<div class="flex items-center justify-center mt-40">
<button @click="show=true" class="px-4 py-2 font-semibold text-blue-100 bg-blue-600 rounded" type="button">Login
Modal</button>
</div>
<div x-show="show"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 scale-90"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-90"
class="absolute inset-0 flex items-center justify-center bg-gray-700 bg-opacity-50">
<div @click.away="show = false" class="flex flex-col w-full p-20 m-8 bg-white rounded-md lg:m-0 lg:w-1/4 sm:p-10">
<div class="mb-8 text-center">
<h1 class="my-3 text-4xl font-bold">Sign in</h1>
<p class="text-sm text-coolGray-600">Sign in to access your account</p>
</div>
<form action="" class="">
<div class="space-y-4">
<div>
<label for="email" class="block mb-2 text-sm">Email address</label>
<input type="email" name="email" placeholder="email"
class="w-full px-3 py-2 text-blue-800 border border-blue-300 rounded-md bg-blue-50 focus:outline-none focus:ring-1 focus:ring-blue-300">
</div>
<div>
<div class="flex justify-between mb-2">
<label for="password" class="text-sm">Password</label>
<a href="#" class="text-xs text-blue-600 hover:underline">Forgot password?</a>
</div>
<input type="password" name="password" placeholder="password"
class="w-full px-3 py-2 text-blue-800 border border-blue-300 rounded-md bg-blue-50 focus:outline-none focus:ring-1 focus:ring-blue-300">
</div>
</div>
<div class="mt-6 space-y-2">
<div class="flex gap-x-2">
<button type="button" class="w-full px-8 py-3 text-blue-100 bg-blue-600 rounded-md">Sign
in</button>
<button @click="show = false" type="button"
class="w-full px-8 py-3 text-blue-600 border border-blue-600 rounded-md">Cancel</button>
</div>
<p class="px-6 text-sm text-center text-coolGray-600">Don't have an account yet?
<a href="#" class="text-blue-600 hover:underline">Sign up</a>.
</p>
</div>
</form>
</div>
</div>
</div>
tailwind css 3 signin modal
Example 2
tailwind & alpinejs navbar menu with sign in modal.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS 3 & alpinejs 3 navbar Login Modal</title>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
</head>
<body>
<div x-data="{show:false}">
<nav class="container flex justify-around py-6 mx-auto bg-white shadow-md">
<div>
<h3 class="text-2xl font-medium text-blue-500">LOGO</h3>
</div>
<div class="flex items-center space-x-8">
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Blogs</a>
<a href="#">Contact Us</a>
<a href="#" @click="show=true" class="px-6 py-2 font-bold text-blue-100 bg-blue-600 rounded-md">Sign in</a>
<a href="#" class="px-6 py-2 font-bold text-blue-100 bg-gray-600 rounded-md">Sign up</a>
</div>
</nav>
<div >
<div x-show="show"
class="absolute inset-0 flex items-center justify-center bg-gray-700 bg-opacity-50">
<div @click.away="show = false"
class="flex flex-col w-full p-20 m-8 bg-white rounded-md lg:m-0 lg:w-1/4 sm:p-10">
<div class="mb-8 text-center">
<h1 class="my-3 text-4xl font-bold">Sign in</h1>
<p class="text-sm text-coolGray-600">Sign in to access your account</p>
</div>
<form action="" class="">
<div class="space-y-4">
<div>
<label for="email" class="block mb-2 text-sm">Email address</label>
<input type="email" name="email" placeholder="email"
class="w-full px-3 py-2 text-blue-800 border border-blue-300 rounded-md bg-blue-50 focus:outline-none focus:ring-1 focus:ring-blue-300">
</div>
<div>
<div class="flex justify-between mb-2">
<label for="password" class="text-sm">Password</label>
<a href="#" class="text-xs text-blue-600 hover:underline">Forgot password?</a>
</div>
<input type="password" name="password" placeholder="password"
class="w-full px-3 py-2 text-blue-800 border border-blue-300 rounded-md bg-blue-50 focus:outline-none focus:ring-1 focus:ring-blue-300">
</div>
</div>
<div class="mt-6 space-y-2">
<div class="flex gap-x-2">
<button type="button" class="w-full px-8 py-3 text-blue-100 bg-blue-600 rounded-md">Sign
in</button>
<button @click="show = false" type="button"
class="w-full px-8 py-3 text-blue-600 border border-blue-600 rounded-md">Cancel</button>
</div>
<p class="px-6 text-sm text-center text-coolGray-600">Don't have an account yet?
<a href="#" class="text-blue-600 hover:underline">Sign up</a>.
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS Gradient Button Example
Tailwind CSS 3D Button Example
Tailwind CSS Loading Button Example
Tailwind CSS v3 Cards Examples
Tailwind CSS Checkbox Form Examples
Tailwind CSS Dropdowns (Menu) on Hover Example
Tailwind CSS Multiselect Dropdown Example
How to use dark mode toggle switch in Tailwind CSS 3
How to use @apply directive in Tailwind CSS
Tailwind CSS sticky header & fixed navbar example
Tailwind CSS Navbar UI Example
Tailwind CSS 3 Login Page UI Example
Tailwind CSS Login Modal Example
Tailwind CSS 3 Overlay Image Example
Tailwind CSS Thank You Page Example
Tailwind CSS Timeline UI Example
Tailwind CSS Responsive Footer Section Example
Tailwind CSS Background Image Header Example
