Компонент регистрационной формы
Сложный, отзывчивый компонент регистрационной формы для финансовых/банковских приложений, отличающийся чистым, минималистичным дизайном с высококонтрастными цветами, яркой типографикой и макетом на основе сетки. Включает поддержку темного режима.
HTML-код
<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>Связанные компоненты
Компонент регистрационной формы
Адаптивный компонент регистрационной формы с поддержкой микровзаимодействий и темных тем, стилизованный под Tailwind CSS.
Компонент регистрационной формы
Адаптивный компонент формы регистрации со скевоморфным дизайном, приглушенной цветовой гаммой и поддержкой темного режима, подходит для сайтов о путешествиях и туризме. Он имитирует реальные элементы, такие как рельефные кнопки и утопленные поля ввода.
Retro_Charity_Registration_Form
Простой, отзывчивый компонент регистрационной формы с ретро/винтажной эстетикой сепии/коричневого цвета 80-х/90-х годов, предназначенный для некоммерческих/благотворительных целей, включая поддержку темного режима.