Cards | SmookyDev wonderful octopus 16

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div
  class="w-[300px] aspect-video rounded-lg shadow flex flex-col items-center justify-center gap-2 bg-slate-50 group"
>
  <div
    class="flex flex-col items-center p-8 rounded-md w-full sm:px-12 bg-gray-900 text-gray-100"
  >
    <div class="text-center">
      <h2 class="text-xl font-semibold">Dubai</h2>
      <p class="text-sm text-gray-400">March 13</p>
    </div>
    <svg
      class="w-32 h-32 p-6 text-yellow-400 fill-current animate-[spin_5s_linear_infinite;]"
      viewBox="0 0 512 512"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M256,104c-83.813,0-152,68.187-152,152s68.187,152,152,152,152-68.187,152-152S339.813,104,256,104Zm0,272A120,120,0,1,1,376,256,120.136,120.136,0,0,1,256,376Z"
      ></path>
      <rect
        class="animate-[pulse_1s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
        y="16"
        x="240"
        height="48"
        width="32"