Profile Card

This tailwind example is contributed by Crimson, on 14-Jan-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Author box, User information

Card Profile

Author Crimson

Tailwind v3.4 2k 3

Fork Fullscreen

<body class="h-screen flex items-center justify-center p-4">
    
    <div class="relative group">
        
        <div class="absolute -inset-1 bg-gradient-to-r from-pink-600 to-purple-600 rounded-2xl blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-tilt"></div>
        
        
        <div class="relative px-7 py-6 bg-black/80 backdrop-blur-xl rounded-xl leading-none flex flex-col items-center max-w-sm">
            
            <div class="absolute top-4 right-4 flex items-center">
                <div class="h-3 w-3 bg-green-400 rounded-full animate-pulse"></div>
                <span class="text-green-400 text-xs ml-1.5">ONLINE</span>
            </div>

<div class="relative group">
                <div class="absolute -inset-0.5 bg-gradient-to-r from-pink-600 to-purple-600 rounded-full blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-tilt"></div>
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                         class="w-32 h-32 rounded-full object-cover transform transition-all duration-500 group-hover:scale-110 group-hover:rotate-6"
                         alt="Profile">
                </div>
            </div>

<div class="mt-6 text-center">
                <h2 class="text-2xl font-bold bg-gradient-to-r from-pink-500 to-violet-500 text-transparent bg-clip-text">John Doe</h2>
                <p class="text-purple-400 font-medium mt-1">Creative Technologist</p>
                <p class="text-gray-300 mt-2 text-sm">Crafting digital experiences at the intersection of design and code</p>
            </div>

<div class="flex justify-between w-full mt-6 px-4">
                <div class="text-center transform transition-all duration-300 hover:scale-110">
                    <p class="text-2xl font-bold bg-gradient-to-r from-pink-500 to-violet-500 text-transparent bg-clip-text">1.2k</p>
                    <p class="text-gray-400 text-xs">FOLLOWERS</p>
                </div>
                <div class="text-center transform transition-all duration-300 hover:scale-110">
                    <p class="text-2xl font-bold bg-gradient-to-r from-pink-500 to-violet-500 text-transparent bg-clip-text">86</p>
                    <p class="text-gray-400 text-xs">PROJECTS</p>
                </div>
                <div class="text-center transform transition-all duration-300 hover:scale-110">
                    <p class="text-2xl font-bold bg-gradient-to-r from-pink-500 to-violet-500 text-transparent bg-clip-text">4.8</p>
                    <p class="text-gray-400 text-xs">RATING</p>
                </div>
            </div>

<button class="relative mt-8 w-full group/btn">
                <div class="absolute -inset-0.5 bg-gradient-to-r from-pink-600 to-purple-600 rounded-lg blur opacity-75 group-hover/btn:opacity-100 transition duration-1000 group-hover:duration-200"></div>
                <div class="relative px-6 py-3 bg-black rounded-lg leading-none flex items-center justify-center">
                    <span class="text-gray-200 group-hover/btn:text-white transition duration-200">Connect</span>
                </div>
            </button>

<div class="flex flex-wrap gap-2 mt-6 justify-center">
                <span class="px-3 py-1 text-xs bg-purple-900/50 text-purple-300 rounded-full">React</span>
                <span class="px-3 py-1 text-xs bg-blue-900/50 text-blue-300 rounded-full">TypeScript</span>
                <span class="px-3 py-1 text-xs bg-teal-900/50 text-teal-300 rounded-full">Tailwind</span>
            </div>
        </div>
    </div>
</body>
</html>

Related Examples

Profile card
Profile card with social icons

Krishna Gudpalle

4 years ago

13.6k
User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Prashant

4 years ago

65.5k
User profile card with Cover Image

Noob

3 years ago

33.8k
User Profile Card
Useful for testimonials and reviews section

Abhijit Sen

3 years ago

11.2k
Minimal Profile card

Abhijit Sen

3 years ago

12.3k
Responsive user card with tailwind

Gopi Yadav

3 years ago

11.9k
Author box

Mr Robot

3 years ago

12.5k
Profile card

Mr Robot

3 years ago

13.3k
User profile card

Mr Robot

3 years ago

11.8k
Testimonial card with image

Simon Scheffer

3 years ago

12.8k
Profile Card
Show more details on hover

Tamani Phiri

3 years ago

15.2k
Author card
Author card for giving credit to the author of the Blog/Article. It has social media icons and user image

Prajwal Hallale

3 years ago

7.6k