Componenti Casella di ricerca Componente Casella di ricerca

Componente Casella di ricerca

Un componente della casella di ricerca reattiva progettato in uno stile brutalista con supporto per temi scuri utilizzando Tailwind CSS.

Anteprima

Codice HTML

<div class="flex items-center justify-center min-h-screen bg-gray-900 text-white">
    <div class="bg-gray-800 p-8 rounded-lg shadow-lg space-y-4">
        <h1 class="text-3xl font-bold text-center">Search</h1>
        <div class="flex items-center bg-gray-700 p-2 rounded-md">
            <input type="text" placeholder="Type to search..." class="flex-grow bg-transparent border-none text-white outline-none placeholder-gray-400" />
            <button class="ml-2 bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition duration-300">Go</button>
        </div>
        <div class="text-center">
            <img src="https://picsum.photos/200/100" alt="Placeholder image" class="w-full h-auto rounded-md mt-4">
        </div>
        <div class="flex items-center justify-between mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            <span class="text-sm">User Name</span>
        </div>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1F1F1F;
        }
        .bg-gray-800 {
            background-color: #2d2d2d;
        }
        .bg-gray-700 {
            background-color: #3e3e3e;
        }
    }
</style>

Componenti correlati

Casella di ricerca Material Design

Un componente della casella di ricerca ispirato ai principi di Material Design, creato utilizzando Tailwind CSS. Presenta un comportamento reattivo che si adatta alla larghezza del contenitore, un feedback visivo attraverso transizioni di ombre al passaggio del mouse e di messa a fuoco (effetti di profondità) e un supporto completo per il tema scuro. Il componente include un'icona di ricerca in primo piano e garantisce un'estetica pulita e moderna. Implementazione solo CSS. Ideale per l'incorporamento in vari layout grazie alla sua natura "w-full". Per l'accessibilità, assicurati di abbinare l'elemento 'input' con un '<label>' corrispondente o fornisci una 'aria-label' descrittiva.

Aperto