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

277

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

IMDB score and votes box

Author:
Darius G

2 years ago

8.5k
cards
cards with background animation

Author:
Anonymous

2 years ago

11.2k
KPI Cards
estilo Shopify / Stripe

Author:
Raul antonio de la cruz hernandez

1 week ago

39
Issue card
card designed to display the details of a technical issue

Author:
ABDO-SY

9 months ago

2k
Advanced phone verification

Author:
Md. Tofayel islam

1 year ago

2.2k
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Author:
Ragnar lodbrok

1 year ago

1.5k
Gridaient Card Information Section
a card in neon design

Author:
Akram Khan

1 year ago

2.3k
alert
html , css

Author:
Hacker Development

6 months ago

981
Card
Card

Author:
Aman kumar

1 year ago

2.6k
Tailwind Flex Component: Responsive Testimonial Section UI
A clean, modern, and fully responsive Testimonial Section built using Tailwind CSS and Flexbox. Ideal for portfolios, agency websites, SaaS landing pages, or any modern UI project. This reusable component includes user images, job titles, and quotes—perfect for showcasing feedback and adding trust to your UI.

Author:
Muhammad Umair Arshad

6 months ago

718
card
simple card for begin

Author:
Omer fils ELENGA

9 months ago

2k
card
best responsive tailwind card

Author:
irahoza daniel

6 months ago

563

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components