Glassmorphism Profile Card

Diseño Web (React + Tailwind)

Este componente utiliza filtros de fondo de CSS modernos para lograr el efecto de cristal.

Código del Componente

const ProfileCard = () => (
  <div className="p-8 rounded-[2.5rem] bg-white/10 border border-white/20 backdrop-blur-xl shadow-2xl max-w-sm">
    <img src="/avatar.jpg" className="w-24 h-24 rounded-full border-4 border-primary-500/30 mb-6" />
    <h3 className="text-2xl font-bold text-white mb-2">Alex Rivera</h3>
    <p className="text-slate-300 mb-6">Senior Product Designer focusing on interactive experiences.</p>
    <button className="w-full py-3 bg-primary-600 hover:bg-primary-700 text-white font-bold rounded-2xl transition-all">
      Follow
    </button>
  </div>
);