Home
Ahmad Syaifuddin
Login Form (Balsamiq Look)

Login Form (Balsamiq Look)

This tailwind example is contributed by Ahmad Syaifuddin, on 29-Oct-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Ahmad Syaifuddin

555

Fork Fullscreen

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wireframe - Sistem Monitoring APAR</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@400;700&display=swap');
        
        body {
            font-family: 'Balsamiq Sans', cursive, sans-serif;
            background-color: #f5f5f5;
        }
        
        .sketch-border {
            border: 3px solid #000;
            box-shadow: 3px 3px 0px #888;
        }
        
        .sketch-input {
            border: 2px solid #000;
            background: #fff;
            font-family: 'Balsamiq Sans', cursive, sans-serif;
        }
        
        .sketch-button {
            border: 3px solid #000;
            background: #e0e0e0;
            font-family: 'Balsamiq Sans', cursive, sans-serif;
            box-shadow: 2px 2px 0px #666;
            transition: all 0.1s;
        }
        
        .sketch-button:hover {
            box-shadow: 1px 1px 0px #666;
            transform: translate(1px, 1px);
        }
        
        .sketch-button-primary {
            background: #90EE90;
        }
        
        .sketch-checkbox {
            width: 18px;
            height: 18px;
            border: 2px solid #000;
            background: #fff;
        }
        
        .sketch-link {
            color: #0066cc;
            text-decoration: underline;
        }
        
        .icon-placeholder {
            width: 60px;
            height: 60px;
            border: 2px solid #000;
            background: #e8f5e9;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }
        
        .logo-placeholder {
            width: 60px;
            height: 60px;
            border: 2px solid #000;
            background: #e3f2fd;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-8">
    
    <div class="w-full max-w-4xl">
        <div class="sketch-border bg-gray-200 p-2 mb-0 rounded-t-lg flex items-center gap-2">
            <div class="flex gap-2">
                <div class="w-8 h-8 border-2 border-black flex items-center justify-center text-xl">&larr;</div>
                <div class="w-8 h-8 border-2 border-black flex items-center justify-center text-xl">&rarr;</div>
                <div class="w-8 h-8 border-2 border-black flex items-center justify-center text-xl">✕</div>
                <div class="w-8 h-8 border-2 border-black flex items-center justify-center text-xl">🏠</div>
            </div>
            <div class="flex-1 px-3 py-1 border-2 border-black bg-white text-sm">
                https://
            </div>
            <div class="w-16 h-8 border-2 border-black bg-white rounded-full flex items-center justify-center text-xl">🔍</div>
        </div>
        
        
        <div class="sketch-border bg-white p-8 rounded-b-lg min-h-[600px] flex items-center justify-center">
            <div class="w-full max-w-lg sketch-border bg-white p-8">
                
                
                <div class="flex justify-center gap-4 mb-6">
                    <div class="icon-placeholder rounded">
                        <span>⚙️</span>
                    </div>
                    <div class="logo-placeholder rounded">
                        <span>PT WUPI</span>
                    </div>
                </div>
                
                
                <div class="text-center mb-2">
                    <h1 class="text-2xl font-bold">Sistem Monitoring APAR</h1>
                </div>
                
                
                <div class="text-center mb-8 text-gray-600 text-sm">
                    <p>PT. WIJAYA TRI UTAMA PLYWOOD INDUSTRI</p>
                </div>
                
                <div class="border-t-2 border-gray-300 my-6"></div>
                
                
                <div class="text-center mb-6">
                    <h2 class="text-xl font-bold mb-2">Masuk ke Akun Anda</h2>
                    <p class="text-sm text-gray-600">Gunakan email dan kata sandi yang terdaftar.</p>
                </div>
                
                
                <div class="mb-4">
                    <label class="block mb-2 font-bold text-sm">Email</label>
                    <input type="text" class="sketch-input w-full px-3 py-2" placeholder="">
                </div>
                
                
                <div class="mb-6">
                    <label class="block mb-2 font-bold text-sm">Kata Sandi</label>
                    <input type="text" class="sketch-input w-full px-3 py-2" placeholder="">
                </div>
                
                
                <button class="sketch-button sketch-button-primary w-full py-3 font-bold text-lg mb-6">
                    Masuk
                </button>
                
                
                <div class="text-center text-sm">
                    <span class="text-gray-600">Belum punya akun?</span>
                    <a href="#" class="sketch-link font-bold ml-1">Daftar</a>
                </div>
                
            </div>
        </div>
        
        
        <div class="sketch-border bg-gray-200 p-2 mt-0 rounded-b-lg border-t-0 flex justify-end">
            <div class="text-sm">🖊️</div>
        </div>
    </div>
</body>
</html>

Related Examples

portfolio
Complete Portfolio UI Kit with hero, about, skills, projects, testimonials, contact form, and footer. Fully responsive and dark mode supported using Tailwind CSS.

Author:
Lekhraj Ghimire

8 months ago

895
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Author:
Abdul Baset Bappy

11 months ago

897
background animation
background animation

Author:
Anonymous

3 months ago

444
Play, Pause and Stop buttons

Author:
Lukas Müller

3 years ago

11.4k
Google map iframe with tailwind

Author:
Kofi Osei

2 years ago

21.7k
Forgot password?
you can change password an time

Author:
gidy

9 months ago

680
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

604
Tailwind CSS Navbar
Logo on the left. Main menu with a mega menu under "Services". Responsive design with a hamburger menu for mobile devices. Mega menu appears on hover for desktop and toggles on click for mobile.

Author:
KULDEEP

8 months ago

1.2k
🔥 Sleek & Modern Button with Hover Effect – Tailwind CSS
A beautifully designed button using Tailwind CSS, featuring smooth transitions, a bold shadow effect, and a hover animation. Styled with custom colors, rounded edges, and a modern font, this button is perfect for call-to-action (CTA) elements in your website or app. 🚀

Author:
Ahita Bisma Adlula

1 year ago

862
visacardes
I'll create professional Visa card components with realistic styling and multiple card types

Author:
ishimwe prince

9 months ago

1k
walletp2p

Author:
Anonymous

1 year ago

1.5k
HTMLCODE
123

Author:
Anonymous

8 months ago

409

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components