Home
Nirere Esther
MEDICAL profecial #esther developer

MEDICAL profecial #esther developer

medical care

This tailwind example is contributed by Nirere Esther, on 28-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Admin Dashboard, User dashboard

Dashboard

Author Nirere Esther

550

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Industrial Doctor at Work</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f2f5;
            color: #333;
            line-height: 1.6;
        }

.container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

header {
            background-color: #005b96;
            color: white;
            padding: 20px 0;
            text-align: center;
            border-radius: 8px 8px 0 0;
            margin-bottom: 30px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

.subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
        }

.clinic {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            margin-bottom: 40px;
        }

.clinic-scene {
            flex: 1;
            min-width: 300px;
            height: 400px;
            background-color: #e6f7ff;
            border-radius: 8px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

.room {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 80%;
            background-color: #ffffff;
            border-radius: 8px 8px 0 0;
        }

.floor {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 20%;
            background-color: #d9d9d9;
        }

.medical-equipment {
            position: absolute;
            width: 80px;
            height: 180px;
            background-color: #f0f0f0;
            right: 40px;
            bottom: 40px;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 10px;
        }

.screen {
            width: 60px;
            height: 40px;
            background-color: #b3e0ff;
            border-radius: 3px;
            margin-bottom: 10px;
        }

.buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 5px;
            width: 100%;
            padding: 0 5px;
        }

.button {
            width: 12px;
            height: 12px;
            background-color: #4d4d4d;
            border-radius: 50%;
        }

.doctor {
            position: absolute;
            left: 100px;
            bottom: 40px;
            width: 120px;
            height: 220px;
            z-index: 10;
        }

.doctor-head {
            position: absolute;
            top: 0;
            left: 40px;
            width: 40px;
            height: 40px;
            background-color: #ffe0bd;
            border-radius: 50%;
        }

.doctor-body {
            position: absolute;
            top: 40px;
            left: 30px;
            width: 60px;
            height: 90px;
            background-color: #005b96;
            border-radius: 5px;
        }

.doctor-coat {
            position: absolute;
            top: 40px;
            left: 20px;
            width: 80px;
            height: 100px;
            background-color: white;
            border-radius: 5px;
            z-index: -1;
        }

.doctor-arm {
            position: absolute;
            top: 60px;
            left: 0;
            width: 30px;
            height: 15px;
            background-color: #ffe0bd;
            border-radius: 10px;
            transform-origin: right center;
            animation: examine 3s infinite;
        }

.doctor-legs {
            position: absolute;
            top: 130px;
            left: 35px;
            width: 50px;
            display: flex;
            justify-content: space-between;
        }

.leg {
            width: 20px;
            height: 60px;
            background-color: #003366;
            border-radius: 0 0 5px 5px;
        }

.patient {
            position: absolute;
            left: 200px;
            bottom: 40px;
            width: 120px;
            height: 180px;
        }

.patient-head {
            position: absolute;
            top: 0;
            left: 40px;
            width: 40px;
            height: 40px;
            background-color: #ffd6ad;
            border-radius: 50%;
        }

.patient-body {
            position: absolute;
            top: 40px;
            left: 30px;
            width: 60px;
            height: 70px;
            background-color: #8a2be2;
            border-radius: 5px;
        }

.patient-arm {
            position: absolute;
            top: 50px;
            right: -20px;
            width: 20px;
            height: 60px;
            background-color: #ffd6ad;
            border-radius: 10px;
        }

.patient-legs {
            position: absolute;
            top: 110px;
            left: 35px;
            width: 50px;
            display: flex;
            justify-content: space-between;
        }

.stethoscope {
            position: absolute;
            top: 35px;
            left: 80px;
            width: 100px;
            height: 30px;
            border: 3px solid #4d4d4d;
            border-radius: 50%;
            border-top: none;
            border-right: none;
            transform: rotate(-20deg);
            animation: stethoscopeMove 3s infinite;
        }

@keyframes examine {
            0%, 100% {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(-30deg);
            }
        }

@keyframes stethoscopeMove {
            0%, 100% {
                transform: rotate(-20deg);
            }
            50% {
                transform: rotate(-10deg);
            }
        }

.info-section {
            flex: 1;
            min-width: 300px;
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

h2 {
            color: #005b96;
            margin-bottom: 20px;
            font-size: 1.8rem;
        }

.features {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 40px;
        }

.feature-card {
            flex: 1;
            min-width: 250px;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }

.feature-card:hover {
            transform: translateY(-5px);
        }

.feature-icon {
            font-size: 2.5rem;
            color: #005b96;
            margin-bottom: 15px;
        }

h3 {
            color: #005b96;
            margin-bottom: 10px;
        }

footer {
            text-align: center;
            padding: 20px;
            margin-top: 50px;
            background-color: #005b96;
            color: white;
            border-radius: 0 0 8px 8px;
        }

@media (max-width: 768px) {
            .clinic-scene {
                height: 300px;
            }
            
            .doctor, .patient {
                transform: scale(0.8);
            }
            
            .doctor {
                left: 50px;
            }
            
            .patient {
                left: 150px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Industrial Medical Professional</h1>
            <p class="subtitle">Occupational Health Specialist at Work</p>
        </header>

<div class="info-section">
                <h2>Industrial Medical Services</h2>
                <p>Our industrial doctors provide comprehensive occupational health services to ensure worker safety and compliance with health regulations in industrial settings.</p>
                <p>Services include pre-employment screenings, periodic health examinations, emergency medical care, and workplace hazard assessments.</p>
                <p>Industrial physicians work closely with safety engineers and management to create healthier work environments.</p>
            </div>
        </div>

<div class="features">
            <div class="feature-card">
                <div class="feature-icon">🩺</div>
                <h3>Workplace Assessments</h3>
                <p>Evaluation of work environments to identify potential health hazards and recommend improvements.</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">📋</div>
                <h3>Health Monitoring</h3>
                <p>Regular health check-ups for employees exposed to occupational hazards.</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">🚨</div>
                <h3>Emergency Response</h3>
                <p>Immediate medical care for workplace injuries and illnesses.</p>
            </div>
        </div>

<footer>
            <p>© 2023 Industrial Medical Services | Occupational Health Professionals</p>
        </footer>
    </div>
</body>
</html>

Related Examples

Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

1 year ago

3.8k
Admin Panel
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

8 months ago

1.1k
Kost Management Dashboard UI modern
Here is the comprehensive design for the KostManagement dashboard, implemented with a focus on luxury, modern aesthetics, and the specific color palette provided.

Author:
Alif Bima Pradana

2 weeks ago

250
pange
pejdz

Author:
Anonymous

2 years ago

11.9k
Admin Panel
Source https://gist.github.com/visualval/8aaaad794256313fa2310b997e8a9b8f

Author:
SANJAY SINGH GARIYA

1 year ago

1.6k
E-Voting Dashboard
For You

Author:
Alif Bima Pradana

3 hours ago

4
Infinity Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN, responsif via mobile and tablet

Author:
Alif Bima Pradana

3 weeks ago

128
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

Author:
SHARIFUL ISLAM

1 year ago

1.6k
sidebar dash
sidebar dash

Author:
Omer fils ELENGA

1 month ago

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

Author:
Alif Bima Pradana

3 weeks ago

111
User dashboard

Author:
Anonymous

2 years ago

13.5k
Admin Panel
Source https://gist.github.com/visualval/8aaaad794256313fa2310b997e8a9b8f

Author:
Lior Medan

1 year ago

2.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components