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

Testimonial card with image

Author:
Simon Scheffer

2 years ago

11k
Invoice
Invoice

Author:
Ameth Galarcio

10 months ago

1.8k
Cards - Users Card DaddyBrasil
Users card grid list - daddybrasil.com.br

Author:
Casimiro Rocha

6 months ago

1.6k
Card Cartier Product
Card Based View of Cartier

Author:
Ameth Galarcio

2 months ago

412
Authentication form
Use this example to authenticate users with a login form using a phone number instead of an email address.

Author:
Md. Tofayel islam

1 year ago

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

Author:
Robert Chunga

5 months ago

1.7k
Profile Card
Responsive modern profile card

Author:
Rajesh Maheshwari

2 months ago

380
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Author:
Walid Ahmad

8 months ago

2.7k
Card-Product
Item or card to show products

Author:
Ameth Galarcio

11 months ago

2.7k
Product Card

Author:
Maxim

1 month ago

646
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

22.3k
Profile Card

Author:
Crimson

3 months ago

385

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ 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