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

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

cards
cards with background animation

Author:
Anonymous

2 years ago

11k
Typewriter effect
using javascript

Author:
Samuel Dawson

2 years ago

41.6k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

9 months ago

2.1k
responsive home page
the best home page

Author:
irahoza daniel

5 months ago

871
Neon container

Author:
Anonymous

1 year ago

3.6k
Dionysus AI Chat

Author:
Maxim

1 month ago

274
Testimonial Section
A responsive, SEO-friendly testimonial section for Ab Nahid Agency clients

Author:
Abdul Jabbar Al Nahid

3 months ago

284
Concert ticket

Author:
Elijah Davis

2 years ago

13.2k
Glassmorphism form

Author:
Sophia Baker

2 years ago

17.8k
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

Author:
KULDEEP

4 months ago

420
Mobile app
I'll create a comprehensive collection of professional app components that you can use to build modern mobile and web applications.

Author:
ishimwe prince

5 months ago

443
why chose us
Designed with clarity and purpose, each section of our website is crafted to guide users effortlessly from engaging visuals to structured content that highlights our values and builds trust at every scroll. abnahid.com

Author:
Abdul Jabbar Al Nahid

1 week ago

19

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components