President Profile Card - Copy this Html, Tailwind Component to your project
mejora-el-diseño,-centrando-el-enfoque-en-el-presidente:<!DOCTYPE-html>-<html-lang="en">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>Leadership-Team</title>-<script-src="https://cdn.tailwindcss.com"></script>-</head>-<body-class="bg-gradient-to-br-from-gray-50-to-gray-100">-<div-class="container-mx-auto-px-4-py-8">-<div-class="bg-white-bg-opacity-90-backdrop-blur-sm-rounded-xl-shadow-lg-p-8-max-w-6xl-mx-auto">-<h2-class="text-3xl-font-bold-text-gray-900-mb-8-text-center-relative-after:content-['']-after:absolute-after:bottom-0-after:left-1/2-after:-translate-x-1/2-after:w-24-after:h-1-after:bg-blue-500-after:rounded-full-pb-4">Leadership-Team</h2>-<div-class="grid-grid-cols-1-md:grid-cols-2-gap-6">-<div-class="flex-items-center-space-x-6-border-l-4-border-blue-500-pl-4-py-4-bg-white-rounded-lg-shadow-sm-hover:shadow-md-transition-all-duration-300-hover:scale-102-hover:bg-blue-50">-<img-src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3"-alt="President-Photo"-class="w-20-h-20-rounded-full-object-cover-ring-4-ring-blue-100">-<div>-<span-class="text-sm-text-blue-600-font-semibold">President</span>-<h3-class="text-xl-font-bold-text-gray-900">Luisa-Alejandra-Morales-Ortega</h3>-<p-class="text-gray-500-text-sm-mt-1">Executive-Leadership</p>-</div>-</div>-<div-class="border-l-4-border-purple-500-pl-4-py-4-bg-white-rounded-lg-shadow-sm-hover:shadow-md-transition-all-duration-300-hover:scale-102-hover:bg-purple-50">-<span-class="text-sm-text-purple-600-font-semibold">Vice-President</span>-<h3-class="text-lg-font-bold-text-gray-900-mt-1">Tania-María-Martínez-Castro</h3>-<p-class="text-gray-500-text-sm-mt-1">Executive-Management</p>-</div>-<div-class="border-l-4-border-green-500-pl-4-py-4-bg-white-rounded-lg-shadow-sm-hover:shadow-md-transition-all-duration-300-hover:scale-102-hover:bg-green-50">-<span-class="text-sm-text-green-600-font-semibold">Treasurer</span>-<h3-class="text-lg-font-bold-text-gray-900-mt-1">William-Fernando-León-Rodríguez</h3>-<p-class="text-gray-500-text-sm-mt-1">Financial-Management</p>-</div>-<div-class="border-l-4-border-amber-500-pl-4-py-4-bg-white-rounded-lg-shadow-sm-hover:shadow-md-transition-all-duration-300-hover:scale-102-hover:bg-amber-50">-<span-class="text-sm-text-amber-600-font-semibold">Secretary</span>-<h3-class="text-lg-font-bold-text-gray-900-mt-1">Alexandra-Sofía-Ríos-Muñoz</h3>-<p-class="text-gray-500-text-sm-mt-1">Administrative-Support</p>-</div>-<div-class="border-l-4-border-red-500-pl-4-py-4-bg-white-rounded-lg-shadow-sm-hover:shadow-md-transition-all-duration-300-hover:scale-102-hover:bg-red-50-md:col-span-2">-<span-class="text-sm-text-red-600-font-semibold">Fiscal</span>-<h3-class="text-lg-font-bold-text-gray-900-mt-1">Franklin-Alejandro-Mena-Castro</h3>-<p-class="text-gray-500-text-sm-mt-1">Oversight-Committee</p>-</div>-</div>-</div>-</div>-</body>-</html>
