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

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

less is more
less is more by salvator

Author:
Baraka Salvator

1 month ago

316
Call to Action Box

Author:
Aitrik Saha

6 months ago

1.1k
Pricing card
basic pricing card with single price

Author:
Amit Pachange

2 years ago

10.4k
Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

Author:
irahoza daniel

2 months ago

116
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

6 months ago

1.3k
Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Author:
Abhiraj

7 months ago

1.5k
Responsive cards with hover

Author:
Robert Chunga

1 year ago

2.4k
Card
Simple Card

Author:
Anonymous

4 months ago

622
Confirmation model

Author:
Mr Robot

2 years ago

12.7k
Deals of the Day - Exclusive Discounts!
Grab the best deals on top products with unbeatable discounts! Limited-time offers on premium gadgets, fashion, and more. Shop now and save big before the deal ends!

Author:
SHARIFUL ISLAM

5 months ago

639
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

1 month ago

144
What is Webby
A showcase feature

Author:
Developer Kwame

1 year ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components