Brutalistisches Suchfeld

<div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-8 flex flex-col items-center justify-center font-mono"><div class="w-full max-w-md bg-white dark:bg-stone-800 shadow-[8px_8px_0_black] dark:shadow-[8px_8px_0_cyan] border-4 border-black dark:border-cyan-400 rounded-none overflow-hidden"><div class="bg-red-500 dark:bg-purple-600 p-4 border-b-4 border-black dark:border-cyan-400"><h2 class="text-xl text-black dark:text-white uppercase font-bold text-center">Search the Void</h2></div><div class="p-6"><div class="flex"><input type="text" placeholder="Enter query..." class="flex-grow p-4 border-4 border-black dark:border-cyan-400 bg-yellow-300 dark:bg-teal-300 text-black placeholder-gray-800 dark:placeholder-gray-900 focus:outline-none focus:bg-yellow-400 dark:focus:bg-teal-400 rounded-none text-lg"><button class="ml-4 px-6 py-4 bg-lime-500 dark:bg-fuchsia-600 text-black dark:text-white uppercase font-bold border-4 border-black dark:border-cyan-400 shadow-[4px_4px_0_black] dark:shadow-[4px_4px_0_cyan] hover:shadow-[2px_2px_0_black] dark:hover:shadow-[2px_2px_0_cyan] hover:translate-x-0.5 hover:translate-y-0.5 transition-all duration-150 rounded-none">GO</button></div><div class="mt-6 text-sm text-gray-700 dark:text-gray-300 border-t-2 border-dashed border-gray-400 dark:border-gray-600 pt-4"><p>Explore the depths of information. Beware of lurking data. Access granted.</p></div></div></div><div class="mt-8 text-center"><label for="dark-mode-toggle" class="inline-flex items-center cursor-pointer"><input type="checkbox" id="dark-mode-toggle" class="sr-only peer" onchange="document.documentElement.classList.toggle('dark')"><div class="relative w-11 h-6 bg-gray-400 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-black dark:peer-focus:ring-cyan-300 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-black dark:peer-checked:bg-cyan-500"></div><span class="ml-3 text-sm font-medium text-black dark:text-white uppercase">Dark Mode</span></label></div></div>