<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Cards with Animated Gradient Borders</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
animation: {
'gradient-x': 'gradient-x 3s ease infinite',
'gradient-xy': 'gradient-xy 4s ease infinite',
'gradient-spin': 'gradient-spin 3s linear infinite',
'gradient-pulse': 'gradient-pulse 2s ease-in-out infinite',
'float': 'float 3s ease-in-out infinite',
'glow': 'glow 2s ease-in-out infinite alternate',
},
keyframes: {
'gradient-x': {
'0%, 100%': {
'background-size': '200% 200%',
'background-position': 'left center'
},
'50%': {
'background-size': '200% 200%',
'background-position': 'right center'
}
},
'gradient-xy': {
'0%, 100%': {
'background-size': '400% 400%',
'background-position': 'left center'
},
'25%': {
'background-size': '400% 400%',
'background-position': 'left top'
},
'50%': {
'background-size': '400% 400%',
'background-position': 'right top'
},
'75%': {
'background-size': '400% 400%',
'background-position': 'right center'
}
},
'gradient-spin': {
'0%': { 'background-position': '0% 0%' },
'25%': { 'background-position': '100% 0%' },
'50%': { 'background-position': '100% 100%' },
'75%': { 'background-position': '0% 100%' },
'100%': { 'background-position': '0% 0%' }
},
'gradient-pulse': {
'0%, 100%': {
'background-size': '200% 200%',
'opacity': '0.8'
},
'50%': {
'background-size': '300% 300%',
'opacity': '1'
}
},
'float': {
'0%, 100%': { transform: 'translateY(0px)' },
'50%': { transform: 'translateY(-10px)' }
},
'glow': {
'0%': {
'box-shadow': '0 0 5px rgba(168, 85, 247, 0.4), 0 0 10px rgba(168, 85, 247, 0.2)'
},
'100%': {
'box-shadow': '0 0 20px rgba(168, 85, 247, 0.8), 0 0 30px rgba(168, 85, 247, 0.4)'
}
}
},
backgroundSize: {
'200%': '200%',
'300%': '300%',
'400%': '400%'
}
}
}
}
</script>
</head>
<body class="bg-gray-900 min-h-screen p-4 md:p-8">
<div class="max-w-7xl mx-auto">
<!-- Header -->
<div class="text-center mb-12">
<h1 class="text-4xl font-bold text-white mb-4">Profile Cards with Animated Borders</h1>
<p class="text-gray-300 text-lg">Showcase your team with stunning gradient animations</p>
</div>
<!-- Premium Profile Card -->
<section class="mb-16">
<h2 class="text-2xl font-bold text-white mb-8 text-center">Premium Profile Card</h2>
<div class="max-w-sm mx-auto relative group">
<!-- Animated glow effect -->
<div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 rounded-xl
opacity-20 group-hover:opacity-100 transition-all duration-500
group-hover:animate-gradient-xy blur-sm bg-400%"></div>
<!-- Card content -->
<div class="relative bg-gray-900 rounded-xl p-6 ring-1 ring-gray-800 group-hover:ring-purple-500/50 transition-all duration-300">
<!-- Profile Image -->
<div class="relative w-20 h-20 mx-auto mb-4">
<div class="absolute -inset-1 bg-gradient-to-r from-pink-500 to-purple-500 rounded-full animate-gradient-spin bg-200%"></div>
<div class="relative w-20 h-20 rounded-full bg-gray-800 overflow-hidden ring-4 ring-gray-900">
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face"
alt="Alex Johnson"
class="w-full h-full object-cover">
</div>
</div>
<!-- Content -->
<div class="text-center">
<h3 class="text-xl font-bold text-white mb-1">Alex Johnson</h3>
<p class="text-purple-400 font-medium mb-3">Senior Developer</p>
<p class="text-gray-300 text-sm leading-relaxed mb-4">
Building beautiful interfaces with modern web technologies.
Passionate about user experience and clean code.
</p>
<!-- Stats -->
<div class="grid grid-cols-3 gap-4 mb-6">
<div class="bg-gray-800/50 rounded-lg p-3">
<div class="text-white font-bold text-lg">127</div>
<div class="text-gray-400 text-xs">Projects</div>
</div>
<div class="bg-gray-800/50 rounded-lg p-3">
<div class="text-white font-bold text-lg">2.4k</div>
<div class="text-gray-400 text-xs">Followers</div>
</div>
<div class="bg-gray-800/50 rounded-lg p-3">
<div class="text-white font-bold text-lg">4.9</div>
<div class="text-gray-400 text-xs">Rating</div>
</div>
</div>
<!-- Social Links -->
<div class="flex justify-center space-x-4">
<a href="#" class="relative group/social">
<div class="absolute -inset-1 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full
opacity-0 group-hover/social:opacity-100 transition-opacity animate-pulse bg-200%"></div>
<div class="relative bg-gray-800 p-2 rounded-full group-hover/social:bg-gray-700 transition-colors">
<svg class="w-5 h-5 text-blue-400" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
</svg>
</div>
</a>
<a href="#" class="relative group/social">
<div class="absolute -inset-1 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full
opacity-0 group-hover/social:opacity-100 transition-opacity animate-pulse bg-200%"></div>
<div class="relative bg-gray-800 p-2 rounded-full group-hover/social:bg-gray-700 transition-colors">
<svg class="w-5 h-5 text-purple-400" fill="currentColor" viewBox="0 0 24 24">
<path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
</svg>
</div>
</a>
<a href="#" class="relative group/social">
<div class="absolute -inset-1 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full
opacity-0 group-hover/social:opacity-100 transition-opacity animate-pulse bg-200%"></div>
<div class="relative bg-gray-800 p-2 rounded-full group-hover/social:bg-gray-700 transition-colors">
<svg class="w-5 h-5 text-green-400" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Team Grid -->
<section class="mb-16">
<h2 class="text-2xl font-bold text-white mb-8 text-center">Team Showcase</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Team Member 1 -->
<div class="relative group">
<div class="absolute -inset-0.5 bg-gradient-to-r from-pink-500 to-purple-500 rounded-xl
opacity-0 group-hover:opacity-100 transition-all duration-300
group-hover:animate-gradient-x blur-sm bg-200%"></div>
<div class="relative bg-gray-900 rounded-xl p-6 ring-1 ring-gray-800
group-hover:ring-pink-500/30 transition-all duration-300 animate-float">
<div class="text-center">
<div class="relative w-16 h-16 mx-auto mb-4">
<div class="absolute -inset-0.5 bg-gradient-to-r from-pink-500 to-red-500 rounded-full animate-gradient-pulse bg-200%"></div>
<div class="relative w-16 h-16 rounded-full bg-gray-800 overflow-hidden ring-2 ring-gray-900">
<img src="https://images.unsplash.com/photo-1494790108755-2616b612b47c?w=150&h=150&fit=crop&crop=face"
alt="Sarah Wilson" class="w-full h-full object-cover">
</div>
</div>
<h3 class="text-lg font-bold text-white mb-1">Sarah Wilson</h3>
<p class="text-pink-400 text-sm font-medium mb-2">UI/UX Designer</p>
<p class="text-gray-300 text-sm mb-4">Creating intuitive and beautiful user experiences</p>
<div class="flex justify-center space-x-3">
<span class="text-xs bg-pink-500/20 text-pink-300 px-2 py-1 rounded-full">Figma</span>
<span class="text-xs bg-purple-500/20 text-purple-300 px-2 py-1 rounded-full">Adobe XD</span>
</div>
</div>
</div>
</div>
<!-- Team Member 2 -->
<div class="relative group">
<div class="absolute -inset-0.5 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl
opacity-0 group-hover:opacity-100 transition-all duration-300
group-hover:animate-gradient-x blur-sm bg-200%"></div>
<div class="relative bg-gray-900 rounded-xl p-6 ring-1 ring-gray-800
group-hover:ring-blue-500/30 transition-all duration-300" style="animation-delay: 1s;">
<div class="text-center">
<div class="relative w-16 h-16 mx-auto mb-4">
<div class="absolute -inset-0.5 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full animate-gradient-spin bg-200%"></div>
<div class="relative w-16 h-16 rounded-full bg-gray-800 overflow-hidden ring-2 ring-gray-900">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face"
alt="Mike Chen" class="w-full h-full object-cover">
</div>
</div>
<h3 class="text-lg font-bold text-white mb-1">Mike Chen</h3>
<p class="text-blue-400 text-sm font-medium mb-2">Backend Engineer</p>
<p class="text-gray-300 text-sm mb-4">Scalable systems and robust APIs</p>
<div class="flex justify-center space-x-3">
<span class="text-xs bg-blue-500/20 text-blue-300 px-2 py-1 rounded-full">Node.js</span>
<span class="text-xs bg-cyan-500/20 text-cyan-300 px-2 py-1 rounded-full">Docker</span>
</div>
</div>
</div>
</div>
<!-- Team Member 3 -->
<div class="relative group">
<div class="absolute -inset-0.5 bg-gradient-to-r from-green-500 to-emerald-500 rounded-xl
opacity-0 group-hover:opacity-100 transition-all duration-300
group-hover:animate-gradient-xy blur-sm bg-400%"></div>
<div class="relative bg-gray-900 rounded-xl p-6 ring-1 ring-gray-800
group-hover:ring-green-500/30 transition-all duration-300 animate-float" style="animation-delay: 2s;">
<div class="text-center">
<div class="relative w-16 h-16 mx-auto mb-4">
<div class="absolute -inset-0.5 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full animate-gradient-x bg-200%"></div>
<div class="relative w-16 h-16 rounded-full bg-gray-800 overflow-hidden ring-2 ring-gray-900">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&crop=face"
alt="Emma Davis" class="w-full h-full object-cover">
</div>
</div>
<h3 class="text-lg font-bold text-white mb-1">Emma Davis</h3>
<p class="text-green-400 text-sm font-medium mb-2">Product Manager</p>
<p class="text-gray-300 text-sm mb-4">Connecting user needs with business goals</p>
<div class="flex justify-center space-x-3">
<span class="text-xs bg-green-500/20 text-green-300 px-2 py-1 rounded-full">Strategy</span>
<span class="text-xs bg-emerald-500/20 text-emerald-300 px-2 py-1 rounded-full">Analytics</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Feature Cards -->
<section class="mb-16">
<h2 class="text-2xl font-bold text-white mb-8 text-center">Feature Showcase</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Glassmorphism Card -->
<div class="relative group">
<div class="absolute -inset-1 bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500
rounded-2xl opacity-75 group-hover:opacity-100 transition-all duration-300
animate-gradient-x blur-sm bg-200%"></div>
<div class="relative backdrop-blur-xl bg-white/10 border border-white/20 rounded-2xl p-8
shadow-2xl group-hover:bg-white/15 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-2xl"></div>
<div class="relative">
<div class="w-12 h-12 bg-gradient-to-r from-pink-500 to-purple-500 rounded-xl flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
</svg>
</div>
<h3 class="text-2xl font-bold text-white mb-4">Glassmorphism Design</h3>
<p class="text-white/80 mb-6 leading-relaxed">
Combining frosted glass effects with animated gradient borders creates
stunning visual depth and modern aesthetics.
</p>
<div class="flex space-x-4">
<div class="flex-1 bg-white/5 rounded-lg p-4 border border-white/10">
<div class="text-white/60 text-sm">Performance</div>
<div class="text-white text-xl font-bold">98%</div>
</div>
<div class="flex-1 bg-white/5 rounded-lg p-4 border border-white/10">
<div class="text-white/60 text-sm">Satisfaction</div>
<div class="text-white text-xl font-bold">4.9/5</div>
</div>
</div>
</div>
</div>
</div>
<!-- Feature Highlight -->
<div class="relative group overflow-hidden rounded-2xl">
<div class="absolute inset-0 bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900
animate-gradient-xy bg-400%"></div>
<div class="absolute inset-0 bg-gradient-to-r from-purple-500/20 to-pink-500/20
rounded-2xl group-hover:from-purple-500/40 group-hover:to-pink-500/40
transition-all duration-500"></div>
<div class="relative p-8">
<div class="flex items-center mb-6">
<div class="w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-500
rounded-lg flex items-center justify-center mr-4">
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-white">Advanced Features</h3>
</div>
<p class="text-gray-300 mb-6 leading-relaxed">
Streamline your workflow with intelligent systems that adapt to your team's
unique processes and priorities.
</p>
<div class="space-y-3">
<div class="flex items-center text-purple-300">
<svg class="w-4 h-4 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"></path>
</svg>
<span>Real-time collaboration</span>
</div>
<div class="flex items-center text-purple-300">
<svg class="w-4 h-4 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"></path>
</svg>
<span>Advanced analytics</span>
</div>
<div class="flex items-center text-purple-300">
<svg class="w-4 h-4 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"></path>
</svg>
<span>Seamless integrations</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Interactive Demo -->
<section class="mb-16">
<h2 class="text-2xl font-bold text-white mb-8 text-center">Interactive Demo</h2>
<div class="max-w-2xl mx-auto">
<div class="relative group cursor-pointer">
<div class="absolute -inset-1 bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500
rounded-2xl opacity-30 group-hover:opacity-100 transition-all duration-500
group-hover:animate-gradient-xy blur group-active:blur-sm bg-400%"></div>
<div class="relative bg-gray-900 rounded-2xl p-8 ring-1 ring-gray-800
group-hover:ring-transparent transition-all duration-300
transform group-hover:scale-[1.02] group-active:scale-[0.98]">
<div class="text-center">
<div class="w-16 h-16 bg-gradient-to-r from-yellow-400 to-red-500 rounded-2xl
flex items-center justify-center mx-auto mb-6 group-hover:animate-glow">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h8m-10 5a7 7 0 1114 0H5z"></path>
</svg>
</div>
<h3 class="text-2xl font-bold text-white mb-4">Try It Yourself</h3>
<p class="text-gray-300 mb-6 leading-relaxed">
Click this card to see how multiple animation effects can work together.
Notice the blur effect, scaling, and gradient changes.
</p>
<div class="inline-flex items-center text-yellow-400 font-medium">
<span>Click to interact</span>
<svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform"
fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Code Example -->
<div class="mt-16 p-1 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-lg animate-gradient-x bg-200%">
<div class="bg-gray-900 rounded-lg p-6">
<h3 class="text-xl font-bold text-white mb-4">💡 Implementation Tips</h3>
<div class="bg-gray-800 rounded-lg p-4 overflow-x-auto mb-4">
<pre class="text-sm text-gray-300"><code><!-- Basic Profile Card with Animated Border -->
<div class="relative group">
<div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-pink-600
rounded-xl opacity-20 group-hover:opacity-100
animate-gradient-xy blur-sm"></div>
<div class="relative bg-gray-900 rounded-xl p-6">
<!-- Profile content -->
</div>
</div></code></pre>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
<div>
<h4 class="text-purple-400 font-semibold mb-2">Key Techniques:</h4>
<ul class="text-gray-300 space-y-1">
<li>• Layered div structure for border effect</li>
<li>• CSS transforms for smooth animations</li>
<li>• Hover states for interactivity</li>
<li>• Blur effects for depth</li>
</ul>
</div>
<div>
<h4 class="text-pink-400 font-semibold mb-2">Performance Tips:</h4>
<ul class="text-gray-300 space-y-1">
<li>• Use transform over position changes</li>
<li>• Implement will-change for animations</li>
<li>• Respect prefers-reduced-motion</li>
<li>• Test on lower-end devices</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.