Composant du formulaire d’inscription
Un composant de formulaire d’inscription complexe et réactif pour les applications financières/bancaires, doté d’un design épuré et minimaliste avec des couleurs très contrastées, une typographie forte et une mise en page basée sur une grille. Inclut la prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-gray-50 flex items-center justify-center p-4 sm:p-6 lg:p-8 dark:bg-gray-900 font-sans">
<div class="max-w-4xl w-full bg-white shadow-xl rounded-lg overflow-hidden dark:bg-gray-800 dark:text-gray-200 grid grid-cols-1 md:grid-cols-2 gap-0 border border-gray-200 dark:border-gray-700">
<!-- Left Section: Header/Intro -->
<div class="flex flex-col justify-between p-6 sm:p-8 bg-gradient-to-br from-indigo-700 to-blue-800 text-white dark:from-indigo-900 dark:to-blue-950">
<div>
<h1 class="text-4xl sm:text-5xl font-extrabold mb-4 leading-tight">Create Your Account</h1>
<p class="text-lg sm:text-xl font-light opacity-90">Join us to unlock tailored financial solutions designed for your future.</p>
</div>
<div class="mt-8">
<p class="text-sm opacity-80 mb-2">Already have an account?</p>
<a href="#" class="inline-flex items-center text-white px-4 py-2 border border-white rounded-md hover:bg-white hover:text-indigo-700 transition-colors duration-300 font-medium">
Sign In
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
<img src="https://picsum.photos/300/200?random=1" alt="Abstract financial graphic" class="mt-8 rounded-md shadow-lg opacity-80 hidden md:block">
</div>
<!-- Right Section: Registration Form -->
<div class="p-6 sm:p-8 lg:p-10 flex flex-col justify-center">
<h2 class="text-3xl sm:text-4xl font-bold mb-6 text-gray-900 dark:text-gray-50">Register and Get Started</h2>
<form class="space-y-6">
<div>
<label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
<div class="mt-1">
<input type="text" id="full-name" name="full-name" placeholder="John Doe" autocomplete="name" required
class="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 dark:text-white transition-colors duration-200">
</div>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
<div class="mt-1">
<input type="email" id="email" name="email" placeholder="[email protected]" autocomplete="email" required
class="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 dark:text-white transition-colors duration-200">
</div>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<div class="mt-1">
<input type="password" id="password" name="password" placeholder="Minimum 8 characters" autocomplete="new-password" required
class="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 dark:text-white transition-colors duration-200">
</div>
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Must be 8+ characters, including numbers and symbols.</p>
</div>
<div>
<label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm Password</label>
<div class="mt-1">
<input type="password" id="confirm-password" name="confirm-password" placeholder="Re-enter your password" autocomplete="new-password" required
class="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 dark:text-white transition-colors duration-200">
</div>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="terms" name="terms" type="checkbox" required
class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600 dark:checked:bg-blue-600 dark:checked:border-blue-600 transition-colors duration-200">
</div>
<div class="ml-3 text-sm">
<label for="terms" class="font-medium text-gray-700 dark:text-gray-300">I agree to the <a href="#" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-500 font-medium transition-colors duration-200">Terms of Service</a> and <a href="#" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-500 font-medium transition-colors duration-200">Privacy Policy</a>.</label>
</div>
</div>
<div>
<button type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-offset-gray-800 transition-colors duration-200">
Register
</button>
</div>
</form>
<div class="mt-6 relative">
<div class="absolute inset-0 flex items-center" aria-hidden="true">
<div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white text-gray-500 dark:bg-gray-800 dark:text-gray-400">Or continue with</span>
</div>
</div>
<div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
<button type="button"
class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800 transition-colors duration-200">
<svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 16 16"><path d="M15.518 8.006c0-.528-.046-.928-.112-1.304H8V4.168h4.436c-.074-.784-.452-1.488-.992-1.928a5.2 5.2 0 00-3.444-1.296A5.28 5.28 0 002.72 5.6C2.72 7.024 3.736 8.304 4.984 8.948S7.096 9.772 8 9.772c1.78 0 2.928-.68 3.5-1.122l2.35 2.188c-1.396 1.28-3.328 2.052-5.78 2.052a7.99 7.99 0 01-7.8-7.988C.2 3.512 1.348 2.176 2.76 1.136S5.508 0 8 0a7.9 7.9 0 015.688 2.228 7.96 7.96 0 012.35 5.778z"></path></svg>
Google
</button>
<button type="button"
class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800 transition-colors duration-200">
<svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 16 16"><path d="M11.517 7.034c-.878-.492-1.74-.954-2.584-1.411-.84-.456-1.57-.852-2.196-1.189-.62-.33-.974-.6-1.074-.79a.294.294 0 01-.01-.07c.026-.065.176-.145.446-2.072 0 0-.294 1.706-2.502 1.954C2.192 3.654 0 5.4 0 7.55c0 2.15 1.572 4.1 3.4 5.922 1.82 1.82 3.8 3.484 5.952 3.484 2.152 0 3.7-1.5 3.7-3.75 0-2.25-1.534-3.75-3.7-3.75zM8 4.2C7.2 3.8 6.4 3.4 5.8 3.1c-.6-.3-1.1-.4-1.3-.4-.2 0-.4.1-.6.2-.2.1-.3.3-.3.4 0 .1 0 .2.1.2.1.1.2.2.3.2.1 0 .2 0 .3 0 .1 0 .2.1.3.1.1 0 .2.1.2.1.1 0 .2.1.3.1.1 0 .2 0 .3-.1l.1-.1c.1-.1.1-.2.2-.3-.1-.1-.2-.2-.3-.3-.1-.1-.2-.2-.3-.2 0 0 .1 0 .2 0 .1 0 .2.1.3.1.1 0 .2-.1.3-.1.1 0 .2-.1.3-.1.1 0 .2-.1.3-.1.1-.1.2-.1.3-.2-.1-.1-.1-.1-.2-.1-.1 0-.2 0-.2.1-.1 0-.1.1-.2.1-.1 0-.2.1-.3.1-.1 0-.2.1-.3.1-.1 0-.2.1-.3.1-.1 0-.2.1-.2.1-.1 0-.2 0-.2.1-.1 0-.1.1-.2.1-.1 0-.2.1-.2.1-.1 0-.1.1-.2.1-.1 0-.2.1-.3.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.2-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0;m-1 7.15c.3.1.6.2.9.4.3.2.5.3.7.4.2.1.4.2.6.2.2.1.4.1.6.1.2 0 .4-.1.6-.2.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3zm-11.838 1.12c-.528-.48-.954-.954-1.284-1.396-.33-.442-.516-.764-.556-.962-.02-.1-.01-.3.02-.4.03-.1.14-.3.34-.4.2-.1.4-.2.6-.3.2-.1.4-.1.6-.2.2-.1.4-.1.6-.1.2 0 .4-.1.6-.1.2 0 .4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2 0 .4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1c.32-.4 1.134-1.396 1.134-1.3961zm1.264 4.092c-.39-.148-.776-.296-1.156-.444-.38-.148-.752-.292-1.116-.436-.36-.14-.7-.272-1.02-.396-.32-.12-.62-.23-.9-.33-.28-.1-.54-.188-.78-.264-.24-.076-.46-.14-.66-.192-.2-.052-.38-.09-.54-.114-.16-.02-.3-.034-.42-.042-.12-.008-.22-.012-.3-.012-.08 0-.14.004-.18.012-.04.008-.06.012-.06.012l.056-.002c-.012-.004-.02-.006-.024-.006-.004 0-.006-.002-.006-.002-.002 0-.002 0-.002 0zM12.924 1.638s-2.028-.466-2.046-1.042c-.018-.576.4-1.034.4-1.034l.006-.004s-.418.458-.4 1.034c.018.576.602 1.042.602 1.042L12.924 1.638zm-1.42 2.392s-1.46-.226-1.47-.642c-.01-.416.3-.642.3-.642l.004-.002s-.314.226-.3 0c.01-.416.48-1.506.48-1.506l.004-.002s-.474 1.09-.48 1.506c-.006.416.29 1.152.29 1.152l.002 0zm-2.088 1.704s-1.42-.516-1.43-.932c-.01-.416.29-.64.29-.64l.004-.002s-.3.224-.3.64c0 .416.307.72.307.72l.002 0zm-2.31 1.714s-.91-.18-1.01-.444c-.1-.264.06-.444.06-.444l.002-.002s-.07.18-.06.444c.01.264.25.444.25.444l.002 0zm-3.084 2.87c-.82-.68-1.458-1.258-1.916-1.734-.46-.476-.732-.82-.816-1.03-.08-.21-.06-.38-.008-.5.05-.12.16-.23.332-.33.17-.1.35-.16.54-.18.19-.02.38-.006.56.042.18.05.35.13.5.24.15.11.28.24.39.39.11.15.2.3.26.46.06.16.08.31.06.45-.02.14-.08.27-.18.38-.1.11-.23.2-.38.27-.15.07-.3.1-.46.09-.16-.01-.32-.07-.48-.18-.16-.11-.3-.26-.43-.46-.13-.2-.24-.44-.32-.7-.08-.26-.14-.54-.14-.84s.01-.58.04-.88c.03-.3.09-.59.18-.87.09-.28.2-.54.34-.78.14-.24.3-.46.48-.65.18-.19.38-.34.58-.46.2-.12.42-.2.66-.23.24-.03.48-.02.72.03.24.05.47.14.68.27.21.13.4.29.57.49.17.2.32.42.44.66.12.24.22.5.28.78.06.28.08.57.06.86-.02.29-.09.57-.22.84-.13.27-.3.53-.52.76-.22.23-.48.43-.76.6-.28.17-.58.3-.9.39-.32.09-.65.13-.98.12-.33-.01-.66-.08-.98-.21-.32-.13-.63-.3-.92-.53-.29-.23-.55-.49-.77-.79-.22-.3-.4-.63-.5-.95-.1-.32-.14-.66-.12-.99.02-.33.1-.66.24-.97.14-.3.3-.59.49-.85.19-.26.39-.49.62-.7.23-.21.49-.39.75-.54.26-.15.53-.26.8-.35.27-.09.55-.13.82-.12.27.01.54.06.8.15.26.09.5.2.7.34.2.14.4.3.57.48.17.18.3.37.4.58.1.21.16.42.17.63.01.21-.02.42-.09.63-.07.21-.18.4-.33.56-.15.16-.32.29-.5.39-.18.1-.38.16-.58.17-.2.01-.4-.02-.6-.09-.2-.07-.39-.17-.55-.29-.16-.12-.3-.27-.4-.44-.1-.17-.16-.36-.16-.56 0-.2.04-.39.12-.57.08-.18.19-.34.33-.48.14-.14.29-.25.46-.33.17-.08.33-.12.5-.12.17 0 .34.03.5.09.16.06.31.13.44.22.13.09.25.19.34.3.09.11.16.22.2.34.04.12.06.24.06.36 0 .12-.02.24-.06.36-.04.12-.1.23-.19.34-.09.11-.19.2-.3.29-.11.09-.23.16-.36.21-.13.05-.27.08-.41.08-.14 0-.28-.02-.41-.06-.13-.04-.25-.1-.37-.17-.12-.07-.23-.15-.33-.23-.1-.08-.19-.17-.26-.26-.07-.09-.12-.19-.15-.3-.03-.11-.04-.22-.02-.33.02-.11.07-.21.14-.3.07-.09.15-.17.25-.23.1-.06.2-.1.3-.12.1-.02.2-.02.3-.01.1 0 .2.01.3.03.1.02.2.04.3.07.1.03.2.06.3.1.1.04.2.07.2.11s.01.07.01.09c0 .02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01-.004-.002-.006-.002zM12.924 1.638L12.924 1.638zM15.518 8.006c-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304.066.376.112.776.112 1.304H8V4.168h4.436c-.074-.784-.452-1.488-.992-1.928a5.2 5.2 0 00-3.444-1.296A5.28 5.28 0 002.72 5.6C2.72 7.024 3.736 8.304 4.984 8.948S7.096 9.772 8 9.772c1.78 0 2.928-.68 3.5-1.122l2.35 2.188c-1.396 1.28-3.328 2.052-5.78 2.052a7.99 7.99 0 01-7.8-7.988C.2 3.512 1.348 2.176 2.76 1.136S5.508 0 8 0a7.9 7.9 0 015.688 2.228 7.96 7.96 0 012.35 5.778z"></path><path d="M11.517 7.034c-.878-.492-1.74-.954-2.584-1.411-.84-.456-1.57-.852-2.196-1.189-.62-.33-.974-.6-1.074-.79a.294.294 0 01-.01-.07c.026-.065.176-.145.446-2.072 0 0-.294 1.706-2.502 1.954C2.192 3.654 0 5.4 0 7.55c0 2.15 1.572 4.1 3.4 5.922 1.82 1.82 3.8 3.484 5.952 3.484 2.152 0 3.7-1.5 3.7-3.75 0-2.25-1.534-3.75-3.7-3.75z"></path></svg>
Apple
</button>
</div>
</div>
</div>
</div>Composants associés
Composant du formulaire d’inscription
Un composant de formulaire d’inscription réactif avec un design skeuomorphe, une palette de couleurs sourdes et une prise en charge du mode sombre, adapté aux sites Web de voyage et de tourisme. Il imite des éléments du monde réel tels que des boutons en relief et des champs de saisie encastrés.
Composant du formulaire d’inscription
Un formulaire d’inscription simple et réactif pour une place de marché avec un style de design industriel, une palette de couleurs neutres chaudes et une prise en charge du mode sombre.
Formulaire d’inscription au skeuomorphisme Niveaux de gris
Un composant de formulaire d’inscription skeuomorphe en niveaux de gris pour les portefeuilles, avec une complexité modérée, un design réactif et un support de thème sombre, pas de Javascript. Images de picsum.photos et randomuser.me utilisées.