CCHub Logo CCHub Tailwind Collection
Komponenten Login-Formular Neumorphism Login-Formular

Neumorphism Login-Formular

Eine Anmeldeformular-Komponente, die im Neumorphism-Stil entworfen wurde, mit responsivem Design und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Vorschau

HTML-Code 

<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8 w-96">
        <h1 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-100">Login</h1>
        <form>
            <div class="mb-4">
                <label for="email" class="block text-gray-700 dark:text-gray-200">Email</label>
                <input type="email" id="email" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="[email protected]" required />
            </div>
            <div class="mb-4">
                <label for="password" class="block text-gray-700 dark:text-gray-200">Password</label>
                <input type="password" id="password" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="••••••••" required />
            </div>
            <div class="mt-6">
                <button type="submit" class="w-full py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300">Login</button>
            </div>
        </form>
    </div>
</div>

Verwandte Komponenten

Komponente des Anmeldeformulars

Eine skeuomorphe Login-Formularkomponente mit lebendigen Farben und moderater Komplexität, die für ein Portfolio geeignet ist.

Offen

Komponente des 3D-Anmeldeformulars

Eine reaktionsschnelle 3D-Anmeldeformular-Komponente, die für Geschäfts-/Unternehmenswebsites entwickelt wurde und Erdtöne und Unterstützung für den Dunkelmodus bietet.

Offen

Komponente des Anmeldeformulars

Eine responsive Login-Formular-Komponente, die nach den Prinzipien des Material Designs entworfen und mit Tailwind CSS gestaltet wurde. Es verfügt über ein Farbschema in Erdtönen und ein einfaches Layout, das für einen Blog oder eine Plattform zum Konsum von Inhalten geeignet ist, mit Unterstützung für dunkle Themen.

Offen