Cards | seyed mohsen mousavi light dingo 21

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div
  class="relative rounded-xl overflow-hidden flex flex-col items-center shadow-lg bg-white font-Roboto-light"
>
  <div class="h-24 w-full bg-green-400"></div>
  <div class="top-16 z-10 flex items-center flex-col gap-4 px-5 py-5">
    <div class="-mt-20">
      <svg
        fill="#000000"
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        class="icon w-[4.7rem]"
        viewBox="0 0 1024 1024"
      >
        <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
        <g
          stroke-linejoin="round"
          stroke-linecap="round"
          id="SVGRepo_tracerCarrier"
        ></g>
        <g id="SVGRepo_iconCarrier">
          <path
            fill="#9DC6AF"
            d="M947.8 554.1c0 242-196.2 438.2-438.2 438.2S71.4 796.1 71.4 554.1c0-134.6 60.7-255.1 156.3-335.5 76.2-64.1 174.5-102.7 281.9-102.7 242 0 438.2 196.2 438.2 438.2z"
          ></path>