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

304

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.4k
sidebar orange colour

Author:
Abhishek Kumar

2 months ago

208
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!

Author:
ishimwe prince

5 months ago

1.8k
sidebar
This sidebar implementation includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support 4. Beautiful animations and effects: 1. Slide-in animation when opening the sidebar 2. Fade-in animation for menu items with staggered delays 3. Hover effects on menu items with underline animation 4. Smooth color transitions 5. SVG icons for menu items 6. User profile section at the bottom of the sidebar 7. Close button for easy dismissal on mobile 8. Main content area with a toggle button for the sidebar 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The sidebar has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Menu items have hover effects with background color changes and underline animations - Icons change color on hover - The sidebar slides in from the left with a smooth animation - Menu items fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The layout is responsive, with the sidebar hiding off-screen on mobile and a toggle button to show/hide it This implementation provides a visually appealing and functional sidebar with various animations and effects, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions.

Author:
nejaa badr

1 year ago

4k
Admin panel with collapsible menus

Author:
Rajesh Maheshwari

8 months ago

4.2k
User Profile
This is some information about the user.

Author:
gidy

5 months ago

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

Author:
Lior Medan

1 year ago

2.6k
Boilerplate for Admin Panal

Author:
Brandon D

3 years ago

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

Author:
Lekhraj Ghimire

4 months ago

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

Author:
Mr Robot

3 years ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

511
Acode Master - FB & WhatsApp UI Combo
Description (meta description) ni tag ikoreshwa mu mutwe (head) wa HTML igaragaza mu ncamake icyo urubuga cyangwa urupapuro rwawe ruvuga. Iyi description ikoreshwa cyane na search engines (nka Google) mu kwerekana summary y’urubuga mu bisubizo by’ubushakashatsi.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

503

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components