Componenti Modulistica Componente modulo per social media con design 3D e colori vivaci

Componente modulo per social media con design 3D e colori vivaci

Un componente di modulo per social media complesso, reattivo e vibrante ispirato al 3D con supporto per temi scuri.

Anteprima

Codice HTML

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

Componenti correlati

Componente Glassmorphism Forms

Glassmorphism Forms Component con toni della Terra, design reattivo e supporto per temi scuri per un blog/sito Web di contenuti.

Aperto

Componente Moduli

Un componente complesso del modulo Material Design con una combinazione di colori triadica per un cruscotto. È reattivo e supporta la modalità oscura.

Aperto

Brutalista Scala di Grigi Forma Industriale

Un componente di forma complesso, in stile brutalista, con una combinazione di colori in scala di grigi, progettato per applicazioni industriali e manifatturiere. Presenta elementi ad alto contrasto, layout insoliti e reattività completa con il supporto della modalità oscura.

Aperto