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

2k

9

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

Customer testimonial card
Responsive user testimonial card with image

Author:
Arya

3 years ago

12.1k
beautifull project Item

Author:
Akram Khan

1 year ago

2.9k
Tailwind image slider
slider with navigation buttons and info about image

Author:
Anonymous

2 years ago

20.8k
Semi transparent Info card

Author:
Prajwal Hallale

2 years ago

11.1k
card

Author:
Raul antonio de la cruz hernandez

1 month ago

45
Video card
Video card component for tailwind css

Author:
Rajesh kulkarni

3 years ago

17.6k
card
card

Author:
5upreme505

1 year ago

1.5k
Tailwind AoPS Demo
Starter code for an interactive Tailwind Demo

Author:
Joseph Barron

1 year ago

4.1k
Feature Card

Author:
Md. Tofayel islam

1 year ago

1.7k
Card
Card with Likes and download Button

Author:
Mrunal Solkar

2 years ago

10.8k
Animated Profile Card
Animated profile card with profile completion circle

Author:
Shivam Vishwakarma

1 year ago

1.5k
Profile card

Author:
Jaber Zarif

1 year ago

2.5k

Explore components by Tags

Didn't find component you were looking for?

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

© 2026 TailwindFlex. All Rights Reserved.

v1.12