Model Selector

<div class="w-full max-w-2xl mx-auto space-y-4 font-sans">
        <label class="text-[10px] font-black text-zinc-500 uppercase tracking-widest px-1">Select Inference
            Engine</label>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div
                class="p-6 rounded-2xl border-2 border-indigo-600 bg-indigo-600/5 cursor-pointer relative transition-all">
                <div class="absolute top-4 right-4 text-indigo-500">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                            clip-rule="evenodd"></path>
                    </svg>
                </div>
                <div class="flex items-center gap-3 mb-4">
                    <div class="p-2 bg-indigo-600 text-white rounded-lg">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-width="2"></path>
                        </svg>
                    </div>
                    <span class="font-bold text-white">Titan-v2-Max</span>
                </div>
                <p class="text-xs text-zinc-400 mb-6">Optimized for complex reasoning and long-context windows up to
                    200k tokens.</p>
                <div class="flex justify-between items-center text-[10px] font-bold">
                    <span class="text-indigo-400">LATENCY: 140ms</span>
                    <span class="text-zinc-500">$0.02 / 1k</span>
                </div>
            </div>
            <div
                class="p-6 rounded-2xl border-2 border-zinc-800 bg-zinc-900/50 hover:border-zinc-700 transition-all cursor-pointer">
                <div class="flex items-center gap-3 mb-4">
                    <div class="p-2 bg-zinc-800 text-zinc-400 rounded-lg">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2"></path>
                        </svg>
                    </div>
                    <span class="font-bold text-white">Flash-v4-Nano</span>
                </div>
                <p class="text-xs text-zinc-400 mb-6">Sub-millisecond inference for simple tasks and conversational UI.
                </p>
                <div class="flex justify-between items-center text-[10px] font-bold">
                    <span class="text-emerald-400">LATENCY: 12ms</span>
                    <span class="text-zinc-500">$0.002 / 1k</span>
                </div>
            </div>
        </div>
    </div>