CCHub Logo CCHub Tailwind Collection
Komponenten Formt Komponente "Formulare"

Komponente "Formulare"

Responsive Forms Component mit 3D-Design, analogem Farbschema, einfachem Layout für E-Commerce mit Unterstützung für dunkle Themen

Vorschau

HTML-Code 

<div class="container mx-auto p-4">

  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-xl p-6 transform hover:scale-105 transition duration-300">

    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Shipping Information</h2>



    <form>

      <div class="mb-4">

        <label for="fullName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label>

        <input type="text" id="fullName" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 transform translate-z-0 perspective-origin" placeholder="John Doe">

      </div>



      <div class="mb-4">

        <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Address</label>

        <input type="text" id="address" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 transform translate-z-0 perspective-origin" placeholder="123 Main St">

      </div>



      <div class="mb-4">

        <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">City</label>

        <input type="text" id="city" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 transform translate-z-0 perspective-origin" placeholder="Anytown">

      </div>



      <div class="mb-4">

        <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Zip Code</label>

        <input type="text" id="zip" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 transform translate-z-0 perspective-origin" placeholder="12345">

      </div>



      <div class="flex items-center justify-between">

        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transform translate-z-0 perspective-origin dark:bg-blue-700 dark:hover:bg-blue-900">

          Submit Order

        </button>

      </div>

    </form>

  </div>

</div>

Verwandte Komponenten

JobApplicationForm_WatercolorArtistic

Ein komplexes, responsives Bewerbungsformular mit einem Aquarell-/künstlerischen Designstil und einem Regenbogen-Farbschema mit Farbverlauf. Enthält Abschnitte für persönliche Daten, Erfahrung, Ausbildung und Datei-Uploads mit Unterstützung für den Dunkelmodus, geeignet für Jobbörsen und Karriereplattformen.

Offen

Minimalistische Formularkomponente

Eine minimalistische Formularkomponente, die auf Portfolios zugeschnitten ist, mit einem pastellfarbenen Farbschema, einfachem Layout, responsivem Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen

Komponente "Formulare"

Eine komplexe, reaktionsschnelle Formularkomponente mit mehrfarbigen Verlaufshintergründen und fließenden Übergängen, die sich für Technologie-/SaaS-Anwendungen eignet. Enthält Unterstützung für den Dunkelmodus und interaktive Elemente.

Offen