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

250

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

Chatbox template

Author:
Lucas Martinez

2 years ago

12.4k
default template

Author:
Anonymous

6 months ago

439
blog component
good blog

Author:
Uwera Dorcas

6 months ago

698
Linear infinite brand scrolling with hover effect
Beautiful lineat brand scrolling partner with hover effect

Author:
Walid Ahmad

1 year ago

2.5k
Giftcard grid

Author:
ariaw

3 months ago

413
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

7 months ago

1.5k
htmlcss0

Author:
Anonymous

6 months ago

534
Innovative Developer & Digital Creator
Innovative Developer

Author:
gidy

6 months ago

877
magic card
by salvator

Author:
Baraka Salvator

7 months ago

878
Table CRUD
CRUD TABLE DESIGN

Author:
Abhiraj

10 months ago

3.4k
blockquote

Author:
Freja Jensen

2 years ago

10k
3d Box
Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

Author:
ORGIN_DREAMS

7 months ago

665

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components