Fullscreen Search Modal

<div class="flex items-center justify-between mb-20">
        <div class="text-3xl font-black italic tracking-tighter">SEARCH.</div>
        <div
            class="w-14 h-14 bg-slate-50 rounded-full flex items-center justify-center cursor-pointer hover:bg-slate-100 transition-all font-bold text-slate-400">
            &times;</div>
    </div>
    <div class="max-w-5xl mx-auto w-full">
        <input type="text" placeholder="Type to find components..."
            class="w-full text-5xl md:text-8xl font-light outline-none text-slate-900 placeholder-slate-100 mb-12">
        <div class="flex flex-wrap gap-4 uppercase font-black text-[10px] tracking-[0.2em] text-slate-400">
            <span class="bg-slate-50 px-4 py-2 rounded-full cursor-pointer hover:text-indigo-600">Navbars</span>
            <span class="bg-slate-50 px-4 py-2 rounded-full cursor-pointer hover:text-indigo-600">Cards</span>
            <span class="bg-slate-50 px-4 py-2 rounded-full cursor-pointer hover:text-indigo-600">Heroes</span>
            <span
                class="bg-indigo-600 text-white px-4 py-2 rounded-full cursor-pointer shadow-lg shadow-indigo-100 italic">V2
                Released</span>
        </div>
    </div>