LOGIN PAGE OMERLINKS

This tailwind example is contributed by Omer fils ELENGA, on 04-Oct-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Register, Sign in

Form Login Form

Author Omer fils ELENGA

Tailwind v3.4 10

Fork Fullscreen

<div class="w-full max-w-4xl bg-white rounded-xl shadow-2xl overflow-hidden grid grid-cols-1 md:grid-cols-2 min-h-[520px]">
        
        
        <div class="bg-blue-600 p-8 md:p-12 text-white flex flex-col justify-between relative overflow-hidden">
            
            
            <div class="flex items-center space-x-2 z-10">
                <div class="bg-white text-blue-600 rounded-full w-8 h-8 flex items-center justify-center font-bold text-lg shadow">
                    o
                </div>
                <span class="text-xl font-semibold tracking-wide">OMERLINKS</span>
            </div>

<div class="my-8 flex justify-center items-center relative z-10">
                <div class="relative w-56 h-56 flex items-center justify-center">
                    
                    <div class="absolute w-48 h-16 bg-blue-500/50 rounded-full blur-sm -top-2 left-2"></div>
                    <div class="absolute w-40 h-10 bg-blue-400/40 rounded-full bottom-4 right-2"></div>
                    
                    
                    <div class="relative bg-white text-slate-800 rounded-xl p-4 w-44 shadow-xl border-4 border-blue-400 transform -rotate-3">
                        <div class="w-12 h-3 bg-blue-400 rounded-t-md mx-auto -mt-6 mb-3"></div>
                        <div class="space-y-3">
                            <div class="flex items-center space-x-2">
                                <i class="fa-solid fa-check text-blue-500 text-xs"></i>
                                <div class="h-2 bg-blue-100 rounded w-full"></div>
                            </div>
                            <div class="flex items-center space-x-2">
                                <i class="fa-solid fa-xmark text-blue-500 text-xs"></i>
                                <div class="h-2 bg-blue-100 rounded w-full"></div>
                            </div>
                            <div class="flex items-center space-x-2">
                                <i class="fa-solid fa-check text-blue-500 text-xs"></i>
                                <div class="h-2 bg-blue-200 rounded w-3/4"></div>
                            </div>
                        </div>
                    </div>

<div class="absolute bottom-2 left-4 w-28 h-6 bg-cyan-400 rounded-full transform -rotate-45 shadow-md flex items-center justify-end pr-2 border-2 border-blue-600">
                        <div class="w-2 h-2 bg-slate-800 rounded-full"></div>
                    </div>
                </div>
            </div>

<div x-data="{ activeSlide: 0 }" class="z-10">
                <h2 class="text-2xl md:text-3xl font-medium mb-2">Welcome!</h2>
                <p class="text-blue-100 text-sm leading-relaxed max-w-xs mb-6">
                    Get a real intranet on top of your Office 365 environment, with Upteamist.
                </p>
                
                
                <div class="flex space-x-2">
                    <template x-for="i in [0, 1, 2]" :key="i">
                        <button 
                            @click="activeSlide = i" 
                            :class="activeSlide === i ? 'bg-white w-3' : 'border border-white bg-transparent w-2.5'"
                            class="h-2.5 rounded-full transition-all duration-300">
                        </button>
                    </template>
                </div>
            </div>

</div>

<div class="p-8 md:p-12 flex flex-col justify-center bg-white" 
             x-data="{ 
                username: '', 
                password: '', 
                rememberMe: true,
                submitForm() {
                    alert('Connexion en cours pour : ' + this.username);
                }
             }">
            
            <h1 class="text-3xl font-normal text-blue-600 mb-2">Log In</h1>
            
            <p class="text-xs text-gray-500 mb-8">
                Don't have an account? 
                <a href="#" class="text-blue-600 font-medium hover:underline">Create an account</a>
                <br>
                <span class="text-gray-400">It will take less than a minute.</span>
            </p>

<div class="relative border-b border-gray-200 focus-within:border-blue-600 transition-colors pb-1">
                    <input 
                        type="password" 
                        x-model="password"
                        placeholder="Password" 
                        required
                        class="w-full pr-8 py-1 text-sm text-gray-700 placeholder-gray-400 focus:outline-none bg-transparent"
                    />
                    <i class="fa-solid fa-lock absolute right-1 top-2 text-gray-400 text-sm"></i>
                </div>

<div class="flex items-center justify-between pt-2">
                    <button 
                        type="submit" 
                        class="bg-blue-600 hover:bg-blue-700 text-white font-medium text-sm px-6 py-2 rounded-md shadow-sm transition-all duration-200 active:scale-95">
                        Sign in
                    </button>

<label class="flex items-center space-x-2 cursor-pointer text-xs text-gray-500 select-none">
                        <input 
                            type="checkbox" 
                            x-model="rememberMe"
                            class="rounded border-gray-300 text-blue-600 focus:ring-blue-500 h-3.5 w-3.5"
                        />
                        <span>Remeber password</span>
                    </label>
                </div>

<div class="pt-4 text-center">
                    <a href="#" class="text-xs text-blue-600 hover:underline">
                        Forget your password?
                    </a>
                </div>
            </form>

</div>

Related Examples

Login Form with Icon

Prashant

4 years ago

18.9k
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.

Akshay

4 years ago

24.9k
Login form

Gopi Yadav

4 years ago

12.1k
Sign in / Login Form

Bunny

4 years ago

14.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.

Bunny

4 years ago

50.6k
Login Form

Amit Pachange

4 years ago

13.7k
Sign In form

Amit Pachange

3 years ago

12.7k
Login form

Leon Bachmann

3 years ago

16k
User registration form

Leon Bachmann

3 years ago

25.8k
User registration form with Instructions

Fagundo67

3 years ago

25.2k
Login form

Leon Bachmann

3 years ago

14k
User registration form

Laurits

3 years ago

12.1k