Rechercher des composants

Catégories

Formes

Collection de champs pour la collecte des données de l’utilisateur

Composant Formes Minimalistes

Un composant de formulaire minimaliste conçu pour les portfolios, avec une palette de couleurs pastel, une mise en page simple, un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-100 to-purple-100 dark:from-gray-800 dark:to-gray-900 p-6">
  <div class="max-w-md w-full bg-white dark:bg-gray-700 rounded-lg shadow-xl p-8">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Get in Touch</h2>
    <form>
      <div class="mb-4">
        <label for="name" class="block text-gray-700 dark:text-gray-200 text-sm font-medium mb-2">Name</label>
        <input type="text" id="name" name="name" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-600 text-gray-900 dark:text-white">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-200 text-sm font-medium mb-2">Email</label>
        <input type="email" id="email" name="email" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-600 text-gray-900 dark:text-white">
      </div>
      <div class="mb-6">
        <label for="message" class="block text-gray-700 dark:text-gray-200 text-sm font-medium mb-2">Message</label>
        <textarea id="message" name="message" rows="4" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-600 text-gray-900 dark:text-white"></textarea>
      </div>
      <button type="submit" class="w-full bg-blue-400 dark:bg-blue-700 text-white py-2 px-4 rounded-md hover:bg-blue-500 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 transition duration-200">Send Message</button>
    </form>
  </div>
</div>

Composant Formes Rétro/Vintage

Un composant de formulaires doté d’une esthétique rétro/vintage inspirée des années 80 et 90, avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">Contact Us</h2>
    <form>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-1" 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-200 bg-white dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Enter your name" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-1" 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-200 bg-white dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Enter your email" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-1" for="message">Message</label>
            <textarea id="message" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" rows="4" placeholder="Your message..." required></textarea>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-1" for="avatar">Upload Avatar</label>
            <input type="file" id="avatar" class="block w-full text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 border border-gray-300 rounded-lg py-2 px-3 focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none" accept="image/*" />
        </div>
        <div class="mb-6">
            <img src="https://picsum.photos/200/300" alt="Random Placeholder" class="rounded-md w-full mb-2" />
        </div>
        <div class="flex items-center justify-between">
            <button type="submit" class="bg-indigo-600 text-white font-bold py-2 px-4 rounded-full hover:bg-indigo-700 focus:outline-none focus:shadow-outline">Submit</button>
        </div>
    </form>
    <p class="text-gray-600 dark:text-gray-400 text-sm text-center mt-4">© 2023 Nostalgic Designs. All rights reserved.</p>
</div>

Composant Formulaires de conception matérielle

Un composant de formulaires réactifs conçu selon les principes de Material Design à l’aide de Tailwind CSS, avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="container mx-auto p-6">
    <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Contact Us</h2>
    <form class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8">
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="name">Name</label>
            <input class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" id="name" type="text" placeholder="Your Name" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
            <input class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" id="email" type="email" placeholder="Your Email" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="message">Message</label>
            <textarea class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" id="message" rows="4" placeholder="Your Message" required></textarea>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300">Avatar</label>
            <img class="rounded-full w-20 h-20 mb-2 border border-gray-300" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        </div>
        <button class="w-full p-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">Submit</button>
    </form>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1E1E2F;
        }
    }
</style>

Composant Formulaires

Un composant de formulaires réactifs conçu dans le style Material Design à l’aide de Tailwind CSS, avec des mises en page de grille, des ombres et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-md mx-auto">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Contact Us</h2>
    <form>
        <div class="grid grid-cols-1 gap-4">
            <div>
                <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
                <input type="text" id="name" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:outline-none" placeholder="Your Name">
            </div>
            <div>
                <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
                <input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:outline-none" placeholder="Your Email">
            </div>
            <div>
                <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Message</label>
                <textarea id="message" rows="4" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:outline-none" placeholder="Your Message"></textarea>
            </div>
            <div class="flex items-center">
                <input type="checkbox" id="subscribe" class="mr-2 leading-tight">
                <label for="subscribe" class="text-sm text-gray-600 dark:text-gray-400">Subscribe to our newsletter</label>
            </div>
            <button type="submit" class="w-full mt-4 bg-indigo-600 text-white py-2 rounded-md shadow hover:bg-indigo-700 focus:outline-none focus:ring focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400 dark:focus:ring-indigo-400">Submit</button>
        </div>
    </form>
    <div class="mt-6 flex justify-center">
        <img src="https://picsum.photos/200/100" alt="Random Placeholder" class="rounded-lg shadow-md">
    </div>
    <div class="mt-4 flex justify-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-lg">
    </div>
</div>