Job Announcement Card

<div class="flex flex-col justify-center w-full border-2 border-gray-600 rounded-lg hover:border-green-600 p-7 md:w-fit">
  <div class="flex justify-between">
    <img alt="Logo" src="/static/Slack-RGB.svg" class="w-24 h-auto" />
    <p>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="inline-block w-4 h-4"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
        ></path>
      </svg>
      <span class="ml-1 text-xs text-gray-500">1 day ago</span>
    </p>
  </div>
  <h4 class="mt-3 mb-1 font-medium">Front-end Engineer</h4>
  <p class="text-xs text-gray-500">We are looking for a front-end developer.</p>
  <div class="flex justify-between mt-4">
    <p>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="inline-block w-4 h-4"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"
        ></path>
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
        ></path>
      </svg>
      <span class="ml-1 text-xs text-gray-500">Remote</span>
    </p>
    <p class="text-xs text-gray-500">
      <span class="text-lg text-black">•</span>
      Full Time
    </p>
  </div>
  <div class="flex justify-between mt-4">
    <p class="font-semibold text-black">$12K - 14K</p>
    <button class="px-3 py-2 text-xs text-white bg-green-600 rounded-sm px-x">
      Apply Now
    </button>
  </div>
</div>