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

364

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

joker
joker cyber punk

Author:
Baraka Salvator

8 months ago

1.2k
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

8 months ago

848
Horizon Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN

Author:
Alif Bima Pradana

1 week ago

50
walletp2p

Author:
Anonymous

1 year ago

1.4k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

1 year ago

1.2k
Multi Step form with javascript
A Beautiful multi step form using HTML CSS and JS

Author:
Walid Ahmad

1 year ago

1.3k
Certificate of Completion
A clean and modern certificate template built with Tailwind CSS. Ideal for courses, training programs, and professional achievements.

Author:
Ramkesh Gupta

4 months ago

241
Clean AI Workspace Dashboard
A pristine, light-mode SaaS interface designed for AI chat applications. It features a structured three-column layout: a navigation sidebar with a theme toggle, a central workspace showcasing a "Welcome" state with colorful quick-action entry cards and a floating input bar, and a right-hand sidebar for project context. The design relies on soft grays, subtle borders (border-gray-200), and ample whitespace to create a focused, professional productivity environment.

Author:
Hamza Atig

1 month ago

154
Updated customer details page
Customer details page

Author:
Olivia Smith

1 year ago

3.8k
admindashboard
creates a responsive, interactive admin dashboard using Tailwind CSS, Font Awesome, Chart.js, and custom JavaScript animations. It's called "Materially Dashboard" and is designed for presenting key statistics and analytics data in a visually appealing manner.

Author:
ishimwe shadad

8 months ago

792
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

2.7k
Restaurant menu card

Author:
Anonymous

1 year ago

3.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components