Files
flowbite-beardedtek.com/_gh_pages/authentication/register-3/index.html
2025-04-15 14:55:06 -08:00

293 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" class="">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="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">
<meta name="author" content="Flowbite">
<meta name="generator" content="Hugo 0.145.0">
<title>Tailwind CSS Register Page with background image - Flowbite</title>
<link rel="canonical" href="http://localhost:1313/authentication/register-3/">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="http://localhost:1313//app.css">
<link rel="apple-touch-icon" sizes="180x180" href="http://localhost:1313/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="http://localhost:1313/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="http://localhost:1313/favicon-16x16.png">
<link rel="icon" type="image/png" href="http://localhost:1313/favicon.ico">
<link rel="manifest" href="http://localhost:1313/site.webmanifest">
<link rel="mask-icon" href="http://localhost:1313/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@">
<meta name="twitter:creator" content="@">
<meta name="twitter:title" content="Tailwind CSS Register Page with background image - Flowbite">
<meta name="twitter:description" content="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">
<meta name="twitter:image" content="http://localhost:1313/marketing-ui/demo/images/og-image.jpg">
<!-- Facebook -->
<meta property="og:url" content="http://localhost:1313/authentication/register-3/">
<meta property="og:title" content="Tailwind CSS Register Page with background image - Flowbite">
<meta property="og:description" content="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">
<meta property="og:type" content="article">
<meta property="og:image" content="http://localhost:1313/marketing-ui/demo/images/og-image.jpg">
<meta property="og:image:type" content="image/png">
<script>
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark')
}
</script>
</head>
<body class="bg-gray-50 dark:bg-gray-800">
<header>
<nav id="mainNavbar" data-sticky="false" class="dark:bg-transparent bg-transparent border-gray-200 py-2.5 fixed w-full z-40 top-0 start-0 data-[sticky=true]:bg-white data-[sticky=true]:border-b dark:data-[sticky=true]:bg-gray-800 dark:data-[sticky=true]:border-gray-700">
<div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl px-4">
<a href="http://localhost:1313/" class="flex items-center">
<img src="http://localhost:1313/images/logo/no-padding.svg" class="h-8 mr-3" alt="Flowbite Logo" />
<span class="self-center text-3xl kanit-bold whitespace-nowrap dark:text-white">The Bearded Tek</span>
</a>
<div class="flex items-center lg:order-2">
<button id="themeToggle" data-tooltip-target="tooltip-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 mr-2.5">
<svg id="themeToggleDarkIcon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
<svg id="themeToggleLightIcon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</button>
<div id="tooltip-toggle" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-xs opacity-0 tooltip">
Toggle dark mode
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
<button id="mobile-menu-button" data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
<div class="hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1 bg-white dark:bg-gray-800 lg:bg-transparent lg:dark:bg-transparent mt-2 lg:mt-0" id="mobile-menu-2">
<ul class="flex flex-col rounded-lg font-medium lg:flex-row lg:space-x-8">
<li>
<a href="http://localhost:1313/" class="block py-2 pr-4 pl-3 text-gray-900 border-b border-gray-100 hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-white lg:dark:hover:text-primary-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700" aria-current="page">Home</a>
</li>
<li>
<a href="http://localhost:1313/services/services-1/" class="block py-2 pr-4 pl-3 text-gray-900 border-b border-gray-100 hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-white lg:dark:hover:text-primary-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Services</a>
</li>
<li>
<a href="http://localhost:1313/about/about-1/" class="block py-2 pr-4 pl-3 text-gray-900 border-b border-gray-100 hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-white lg:dark:hover:text-primary-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">About</a>
</li>
<li>
<a href="http://localhost:1313/pricing/pricing-1/" class="block py-2 pr-4 pl-3 text-gray-900 border-b border-gray-100 hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-white lg:dark:hover:text-primary-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Pricing</a>
</li>
<li>
<a href="http://localhost:1313/team/team-1/" class="block py-2 pr-4 pl-3 text-gray-900 border-b border-gray-100 hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-white lg:dark:hover:text-primary-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Team</a>
</li>
<li>
<a href="http://localhost:1313/blog/homepage/" class="block py-2 pr-4 pl-3 text-gray-900 hover:bg-gray-100 lg:hover:bg-transparent lg:hover:text-primary-700 lg:p-0 dark:text-white lg:dark:hover:text-primary-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Blog</a>
</li>
<li>
<a href="http://localhost:1313/contact/contact-1/" class="block py-2 pr-4 pl-3 text-gray-900 hover:bg-gray-100 lg:hover:bg-transparent lg:hover:text-primary-700 lg:p-0 dark:text-white lg:dark:hover:text-primary-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="w-full antialiased">
<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 Flowbites <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 worlds 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 worlds
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>
</main>
<script src="http://localhost:1313//app.bundle.js"></script>
</body>
</html>