Rechercher des composants

Catégories

Formes

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

Composant de formulaire de médias sociaux avec conception 3D et couleurs vives

Un composant de formulaire de réseau social complexe, réactif et dynamique inspiré de la 3D avec prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gradient-to-br from-purple-600 to-pink-500 dark:from-gray-900 dark:to-black p-10">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden md:max-w-2xl">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/social/400/600" alt="Social media background">
      </div>
      <div class="p-8 flex flex-col justify-between">
        <div>
          <div class="uppercase tracking-wide text-sm text-indigo-700 dark:text-indigo-400 font-semibold">Connect & Share</div>
          <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Join the Conversation</a>
          <p class="mt-2 text-gray-600 dark:text-gray-400 text-sm">Enter your details below to connect with friends and family and share your moments.</p>
        </div>
        <div class="mt-6">
          <form>
            <div class="mb-4">
              <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="username">
                Username
              </label>
              <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Choose a username">
            </div>
            <div class="mb-4">
              <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="email">
                Email
              </label>
              <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="Enter your email">
            </div>
            <div class="mb-6">
              <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="password">
                Password
              </label>
              <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="Create a password">
            </div>
            <div class="flex items-center justify-between">
              <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full focus:outline-none focus:shadow-outline transform transition duration-500 hover:scale-105" type="button">
                Sign Up
              </button>
              <a class="inline-block align-baseline font-bold text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-600" href="#">
                Forgot Password?
              </a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

Composant Formulaires

Composant Forms avec le style Glassmorphism, la palette de couleurs vives et la complexité simple pour le portefeuille. Conception réactive avec prise en charge du thème sombre à l’aide de Tailwind CSS. Pas de JavaScript.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg">
    <div class="px-6 py-8">
      <h2 class="text-center text-3xl font-extrabold text-gray-900 dark:text-white">Contact Us</h2>
      <form class="mt-8 space-y-6" action="#" method="POST">
        <input type="hidden" name="remember" value="true">
        <div class="rounded-md shadow-sm -space-y-px">
          <div>
            <label for="name" class="sr-only">Name</label>
            <input id="name" name="name" type="text" autocomplete="name" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-t-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm bg-white dark:bg-gray-700 bg-opacity-50 dark:bg-opacity-50" placeholder="Name">
          </div>
          <div>
            <label for="email-address" class="sr-only">Email address</label>
            <input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm bg-white dark:bg-gray-700 bg-opacity-50 dark:bg-opacity-50" placeholder="Email address">
          </div>
          <div>
            <label for="message" class="sr-only">Message</label>
            <textarea id="message" name="message" rows="4" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-b-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm bg-white dark:bg-gray-700 bg-opacity-50 dark:bg-opacity-50" placeholder="Message"></textarea>
          </div>
        </div>

        <div>
          <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
            Send Message
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

Composant Formulaires

Un composant de formulaires réactifs conçu dans un style minimaliste, adapté aux interfaces de médias sociaux, avec des couleurs vives, une prise en charge du mode sombre et des interactions complexes.

Ouvrir Aperçu

                <div class="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center">
    <div class="w-full max-w-md p-8 space-y-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h2 class="text-2xl font-bold text-vibrant-600 dark:text-vibrant-400 text-center">Join Our Community</h2>
        <form class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
                <input type="text" placeholder="Your Name" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-vibrant-400 focus:ring focus:ring-vibrant-200 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:focus:border-vibrant-500 dark:focus:ring-vibrant-400" required>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
                <input type="email" placeholder="Your Email" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-vibrant-400 focus:ring focus:ring-vibrant-200 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:focus:border-vibrant-500 dark:focus:ring-vibrant-400" required>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
                <input type="password" placeholder="Your Password" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-vibrant-400 focus:ring focus:ring-vibrant-200 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:focus:border-vibrant-500 dark:focus:ring-vibrant-400" required>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Profile Picture</label>
                <input type="file" class="mt-1 block w-full mb-4 text-sm text-gray-500 dark:text-gray-400 dark:bg-gray-600" accept="image/*">
                <img src="https://picsum.photos/200" alt="Profile Preview" class="w-full h-32 object-cover rounded-lg mb-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Bio</label>
                <textarea placeholder="Tell us about yourself" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-vibrant-400 focus:ring focus:ring-vibrant-200 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:focus:border-vibrant-500 dark:focus:ring-vibrant-400" rows="4" required></textarea>
            </div>
            <button type="submit" class="w-full py-2 px-4 mt-4 text-white bg-vibrant-600 rounded-md hover:bg-vibrant-700 focus:outline-none focus:ring-2 focus:ring-vibrant-500 dark:bg-vibrant-500 dark:hover:bg-vibrant-600">Submit</button>
        </form>
        <p class="text-center text-sm text-gray-500 dark:text-gray-400">Already have an account? <a href="#" class="text-vibrant-600 dark:text-vibrant-400 hover:underline">Log in</a></p>
    </div>
</div>

Composant Formulaires

Composant de formulaire de conception matérielle complexe avec une palette de couleurs triadique pour un tableau de bord. Il est réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-8 text-center">Dashboard Settings</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <div>
        <label for="username" class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Username</label>
        <input type="text" id="username" class="w-full px-4 py-2 border rounded-lg dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-500" placeholder="john.doe">
      </div>
      <div>
        <label for="email" class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-500" placeholder="[email protected]">
      </div>
      <div>
        <label for="password" class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Password</label>
        <input type="password" id="password" class="w-full px-4 py-2 border rounded-lg dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-500" placeholder="********">
      </div>
      <div>
        <label for="confirm-password" class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Confirm Password</label>
        <input type="password" id="confirm-password" class="w-full px-4 py-2 border rounded-lg dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-500" placeholder="********">
      </div>
      <div class="md:col-span-2">
        <label for="bio" class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Bio</label>
        <textarea id="bio" rows="4" class="w-full px-4 py-2 border rounded-lg dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-500" placeholder="Tell us about yourself..."></textarea>
      </div>
      <div class="md:col-span-2">
        <label class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Notification Settings</label>
        <div class="flex items-center mb-4">
          <input type="checkbox" id="email-notifications" class="mr-2">
          <label for="email-notifications" class="text-gray-700 dark:text-gray-200">Receive email notifications</label>
        </div>
        <div class="flex items-center">
          <input type="checkbox" id="push-notifications" class="mr-2">
          <label for="push-notifications" class="text-gray-700 dark:text-gray-200">Receive push notifications</label>
        </div>
      </div>
    </div>
    <div class="flex justify-end mt-8">
      <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mr-4">Cancel</button>
      <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Save Settings</button>
    </div>
  </div>
</div>

Composante des formes brutalistes

Un composant de formulaires Web conçu avec un style brutaliste avec un contraste élevé et des mises en page inhabituelles, adapté au commerce électronique et réactif avec la prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="max-w-md mx-auto p-6 bg-gray-300 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Create Your Account</h2>
    <form class="space-y-4">
        <div>
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
            <input type="text" id="name" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Enter your name" required />
        </div>
        <div>
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
            <input type="email" id="email" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Enter your email" required />
        </div>
        <div>
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
            <input type="password" id="password" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Enter your password" required />
        </div>
        <div>
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Avatar</label>
            <input type="file" id="avatar" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" required />
            <img src="https://picsum.photos/100/100" alt="Avatar" class="mt-2 rounded-full" />
        </div>
        <button type="submit" class="w-full p-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 text-white font-bold rounded">Register</button>
    </form>
    <p class="mt-4 text-gray-600 dark:text-gray-400">
        Already have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Login here</a>.
    </p>
</div>

Composant Formes neumorphes

Un composant de formulaires simple avec une conception à neumorphisme, conçu pour les applications de commerce électronique, avec une palette de couleurs monochromatiques et la prise en charge du mode sombre.

Ouvrir Aperçu

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <title>Neumorphic Forms Component</title>
</head>
<body class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center min-h-screen">
    <div class="bg-gray-200 dark:bg-gray-700 rounded-xl shadow-xl p-8 w-4/5 max-w-md">
        <h2 class="text-center text-gray-800 dark:text-gray-200 text-2xl font-bold mb-6">Create Account</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
                <input class="bg-gray-300 dark:bg-gray-600 appearance-none border-2 border-gray-200 dark:border-gray-600 rounded w-full py-2 px-4 text-gray-700 dark:text-gray-300 shadow-inner focus:outline-none focus:border-gray-500 dark:focus:border-gray-400" id="name" type="text" placeholder="John Doe">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input class="bg-gray-300 dark:bg-gray-600 appearance-none border-2 border-gray-200 dark:border-gray-600 rounded w-full py-2 px-4 text-gray-700 dark:text-gray-300 shadow-inner focus:outline-none focus:border-gray-500 dark:focus:border-gray-400" id="email" type="email" placeholder="[email protected]">
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input class="bg-gray-300 dark:bg-gray-600 appearance-none border-2 border-gray-200 dark:border-gray-600 rounded w-full py-2 px-4 text-gray-700 dark:text-gray-300 shadow-inner focus:outline-none focus:border-gray-500 dark:focus:border-gray-400" id="password" type="password" placeholder="••••••••">
            </div>
            <div class="flex items-center justify-between">
                <button class="bg-blue-500 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Sign Up</button>
            </div>
        </form>
        <div class="text-center text-gray-600 dark:text-gray-400 mt-4">
            <p>Already have an account? <a href="#" class="text-blue-500 hover:text-blue-700">Log In</a></p>
        </div>
    </div>
</body>
</html>

Composant Formulaires

Composant de formulaires réactifs avec conception 3D, schéma de couleurs analogue, mise en page simple pour le commerce électronique avec prise en charge du thème sombre

Ouvrir Aperçu

                <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>

Composant Retro Vintage Forms

Un composant de formulaires complexe conçu dans un style rétro/vintage avec une palette de couleurs pastel, adapté aux sites Web d’entreprise professionnels et réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="bg-pastel-light dark:bg-pastel-dark p-8 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Contact Us</h2>
    <form>
        <div class="mb-4">
            <label class="block text-gray-600 dark:text-gray-400 text-sm font-bold 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 leading-tight focus:outline-none focus:shadow-outline" placeholder="Your Name" />
        </div>
        <div class="mb-4">
            <label class="block text-gray-600 dark:text-gray-400 text-sm font-bold 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 leading-tight focus:outline-none focus:shadow-outline" placeholder="Your Email" />
        </div>
        <div class="mb-4">
            <label class="block text-gray-600 dark:text-gray-400 text-sm font-bold mb-2" 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-300 leading-tight focus:outline-none focus:shadow-outline" placeholder="Your Message" rows="4"></textarea>
        </div>
        <div class="mb-4">
            <label class="block text-gray-600 dark:text-gray-400 text-sm font-bold mb-2" for="service">Service Inquiry</label>
            <select id="service" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline">
                <option value="consulting">Consulting</option>
                <option value="design">Design</option>
                <option value="development">Development</option>
            </select>
        </div>
        <div class="mb-6 flex items-center justify-between">
            <label class="inline-flex items-center">
                <input type="checkbox" class="form-checkbox h-5 w-5 text-gray-600 dark:text-gray-400" />
                <span class="ml-2 text-gray-600 dark:text-gray-400 text-sm">Subscribe to our newsletter</span>
            </label>
        </div>
        <div class="flex items-center justify-center">
            <button type="submit" class="bg-pastel-primary dark:bg-pastel-secondary hover:bg-pastel-secondary dark:hover:bg-pastel-primary text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                Send
            </button>
        </div>
    </form>
    <div class="mt-6 text-center">
        <img src="https://picsum.photos/seed/picsum/200/100" alt="Random Image" class="rounded-lg" />
    </div>
</div>

Composant Formulaires

Un composant de formulaires complexe, réactif et à thème sombre pour les interfaces de médias sociaux avec un design monochrome 3D. Utilise Tailwind CSS avec les préfixes dark : pour le mode sombre et inclut des exemples d’éléments de formulaire.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-6 flex items-center justify-center">
  <div class="container max-w-screen-lg mx-auto">
    <div>
      <h2 class="text-center text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-6">Create New Post</h2>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow complex-3d-element p-4 px-4 md:p-8 mb-6 border border-gray-300 dark:border-gray-700">
        <div class="grid gap-4 gap-y-2 text-sm grid-cols-1 lg:grid-cols-3">
          <div class="text-gray-600 dark:text-gray-400 complex-3d-text">
            <p class="font-medium text-lg">Post Details</p>
            <p>Please fill out all the fields.</p>
          </div>
          <div class="lg:col-span-2">
            <div class="grid gap-4 gap-y-2 text-sm grid-cols-1 md:grid-cols-5">
              <div class="md:col-span-5 complex-3d-input-container">
                <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Title</label>
                <input type="text" name="title" id="title" class="h-10 border mt-1 rounded px-4 w-full bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-gray-500 dark:focus:border-gray-400 complex-3d-input" value="" placeholder="Post Title" />
              </div>
              <div class="md:col-span-5 complex-3d-input-container">
                <label for="content" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Content</label>
                <textarea name="content" id="content" class="h-24 md:h-32 border mt-1 rounded px-4 py-2 w-full bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-gray-500 dark:focus:border-gray-400 complex-3d-input" placeholder="Write your post content here..."></textarea>
              </div>
              <div class="md:col-span-5 complex-3d-input-container">
                <label for="tags" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tags</label>
                <input type="text" name="tags" id="tags" class="h-10 border mt-1 rounded px-4 w-full bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-gray-500 dark:focus:border-gray-400 complex-3d-input" value="" placeholder="Comma separated tags" />
              </div>
              <div class="md:col-span-5 complex-3d-input-container">
                  <label for="media" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Upload Media</label>
                  <div class="flex items-center space-x-4 mt-1">
                      <label class="flex items-center justify-center w-full h-20 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-md cursor-pointer bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 complex-3d-upload complex-3d-input">
                          <div class="text-center">
                              <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-10 w-10 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                              </svg>
                              <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Drag and drop or click to upload</p>
                          </div>
                          <input type="file" id="media" name="media" class="hidden" />
                      </label>
                  </div>
              </div>
              <div class="md:col-span-5 text-right complex-3d-button-container">
                <div class="inline-flex items-end">
                  <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded complex-3d-button dark:bg-blue-700 dark:hover:bg-blue-800">Post</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.complex-3d-element {
  transform-style: preserve-3d;
  transform: rotateX(10deg) rotateY(10deg);
  transition: transform 0.3s ease-in-out;
}

.complex-3d-element:hover {
  transform: rotateX(0deg) rotateY(0deg);
}

.complex-3d-text {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.complex-3d-input-container {
  perspective: 1000px;
}

.complex-3d-input {
  transform: translateZ(20px);
  transition: transform 0.3s ease-in-out;
}

.complex-3d-input:focus {
  transform: translateZ(30px);
}

.complex-3d-button-container {
     perspective: 1000px;
}

.complex-3d-button {
     transform: translateZ(20px);
     transition: transform 0.3s ease-in-out;
}

.complex-3d-button:hover {
     transform: translateZ(30px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.complex-3d-upload {
    backface-visibility: hidden;
}
</style>

Composante des formes brutalistes

Un composant de formulaires conçu avec une esthétique brutaliste, utilisant des couleurs pastel, et adapté aux sites Web d’entreprise. Il dispose d’un design réactif avec prise en charge des thèmes sombres.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-pink-600 dark:text-pink-400 mb-4">Contact Us</h2>
    <form>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
            <input class="block w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" type="text" id="name" placeholder="Your Name" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
            <input class="block w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" type="email" id="email" placeholder="Your Email" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="message">Message</label>
            <textarea class="block w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" id="message" rows="4" placeholder="Your Message" required></textarea>
        </div>
        <div class="flex items-center justify-between">
            <button type="submit" class="bg-pink-600 text-white font-bold py-2 px-4 rounded hover:bg-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-600 dark:bg-pink-500 dark:hover:bg-pink-400">Send</button>
        </div>
    </form>
    <div class="mt-6 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
        <p class="text-gray-600 dark:text-gray-300">Stay connected with us!</p>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="rounded-md shadow-md object-cover w-full">
    </div>
</div>