Use live example on hero section

[lakhansamani]

Instead of an image, use the following code

Note: replace classes from tailwind

<div className="flex-1 flex flex-col justify-center items-center bg-gray-50 rounded p-10 ml-0 md:ml-10 shadow-sm mt-10 md:-mt-12">
				<h3 className="font-extrabold text-2xl sm:text-3xl flex items-center pb-10">
					Try it now 👇
				</h3>
				<div className="block p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md w-full">
					{loading ? (
						<Loader />
					) : (
						<>
							{user ? (
								<div>
									<h1 className="font-extrabold text-xl md:text-2xl text-center">
										🙇‍♂️
									</h1>
									<p className="text-lg text-gray-600 text-center">
										Welcome, {user.email}
									</p>
									<h1 className="font-bold text-xl md:text-2xl text-center text-gray-800">
										Thank you for trying Authorizer demo
									</h1>

									<br />
									<div className="flex justify-center">
										<button
											type="button"
											className="text-white bg-blue-500 hover:bg-blue-400 font-medium rounded-lg text-lg px-8 py-2.5 mr-2 mb-2"
											onClick={logout}
										>
											Logout
										</button>
									</div>
								</div>
							) : (
								<div className="authorizer-login">
									<Authorizer />
								</div>
							)}
						</>
					)}
				</div>
			</div>