mirror of
https://github.com/BeardedTek/flowbite-beardedtek.com.git
synced 2025-12-06 13:41:51 +00:00
INITIAL COMMIT
This commit is contained in:
167
content/authentication/register-3.html
Normal file
167
content/authentication/register-3.html
Normal file
@@ -0,0 +1,167 @@
|
||||
---
|
||||
title: Tailwind CSS Register Page with background image - Flowbite
|
||||
description: Get started with a collection of over 53 page templates based on Tailwind CSS for Marketing UI purposes including landing pages, contact pages, about pages, and more
|
||||
layout: main
|
||||
---
|
||||
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="grid lg:h-screen lg:grid-cols-2">
|
||||
<div class="relative flex items-center justify-center px-4 py-6 lg:py-0 sm:px-0">
|
||||
<form class="w-full max-w-md space-y-4 md:space-y-6 xl:max-w-xl" action="#">
|
||||
<h1 class="text-xl font-bold text-gray-900 dark:text-white">
|
||||
Your Best Work Starts Here
|
||||
</h1>
|
||||
|
||||
<div class="items-center space-x-0 space-y-3 sm:flex sm:space-x-4 sm:space-y-0">
|
||||
<a href="#"
|
||||
class="w-full inline-flex items-center justify-center py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
|
||||
<svg class="w-5 h-5 mr-2" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_13183_10121)">
|
||||
<path
|
||||
d="M20.3081 10.2303C20.3081 9.55056 20.253 8.86711 20.1354 8.19836H10.7031V12.0492H16.1046C15.8804 13.2911 15.1602 14.3898 14.1057 15.0879V17.5866H17.3282C19.2205 15.8449 20.3081 13.2728 20.3081 10.2303Z"
|
||||
fill="#3F83F8" />
|
||||
<path
|
||||
d="M10.7019 20.0006C13.3989 20.0006 15.6734 19.1151 17.3306 17.5865L14.1081 15.0879C13.2115 15.6979 12.0541 16.0433 10.7056 16.0433C8.09669 16.0433 5.88468 14.2832 5.091 11.9169H1.76562V14.4927C3.46322 17.8695 6.92087 20.0006 10.7019 20.0006V20.0006Z"
|
||||
fill="#34A853" />
|
||||
<path
|
||||
d="M5.08857 11.9169C4.66969 10.6749 4.66969 9.33008 5.08857 8.08811V5.51233H1.76688C0.348541 8.33798 0.348541 11.667 1.76688 14.4927L5.08857 11.9169V11.9169Z"
|
||||
fill="#FBBC04" />
|
||||
<path
|
||||
d="M10.7019 3.95805C12.1276 3.936 13.5055 4.47247 14.538 5.45722L17.393 2.60218C15.5852 0.904587 13.1858 -0.0287217 10.7019 0.000673888C6.92087 0.000673888 3.46322 2.13185 1.76562 5.51234L5.08732 8.08813C5.87733 5.71811 8.09302 3.95805 10.7019 3.95805V3.95805Z"
|
||||
fill="#EA4335" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_13183_10121">
|
||||
<rect width="20" height="20" fill="white" transform="translate(0.5)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
Sign up with Google
|
||||
</a>
|
||||
|
||||
<a href="#"
|
||||
class="w-full inline-flex items-center justify-center py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
|
||||
<svg class="w-5 h-5 mr-2 text-gray-900 dark:text-white" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24" fill="currentColor">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336 9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z">
|
||||
</path>
|
||||
</svg>
|
||||
Sign up with GitHub
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<div class="w-full h-px bg-gray-200 dark:bg-gray-700"></div>
|
||||
<div class="px-5 text-center text-gray-500 dark:text-gray-400">or</div>
|
||||
<div class="w-full h-px bg-gray-200 dark:bg-gray-700"></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
What should we call you?
|
||||
</label>
|
||||
<input type="text" name="name" id="name"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
|
||||
placeholder="e.g. Bonnie Green" required="">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email</label>
|
||||
<input type="email" name="email" id="email"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
|
||||
placeholder="name@flowbite.com" required="">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
|
||||
<input type="password" name="password" id="password" placeholder="••••••••"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
|
||||
required="">
|
||||
</div>
|
||||
|
||||
<div class="flex items-start">
|
||||
<div class="flex items-center h-5">
|
||||
<input id="remember" aria-describedby="remember" type="checkbox"
|
||||
class="w-4 h-4 border border-gray-300 rounded-sm bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
|
||||
required="">
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label for="remember" class="text-gray-500 dark:text-gray-400">
|
||||
By signing up, you are creating a Flowbite account, and you agree to Flowbite’s <a href="#"
|
||||
class="font-medium text-primary-700 dark:text-primary-500 hover:underline">Terms of Use</a> and <a href="#"
|
||||
class="font-medium text-primary-700 dark:text-primary-500 hover:underline">Privacy
|
||||
Policy</a>.
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start">
|
||||
<div class="flex items-center h-5">
|
||||
<input id="preferences" aria-describedby="preferences" type="checkbox"
|
||||
class="w-4 h-4 border border-gray-300 rounded-sm bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
|
||||
required="">
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label for="preferences" class="text-gray-500 dark:text-gray-400">
|
||||
Email me about product updates and resources.
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit"
|
||||
class="w-full text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
|
||||
Sign Up
|
||||
</button>
|
||||
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
Already have an account? <a href="#"
|
||||
class="font-medium text-primary-700 hover:underline dark:text-primary-500">Login here</a>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<div class="hidden lg:block absolute inset-x-0 bottom-0 p-8 text-center">
|
||||
<p class="text-sm font-normal text-gray-500 dark:text-gray-400">
|
||||
© 2021-<span id="currentYear">2023</span> Flowbite, LLC. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden lg:flex items-center justify-center px-4 py-6 bg-primary-600 lg:py-0 sm:px-0">
|
||||
<div class="max-w-md xl:max-w-xl">
|
||||
<a href="#" class="flex items-center mb-4 text-2xl font-semibold text-white">
|
||||
<img class="w-8 h-8 mr-2" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/logo.svg" alt="logo">
|
||||
Flowbite
|
||||
</a>
|
||||
|
||||
<h1 class="mb-4 text-3xl font-extrabold leading-none tracking-tight text-white xl:text-5xl">
|
||||
Explore the world’s leading design portfolios.
|
||||
</h1>
|
||||
<p class="mb-4 text-primary-200 lg:mb-8">
|
||||
Millions of designers and agencies around the world showcase their portfolio work on Flowbite - the home to
|
||||
the world’s
|
||||
best design and creative professionals.
|
||||
</p>
|
||||
|
||||
<div class="flex items-center divide-x divide-primary-500">
|
||||
<div class="flex pr-3 -space-x-4 sm:pr-5">
|
||||
<img class="w-10 h-10 border-2 rounded-full border-primary-600"
|
||||
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png" alt="bonnie avatar">
|
||||
<img class="w-10 h-10 border-2 rounded-full border-primary-600"
|
||||
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png" alt="jese avatar">
|
||||
<img class="w-10 h-10 border-2 rounded-full border-primary-600"
|
||||
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/roberta-casas.png"
|
||||
alt="roberta avatar">
|
||||
<img class="w-10 h-10 border-2 rounded-full border-primary-600"
|
||||
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/thomas-lean.png" alt="thomas avatar">
|
||||
</div>
|
||||
|
||||
<a href="#" class="pl-3 text-white sm:pl-5 dark:text-white">
|
||||
<span class="text-sm text-primary-200">Rated Best Over <span class="font-medium text-white">15.7k</span>
|
||||
Reviews</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user