Home
Nishimwe Jeanine
medical care

medical care

It will help us get medical care quickly using a card and make it possible for all of us, Rwandans and other people in other countries, to have a better life.

This tailwind example is contributed by Nishimwe Jeanine, on 26-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Nishimwe Jeanine

293

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Medical Card Services</title>
    <style>
        /* CSS Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

body {
            background-color: #f5f9ff;
            color: #333;
            line-height: 1.6;
        }

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

header {
            text-align: center;
            margin-bottom: 30px;
        }

h1 {
            color: #2c3e50;
            margin-bottom: 10px;
        }

.card-simulator {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 25px;
            margin-bottom: 30px;
        }

.card-front {
            background: linear-gradient(135deg, #3498db, #2c3e50);
            color: white;
            border-radius: 10px;
            padding: 20px;
            position: relative;
            height: 200px;
            margin-bottom: 20px;
        }

.card-logo {
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 30px;
        }

.card-chip {
            width: 50px;
            height: 40px;
            background: #ffd700;
            border-radius: 5px;
            margin-bottom: 20px;
        }

.card-number {
            letter-spacing: 2px;
            font-size: 20px;
            margin-bottom: 20px;
        }

.card-details {
            display: flex;
            justify-content: space-between;
        }

.card-holder, .card-expiry {
            font-size: 14px;
        }

.card-expiry {
            text-align: right;
        }

.scan-area {
            text-align: center;
            padding: 30px;
            border: 2px dashed #3498db;
            border-radius: 10px;
            margin-bottom: 20px;
            cursor: pointer;
            transition: all 0.3s;
        }

.scan-area:hover {
            background-color: #eaf2ff;
        }

.scan-icon {
            font-size: 50px;
            color: #3498db;
            margin-bottom: 15px;
        }

.services {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

.service {
            background: white;
            border-radius: 10px;
            padding: 15px;
            text-align: center;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
            cursor: pointer;
        }

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

.service-icon {
            font-size: 30px;
            margin-bottom: 10px;
            color: #3498db;
        }

.instructions {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-top: 30px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }

.instructions h3 {
            margin-bottom: 15px;
            color: #2c3e50;
        }

.instructions ol {
            padding-left: 20px;
        }

.instructions li {
            margin-bottom: 10px;
        }

button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
            width: 100%;
            margin-top: 10px;
        }

button:hover {
            background-color: #2980b9;
        }

@media (max-width: 600px) {
            .services {
                grid-template-columns: 1fr;
            }
            
            .card-number {
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Medical Card Services</h1>
            <p>Use your health insurance card to access medical services</p>
        </header>

<div class="card-simulator">
            <h2>Your Medical Card</h2>
            <div class="card-front">
                <div class="card-logo">HEALTHCARE PLUS</div>
                <div class="card-chip"></div>
                <div class="card-number">•••• •••• •••• 1234</div>
                <div class="card-details">
                    <div class="card-holder">JOHN DOE</div>
                    <div class="card-expiry">08/25</div>
                </div>
            </div>
        </div>

<div class="scan-area">
            <div class="scan-icon">⌨️</div>
            <h3>Scan or Enter Card Details</h3>
            <p>Tap to scan your medical card or enter details manually</p>
        </div>

<div class="services">
            <div class="service">
                <div class="service-icon">🏥</div>
                <h3>Find a Doctor</h3>
                <p>Search for in-network healthcare providers</p>
            </div>
            <div class="service">
                <div class="service-icon">💊</div>
                <h3>Pharmacy</h3>
                <p>Get prescription medications</p>
            </div>
            <div class="service">
                <div class="service-icon">🏥</div>
                <h3>Emergency Care</h3>
                <p>Locate nearby emergency facilities</p>
            </div>
            <div class="service">
                <div class="service-icon">📄</div>
                <h3>Benefits</h3>
                <p>View your coverage details</p>
            </div>
        </div>

<button id="verifyBtn">Verify Coverage</button>

<div class="instructions">
            <h3>How to Use Your Medical Card</h3>
            <ol>
                <li>Present your card at any in-network healthcare provider</li>
                <li>For prescriptions, show your card at the pharmacy</li>
                <li>In emergencies, provide your card number to hospital staff</li>
                <li>Keep your card with you at all times</li>
                <li>Report lost or stolen cards immediately</li>
            </ol>
        </div>
    </div>

document.querySelector('.scan-area').addEventListener('click', function() {
            alert('Please position your card in the camera view or enter details manually.');
        });
    </script>
</body>
</html>

Related Examples

Responsive cards with hover

Author:
Robert Chunga

1 year ago

2.7k
Card KPI
Targetas

Author:
Raul antonio de la cruz hernandez

1 month ago

325
Responsive Grid with Featured image

Author:
_Amar_

3 years ago

12.4k
pricing card
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Ahmath S.

3 months ago

557
Card
Simple Card

Author:
Ashraf ali

10 months ago

1.6k
Card blog
Targeta para blog

Author:
Raul antonio de la cruz hernandez

1 month ago

124
google ui cards
google ui cards

Author:
Anonymous

2 years ago

9.7k
Auto-Flipping 3D Profile Card with Tailwind CSS
This project showcases a 3D auto-flipping profile card built with HTML, Tailwind CSS, and vanilla JavaScript. The front side displays the user’s photo, name, and role, while the back side reveals contact information. The card flips automatically every few seconds to add a dynamic, engaging feel—perfect for portfolios or personal websites.

Author:
irahoza daniel

7 months ago

670
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

1 year ago

2.1k
Card animate

Author:
Raul antonio de la cruz hernandez

10 months ago

1.3k
Linkedin Add to your feed Clone
Linkedin Add to your feed Clone

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

3.4k
Info cards

Author:
Samuel Dawson

2 years ago

10.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components