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

132

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

Powerful Website Features
Open Layout Design: No traditional boxes - content flows naturally Gradient Accents: Vibrant color gradients for visual interest Animated Icons: Subtle floating animations on feature icons Hover Effects: Soft glow backgrounds appear on hover Tag System: Color-coded tags for each feature's attributes Dark Theme: Sophisticated dark background with perfect contrast

Author:
KULDEEP

4 months ago

770
Plant Game
Checking to see if it works

Author:
Becky Keyworth

6 months ago

663
HTMLCODE
123

Author:
Anonymous

5 months ago

379
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

Author:
SANJAY SINGH GARIYA

8 months ago

1.5k
Icon group

Author:
Conan Hilton

2 years ago

9.9k
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Author:
Abhiraj

10 months ago

1.7k
Login AND Signup
login and signup

Author:
Uwera Dorcas

6 months ago

698
magic card
by salvator

Author:
Baraka Salvator

6 months ago

854
machine
tell you how your MAC pc work

Author:
gidy

1 week ago

49
Sticky fullpage pages / slides

Author:
Laurits

2 years ago

15.3k
Question & Answer
questions and answers

Author:
Anonymous

2 years ago

8.6k
Card post blog
Targetas para blog

Author:
Raul antonio de la cruz hernandez

2 weeks ago

43

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components