404 Illustration UI

<div class="px-6">
        <div class="relative inline-block mb-12">
            <h1
                class="text-[12rem] md:text-[20rem] font-black italic text-slate-50 tracking-tighter leading-none select-none">
                404</h1>
            <div class="absolute inset-0 flex items-center justify-center animate-float">
                <div
                    class="w-48 h-48 bg-indigo-600 rounded-[3rem] rotate-12 flex items-center justify-center shadow-2xl shadow-indigo-200">
                    <svg class="w-20 h-20 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </div>
            </div>
        </div>
        <h3 class="text-4xl font-black text-slate-900 mb-6 uppercase italic tracking-tighter">Lost in Space?</h3>
        <p class="text-slate-500 mb-12 max-w-sm mx-auto font-medium">The page you're searching for has either moved to
            another dimension or never existed.</p>
        <button
            class="bg-black text-white px-10 py-5 rounded-full font-black text-xs uppercase tracking-widest hover:bg-indigo-600 transition-all active:scale-95 shadow-2xl shadow-slate-200">Return
            to Safety</button>
    </div>