OliviaMIA-Web-Astro/src/components/CardUser.astro

---
interface Props {
  puesto: string;
  nombre: string;
  imagen?: string;
}

const { puesto, imagen, nombre } = Astro.props;
---

<a
  class="w-full h-full flex flex-col p-5 space-y-4 bg-stone-50 border-2 border-stone-50 rounded-md shadow-md shadow-slate-400"
>
  <div class="flex flex-row justify-center items-center">
    <div class="w-80 h-80 overflow-hidden rounded-full">
      <img class="w-full h-full object-cover object-center" src={imagen} />
    </div>
  </div>
  <div class="w-full">
    <h2 class="text-xl text-gray-400">
      {puesto}
    </h2>
  </div>
  <hr class="my-2" />
  <div class="flex flex-col">
    <p class="text-start text-lg font-semibold">{nombre}</p>
  </div>
</a>