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

2.1k

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

Product hunt showcase section

Author:
Leon Bachmann

3 years ago

10.6k
Chats Screen in neomorphism

Author:
Akram Khan

1 year ago

2.7k
Product features cards

Author:
Henrik R.

1 year ago

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

Author:
Shivam Vishwakarma

1 year ago

1.7k
Call to Action Box

Author:
Aitrik Saha

1 year ago

1.8k
A product card with size selector
Using alpine it shows a size selector when clicking in cart

Author:
farid

1 year ago

1.4k
Feature Showcase + Cards
Responsive section with cards aligned using grid layout.

Author:
ABDO-SY

1 year ago

2.4k
Card KPI
Targetas ahora con un grafico

Author:
Raul antonio de la cruz hernandez

3 months ago

676
Product review card

Author:
Moriba Traore

3 years ago

15.4k
Simple Card with Image
Horizontal card

Author:
Prem..

3 years ago

9.5k
MENU OMERLINKS
MENU OMERLINKS

Author:
Omer fils ELENGA

1 month ago

142
Features

Author:
Michael Andreuzza

1 year ago

5.3k

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