Home
Tanvir Hasan Bappy (Tanvir)
NDUSTRIALCORE login

NDUSTRIALCORE login

NDUSTRIALCORE

This tailwind example is contributed by Tanvir Hasan Bappy (Tanvir), on 13-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author Tanvir Hasan Bappy (Tanvir)

383

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" x-data="loginForm()">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mechanical Login Panel</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes rotate-reverse {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(-360deg); }
        }
        .gear-rotate {
            animation: rotate 5s linear infinite;
        }
        .gear-rotate-reverse {
            animation: rotate-reverse 5s linear infinite;
        }
        .pressure-gauge {
            position: relative;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: conic-gradient(
                from 0deg,
                #ef4444 0%,
                #f59e0b 30%,
                #10b981 70%,
                #10b981 100%
            );
        }
        .gauge-needle {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 40px;
            height: 3px;
            background: #111827;
            transform-origin: left center;
            transition: transform 0.5s ease-out;
        }
        .mechanical-btn {
            position: relative;
            overflow: hidden;
        }
        .mechanical-btn:after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255,255,255,0.1);
            transform: rotate(45deg);
            transition: all 0.3s ease;
        }
        .mechanical-btn:hover:after {
            left: 100%;
            top: 100%;
        }
        .input-field {
            border-bottom: 3px solid #4b5563;
            transition: all 0.3s ease;
        }
        .input-field:focus {
            border-bottom-color: #3b82f6;
        }
        .bolt {
            position: absolute;
            width: 12px;
            height: 12px;
            background: #4b5563;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .bolt:after {
            content: '';
            position: absolute;
            width: 6px;
            height: 6px;
            background: #1f2937;
            border-radius: 50%;
        }
        .panel-light {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 4px;
        }
    </style>
</head>
<body class="bg-gray-900 min-h-screen flex items-center justify-center p-4">
    <div class="relative max-w-md w-full bg-gray-800 rounded-lg shadow-2xl overflow-hidden border-2 border-gray-700">
        
        <div class="bolt top-2 left-2"></div>
        <div class="bolt top-2 right-2"></div>
        <div class="bolt bottom-2 left-2"></div>
        <div class="bolt bottom-2 right-2"></div>
        
        <div class="p-8">
            <div class="flex justify-between items-center mb-8">
                <div>
                    <h1 class="text-3xl font-bold text-blue-400">INDUSTRIAL<span class="text-blue-500">CORE</span></h1>
                    <p class="text-gray-400">Secure Access Terminal</p>
                </div>
                <div class="flex space-x-2">
                    <div class="gear-rotate text-gray-500 text-2xl">
                        <i class="fas fa-cog"></i>
                    </div>
                    <div class="gear-rotate-reverse text-gray-500 text-3xl -ml-2">
                        <i class="fas fa-cog"></i>
                    </div>
                </div>
            </div>
            
            <div class="mb-8 flex justify-center">
                <div class="pressure-gauge">
                    <div class="gauge-needle" x-bind:style="'transform: rotate(' + gaugeAngle + 'deg) translateX(-50%);'"></div>
                </div>
            </div>
            
            <form @submit.prevent="authenticate" class="space-y-6">
                <div>
                    <label for="username" class="block text-sm font-medium text-gray-300 mb-1">Operator ID</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fas fa-user-cog"></i>
                        </div>
                        <input 
                            x-model="username" 
                            @input="updateGauge()" 
                            type="text" 
                            id="username" 
                            class="input-field w-full bg-gray-800 text-gray-200 py-3 px-4 pl-10 focus:outline-none" 
                            placeholder="IND-XXXXX"
                        >
                    </div>
                </div>
                
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-300 mb-1">Access Code</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fas fa-lock"></i>
                        </div>
                        <input 
                            x-model="password" 
                            @input="updateGauge()" 
                            :type="showPassword ? 'text' : 'password'" 
                            id="password" 
                            class="input-field w-full bg-gray-800 text-gray-200 py-3 px-4 pl-10 focus:outline-none" 
                            placeholder="••••••••"
                        >
                        <button 
                            type="button" 
                            @click="showPassword = !showPassword" 
                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-blue-400"
                        >
                            <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
                        </button>
                    </div>
                </div>
                
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input 
                            x-model="remember" 
                            id="remember" 
                            type="checkbox" 
                            class="h-4 w-4 text-blue-500 focus:ring-blue-400 border-gray-600 rounded bg-gray-700"
                        >
                        <label for="remember" class="ml-2 block text-sm text-gray-300">Persist session</label>
                    </div>
                    <a href="#" class="text-sm text-blue-400 hover:text-blue-300">Lost access?</a>
                </div>
                
                <div>
                    <button 
                        type="submit" 
                        :disabled="isLoading"
                        :class="{
                            'from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900': !isLoading && !authStatus,
                            'from-green-600 to-green-800': authStatus === 'success',
                            'from-red-600 to-red-800': authStatus === 'error',
                            'from-gray-600 to-gray-800 cursor-not-allowed': isLoading
                        }"
                        class="mechanical-btn w-full bg-gradient-to-r text-white py-3 px-4 rounded-lg font-bold tracking-wider transition duration-300 flex items-center justify-center space-x-2"
                    >
                        <template x-if="isLoading">
                            <span class="flex items-center">
                                <i class="fas fa-cog fa-spin mr-2"></i>
                                PROCESSING
                            </span>
                        </template>
                        <template x-if="!isLoading && !authStatus">
                            <span class="flex items-center">
                                ENGAGE <i class="fas fa-power-off ml-2"></i>
                            </span>
                        </template>
                        <template x-if="authStatus === 'success'">
                            <span class="flex items-center">
                                ACCESS GRANTED <i class="fas fa-check ml-2"></i>
                            </span>
                        </template>
                        <template x-if="authStatus === 'error'">
                            <span class="flex items-center">
                                ACCESS DENIED <i class="fas fa-times ml-2"></i>
                            </span>
                        </template>
                    </button>
                </div>
            </form>
            
            <div class="mt-6 text-center text-sm text-gray-500">
                <p x-text="statusMessage"></p>
            </div>
        </div>
        
        <div class="bg-gray-700 px-6 py-3 flex justify-between items-center">
            <div class="text-xs text-gray-400">
                <span x-text="systemStatus"></span>
            </div>
            <div class="flex space-x-2">
                <div class="panel-light" :class="{
                    'bg-green-500 animate-pulse': systemStatus === 'System: Operational',
                    'bg-green-500': systemStatus !== 'System: Operational'
                }"></div>
                <div class="panel-light" :class="{
                    'bg-yellow-500 animate-pulse': systemStatus === 'System: Authenticating',
                    'bg-yellow-500': systemStatus !== 'System: Authenticating'
                }"></div>
                <div class="panel-light" :class="{
                    'bg-red-500 animate-pulse': systemStatus === 'System: Security Alert',
                    'bg-red-500': systemStatus !== 'System: Security Alert'
                }"></div>
            </div>
        </div>
    </div>

Related Examples

login!!!!
html , css

Author:
Hacker Development

5 months ago

838
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Author:
Rajesh Pandey

4 months ago

553
Travel Guru - User Login Page
A clean and responsive login page designed with TailwindCSS for the Travel Guru platform. This component provides users with a secure and simple way to sign in using their username or email and password, with additional options for remembering login credentials and password recovery. It also supports social logins via Facebook and Google for a faster authentication experience. The design focuses on a minimal and modern user interface with clear call-to-actions and seamless user flow.

Author:
SHARIFUL ISLAM

7 months ago

754
Beautiful sign in form
form with continue with google and continue with github buttons

Author:
Anonymous

1 year ago

4.9k
Sign in form
includes Google login button

Author:
Paul Intay

1 year ago

2.8k
Simple Login Form
Username and Password inputs with Login button. Very simple. You might like it.

Author:
Jerome Soriano

1 year ago

1.7k
Simple Login Form
Login Form Responsive Component

Author:
Ahita Bisma Adlula

8 months ago

1.1k
Login form with blured background image

Author:
Noah Schmidt

2 years ago

15k
Login Page Transition

Author:
Fatwa Bawahsi

6 months ago

872
Simple Sign up form
A responsive simple singup or login form

Author:
Emdadul Islam

1 year ago

2k
Simple Login Page
This component is responsive for Mobile & Desktop & Dark mode Supported.

Author:
Shariar Hasan

1 year ago

3.2k
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

3 months ago

616

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components