Home
Anonymous
Patient card

Patient card

This tailwind example is contributed by Anonymous, on 12-Jul-2024. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Anonymous

1.4k

8

Fork Fullscreen

<div
    class=" rounded-xl  hover:shadow-sm shadow-md border border-l-4 hover:border-black relative w-60  border-gray-200 pb-1 transition duration-200 hover:scale-105">
    
    <div class="p-2">
        <div class="relative w-52 h-40 mx-auto ">
            <img class="w-full h-full  rounded-lg  object-cover"
                src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg?t=st=1718453482~exp=1718457082~hmac=d1324646c11f156b66c71b8a6d005eef4d7514b810a16e8d6616653e02f7e45d&w=740"
                alt="">
            <div class="w-9 h-9 p-2 absolute right-2 -bottom-3 rounded-full  bg-slate-300  hover:to-blue-400 ">
                <img class="w-full h-full" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTngJNqeb-GMQIok8YgzIT_x9YRjGqocN38Su-puV12mP-mxpbemQomo0ICGuL5RhIygLY&usqp=CAU" alt="">
            </div>
        </div>

</div>
    <div class="">
        <div class="p-1.5 bg-black  w-44 rounded-tr-full rounded-br-full mt-2">
            <div class=" text-center">
                <p class="text-white text-sm font-medium tracking-wide"> Lindsay Walton</p>
            </div>
        </div>
        <div class="flex items-center justify-center gap-3 mt-4">
            <p class="text-slate-500 text-sm font-medium  tracking-wide ">Patient&nbsp;Visit :</p>
            <p class="text-black text-sm font-semibold text-center tracking-wide">Fever , Headache</p>
        </div>

<div class="w-full text-center mx-auto mt-3" routerLink="/reception/op-view">
            <button
                class=" border-indigo-500 bg-cyan-500 text-white rounded-md px-4 py-1.5 m-2 transition duration-500 ease select-none hover:bg-indigo-600 focus:outline-none focus:shadow-outline text-xs font-medium">
                View More
            </button>

</div>
    </div>
</div>

Related Examples

Card
Simple Card

Author:
Ashraf ali

4 months ago

673
Subcribe Card - Alert - Notification

Author:
ABDO-SY

3 months ago

401
Recipe card
A modern and responsive Tailwind CSS recipe card with image, ingredients, and instructions. Supports dark mode and mobile view.

Author:
Rajesh Pandey

1 month ago

114
Profile Card
User Profile Card with Name and Location

Author:
Anubhav Ranjan

8 months ago

1.5k
less is more
less is more by salvator

Author:
Baraka Salvator

4 hours ago

6
Cards section - Sport

Author:
ABDO-SY

3 months ago

1.2k
Card
Profile Card

Author:
Manuel Dala

1 month ago

354
Hotel rooms
A simple room overview

Author:
Matti

5 months ago

772
dismissible cookie banner with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.1k
Responsive Cards

Author:
Anonymous

1 year ago

1.2k
Profile card

Author:
Jaber Zarif

1 year ago

1.9k
Coupon code card
Display Special Offer with Coupon Code

Author:
Dipti narayan

1 year ago

10.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1