MEDICAL profecial #esther developer

medical care

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

Dashboard

Author Nirere Esther

Tailwind v3.4 804 10

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

Card kpi Chart
Targetas kpi con graficas

Raul antonio de la cruz hernandez

10 months ago

1.4k
dashboard layout

AKASH GANDHAR

1 year ago

2.2k
Taskify Premium Task Management FREE
Website Task management modern and responsif

Alif Bima Pradana

7 months ago

771
sidebar orange colour

Abhishek Kumar

1 year ago

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

ABDESLAMI ACHRAF

1 year ago

4.5k
Adim dashboard
The dashboard includes practical admin components like user management, revenue tracking, order management, system monitoring, and performance metrics - all styled with vibrant colors and modern gradients using Tailwind CSS!

ishimwe prince

1 year ago

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

Alif Bima Pradana

7 months ago

1.1k
Best Chatting dashboard
create a modern WhatsApp-like chat dashboard with 3D effects, animations, and a sleek design. This will be a static view showcasing the interface with Nicole Shalom as the developer.

Nicole Shalom

1 year ago

1.8k
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Lekhraj Ghimire

1 year ago

2.4k
sidebar dash
sidebar dash

Omer fils ELENGA

8 months ago

953
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.

SHARIFUL ISLAM

1 year ago

2.5k
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k