<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>