Home
Crimson
Profile Card

Profile Card

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

Card Profile

Author Crimson

1.1k

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