Compare Funds

            <div class="flex justify-center items-center bg-gray-100 w-full min-h-screen text-gray-800">
  <div class="rounded-xl bg-gray-700 text-white w-full max-w-md shadow-md overflow-hidden">
    <h1 class="text-lg font-medium px-6 py-4 text-center">Compare Funds</h1>
    <ul class="px-8 mb-4 grid grid-cols-2 gap-4">
      <li class="p-4 flex flex-col bg-gray-800 rounded">
        <div class="flex justify-between items-center text-sm mb-12">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 p-1 rounded bg-red-500" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path d="M0 0h24v24H0z" stroke="none" />
            <path d="M17 7 7 17M16 17H7V8" />
          </svg>
          <span>0.01%</span>
        </div>
        <div class="text-center">
          <div class="font-semibold text-5xl">17.1</div>
          <p class="text-gray-300 text-sm mt-4">% rate</p>
        </div>
      </li>
      <li class="p-4 flex flex-col bg-gray-800 rounded">
        <div class="flex justify-between items-center text-sm mb-12">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 p-1 rounded bg-green-500" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <line x1="17" y1="7" x2="7" y2="17" />
            <polyline points="8 7 17 7 17 16" />
          </svg>
          <span>1.05%</span>
        </div>
        <div class="text-center">
          <div class="font-semibold text-5xl">53.7</div>
          <p class="text-gray-300 text-sm mt-4">% rate</p>
        </div>
      </li>
    </ul>
    <div class="flex flex-col items-center pt-4 pb-8">
      <button class="px-4 py-2 rounded bg-gray-600">Schedule a call</button>
      <p class="text-xs mt-2 opacity-40">* Conditions apply</p>
    </div>
  </div>
</div>