CCHub Logo CCHub Tailwind Collection
Komponenten Formt Komponente "3D-Formulare"

Komponente "3D-Formulare"

Eine einfache, reaktionsschnelle Formularkomponente mit 3D-Designelementen und Pastellfarben für Social-Media-Oberflächen, die den Dunkelmodus unterstützt.

Vorschau

HTML-Code 

<div class="max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Join Our Community</h2>
    <form>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
            <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" placeholder="Enter your name">
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
            <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" placeholder="Enter your email">
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Upload Avatar</label>
            <input type="file" id="avatar" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline">
        </div>
        <div>
            <button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Join</button>
        </div>
    </form>
    <div class="mt-4">
        <img src="https://picsum.photos/200" alt="Random Design" class="rounded-md shadow-lg mt-3 w-full">
    </div>
</div>

Verwandte Komponenten

Komponente "Formulare"

Eine komplexe Material Design-Formularkomponente mit einem triadischen Farbschema für ein Dashboard. Es ist reaktionsschnell und unterstützt den Dunkelmodus.

Offen

Healthcare_Form_Gradient_Neon

Eine komplexe, reaktionsschnelle Formularkomponente für das Gesundheitswesen mit Neon-/Elektro-Farbverläufen und sanften Übergängen, die den Dunkelmodus unterstützt. Entwickelt für medizinische Anwendungen mit mehreren interaktiven Elementen.

Offen

Brutalistische Graustufen-Industrieform

Ein komplexes, brutalistisch anmutendes Formbauteil mit Graustufen-Farbschema, das für Industrie- und Fertigungsanwendungen entwickelt wurde. Verfügt über kontrastreiche Elemente, ungewöhnliche Layouts und volle Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.

Offen