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

Gaming_Material_Form

Eine reaktionsschnelle Gaming-Form, die von den Prinzipien des Material Designs inspiriert ist, mit triadischen Farben, Tiefeneffekten und Unterstützung für den Dunkelmodus. Geeignet für Anmeldung, Registrierung oder Spieleinstellungen.

Offen

Skeuomorphic_Social_Media_Form_Complex

Eine komplexe, skeuomorphe Social-Media-Formularkomponente mit Komplementärfarben, responsivem Design und Unterstützung für den Dunkelmodus. Ahmt reale Tastengefühle und Texturen nach.

Offen

Spielerisches Bewerbungsformular

Eine reaktionsschnelle und verspielte Bewerbungsformularkomponente mit warmen, neutralen Farben, abgerundeten Elementen und Unterstützung des Dunkelmodus, die für Jobbörsen und Karriereentwicklungsplattformen geeignet ist.

Offen