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>