LoginView
Below you can find LoginView component styled with tailwindcss.
Preview - LoginWithPasswordView
Dashboard
Coworker Portal
HTML
<div class="py-3 flex justify-center items-center bg-brand-secondary-100">
<div class="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="w-full max-w-md min-w-[300px]">
<div>
<svg width="60" height="60" viewBox="0 0 99 115" fill="none" xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-auto">
<path d="M60.1268 76.1C60.1848 75.8346 60.2428 75.5692 60.2815 75.2936C60.3398 74.9048 60.3785 74.5129 60.3975 74.1197C60.4443 72.9646 60.3468 71.8079 60.1075 70.6797C60.1075 70.5776 60.1075 70.4653 60.0398 70.3632C59.2905 67.3668 57.5294 64.7631 55.0881 63.0427C52.6468 61.3223 49.6939 60.6039 46.7858 61.023H46.6505C44.0051 61.2254 41.3466 61.1193 38.7232 60.7066C30.9893 59.5633 25.8849 54.2348 24.2222 47.7323C21.8053 38.3309 26.4553 29.3582 36.9444 24.734C42.9672 22.0799 47.0759 16.2002 45.4711 9.50384C45.0905 7.90232 44.4145 6.39579 43.4818 5.0705C42.549 3.74522 41.3779 2.62721 40.0354 1.78048C38.693 0.933751 37.2055 0.374936 35.6582 0.136029C34.1109 -0.102878 32.5342 -0.0171846 31.0183 0.388202C25.0536 1.98063 21.7183 8.04411 22.1823 14.3934C23.0331 26.2141 20.0362 33.1453 7.41058 39.3006C7.08014 39.4529 6.75746 39.6233 6.44384 39.811C5.27 40.5221 4.22302 41.4445 3.35028 42.5365C3.14077 42.7945 2.94394 43.0637 2.76057 43.343C2.39314 43.9134 2.06985 44.5142 1.79383 45.1395C1.65849 45.4356 1.54248 45.7418 1.42647 46.0583C1.42262 46.0922 1.42262 46.1264 1.42647 46.1603C1.32013 46.4666 1.22345 46.7626 1.13645 47.079V47.2015C1.04944 47.518 0.972103 47.8344 0.914098 48.1509C0.914098 48.1509 0.914098 48.1509 0.914098 48.2325C0.856094 48.5456 0.807757 48.8858 0.769088 49.2533C0.769088 49.58 0.711083 49.9066 0.701416 50.2741V50.417C0.701416 50.7335 0.701416 51.0601 0.701416 51.3868C0.701416 51.4378 0.701416 51.4991 0.701416 51.5501C0.701416 51.8767 0.75942 52.2034 0.807757 52.5709C0.803128 52.615 0.803128 52.6595 0.807757 52.7036C0.857209 53.0476 0.924988 53.3884 1.01077 53.7244C1.08811 54.0612 1.18479 54.3981 1.29113 54.7452C1.29113 54.7452 1.29113 54.8268 1.29113 54.8779C1.3878 55.1841 1.50381 55.4903 1.62948 55.7864C1.65783 55.8379 1.68054 55.8927 1.69716 55.9497C1.8325 56.2355 1.96784 56.5213 2.11285 56.7969C2.11285 56.848 2.16119 56.8888 2.18053 56.9296C2.34487 57.2155 2.49955 57.4911 2.68323 57.7667C2.86691 58.0423 3.05059 58.3077 3.2536 58.5731C3.44695 58.8283 3.65964 59.0733 3.87232 59.3081L3.95932 59.3897C4.16971 59.624 4.39241 59.8455 4.62637 60.0533C4.64741 60.0823 4.6737 60.1065 4.70371 60.1247C4.9454 60.3493 5.18708 60.5534 5.43843 60.7474C5.97094 61.1573 6.53713 61.516 7.13023 61.8192C7.42025 61.9723 7.71027 62.1153 8.00996 62.2377H8.05829C9.32079 62.7565 10.6581 63.0431 12.0123 63.085C12.3603 63.085 12.6986 63.085 13.0467 63.085C23.0621 62.6461 29.9549 65.2082 34.1409 71.0471C35.2952 72.7638 36.2616 74.613 37.0218 76.5594L37.0798 76.6819C39.1003 82.1635 43.6246 86.0119 48.845 85.92C49.7218 85.9051 50.5942 85.7852 51.4455 85.5627C53.5225 85.009 55.4189 83.8721 56.9336 82.2727C58.4484 80.6733 59.525 78.6708 60.0495 76.4777C60.0882 76.3654 60.0978 76.2327 60.1268 76.1Z" fill="#5C99D2"></path>
<path d="M39.042 38.0252C38.984 38.3008 38.926 38.5662 38.8873 38.8316C38.829 39.2239 38.7903 39.6192 38.7713 40.0158C38.7163 41.1706 38.8107 42.3279 39.0516 43.4558C39.0516 43.5579 39.0516 43.6702 39.1193 43.7723C39.8705 46.7676 41.6321 49.3699 44.0729 51.09C46.5137 52.81 49.4655 53.5293 52.3733 53.1125H52.5183C55.1634 52.907 57.8218 53.0097 60.4456 53.4187C68.1795 54.5722 73.2838 59.9007 74.9466 66.4031C77.3635 75.8046 72.7135 84.7773 62.2244 89.4015C56.2112 92.0759 52.1026 97.9965 53.7074 104.652C54.0901 106.251 54.7673 107.754 55.7003 109.076C56.6333 110.398 57.8038 111.514 59.1449 112.358C60.4861 113.203 61.9717 113.76 63.5169 113.999C65.062 114.237 66.6365 114.151 68.1505 113.747C74.1152 112.145 77.4505 106.091 76.9961 99.7421C76.1357 87.9213 79.1326 80.9902 91.7679 74.8348C92.0869 74.6715 92.3963 74.5082 92.7346 74.3244C93.9064 73.6103 94.9529 72.6884 95.8282 71.5989C96.0312 71.3437 96.2342 71.0681 96.4179 70.7925C96.7843 70.2178 97.1075 69.6137 97.3846 68.9857C97.52 68.6795 97.6456 68.3732 97.752 68.067C97.7558 68.0331 97.7558 67.9988 97.752 67.9649C97.8583 67.6587 97.955 67.3627 98.042 67.0462C98.042 67.0462 98.042 66.9646 98.042 66.9237C98.1193 66.6073 98.1967 66.2908 98.2547 65.9744C98.2594 65.9474 98.2594 65.9197 98.2547 65.8927C98.3224 65.5661 98.361 65.2394 98.3997 64.8719C98.3997 64.5453 98.3997 64.2084 98.4577 63.8512V63.698C98.4577 63.3816 98.4577 63.0651 98.4577 62.7385C98.4577 62.7385 98.4577 62.6262 98.4577 62.565C98.4577 62.2383 98.4094 61.9219 98.361 61.5952V61.4523C98.361 61.1154 98.245 60.7684 98.1677 60.4315C98.0903 60.0947 97.984 59.7578 97.8777 59.4107V59.278C97.7713 58.9718 97.6553 58.6656 97.5296 58.3695C97.5013 58.318 97.4786 58.2632 97.462 58.2062C97.3363 57.9204 97.1913 57.6346 97.0463 57.3487V57.165C96.8935 56.8763 96.7257 56.5969 96.5436 56.3279C96.3599 56.0523 96.1762 55.7971 95.9732 55.5317V55.4705C95.7702 55.2255 95.5672 54.9805 95.3448 54.7457L95.2675 54.6539C95.0451 54.4293 94.8228 54.2047 94.6004 54.0005L94.5134 53.9189C94.2717 53.7045 94.03 53.5004 93.7787 53.3064C93.2417 52.9185 92.676 52.5772 92.0869 52.2856C91.7969 52.1427 91.4972 51.9998 91.1975 51.8773C89.9345 51.3618 88.5971 51.0787 87.2435 51.0403C86.9052 51.0403 86.5572 51.0403 86.2091 51.0403C76.2034 51.4894 69.3009 48.9272 65.1149 43.0883C64.0012 41.4022 63.0674 39.5912 62.3307 37.6884L62.2727 37.5557C60.2522 32.0842 55.7375 28.2359 50.5075 28.3686C49.6303 28.3787 48.7574 28.4986 47.907 28.7258C45.8309 29.2816 43.9355 30.4191 42.4211 32.0183C40.9066 33.6174 39.8293 35.6187 39.303 37.8109C39.0903 37.77 39.071 37.9027 39.042 38.0252Z" fill="#FF6D2A"></path>
</svg>
<h2 class="mt-3 text-center text-lg font-bold text-gray-900">Dashboard</h2>
<p class="mt-1 text-center text-xs text-gray-600">Coworker Portal</p>
</div>
<form class="mt-4" action="#" method="POST">
<input type="hidden" name="remember" value="true" />
<div class="-space-y-px rounded-md shadow-sm">
<div>
<div class>
<div class="group relative flex rounded border outline-0 text-neutral-300 hover:text-neutral-600 focus-within:text-neutral-600 focus-within:border-brand-primary-500 hover:focus-within:border-brand-primary-500 disabled:text-danger bg-white border-neutral-200 hover:border-neutral-300 pl-2">
<input class="peer rounded w-full pl-1 outline-0 placeholder:text-neutral-300 group-hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 valid:text-neutral-600 disabled:bg-neutral-200 disabled:placeholder:text-neutral-500 group-hover:disabled:placeholder:text-neutral-500 disabled:cursor-not-allowed py-1 px-1 text-xs" placeholder="Login" required />
</div>
</div>
</div>
<div>
<div class>
<div class="group relative flex rounded border outline-0 text-neutral-300 hover:text-neutral-600 focus-within:text-neutral-600 focus-within:border-brand-primary-500 hover:focus-within:border-brand-primary-500 disabled:text-danger bg-white border-neutral-200 hover:border-neutral-300 pl-2">
<input class="peer rounded w-full pl-1 outline-0 placeholder:text-neutral-300 group-hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 valid:text-neutral-600 disabled:bg-neutral-200 disabled:placeholder:text-neutral-500 group-hover:disabled:placeholder:text-neutral-500 disabled:cursor-not-allowed py-1 px-1 text-xs" placeholder="Password" required />
</div>
</div>
</div>
</div>
<div class="flex items-center justify-between mt-3">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-2 w-2 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
<label for="remember-me" class="ml-1 block text-xs text-gray-900">Remember me</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 text-xs">Forgot your password?</a>
</div>
</div>
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-600 focus-visible:outline-offset-2 py-1 px-3 text-sm w-[100%] justify-center mt-3 py-1">
<div class="flex items-center justify-center px-0.5 rounded w-100% text-center gap-1">Sign in</div>
</button>
</form>
</div>
</div>
</div>React
<div className="py-3 flex justify-center items-center bg-brand-secondary-100">
<div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div className="w-full max-w-md min-w-[300px]">
<div>
<svg width="60" height="60" viewBox="0 0 99 115" fill="none" xmlns="http://www.w3.org/2000/svg" className="mx-auto h-12 w-auto">
<path d="M60.1268 76.1C60.1848 75.8346 60.2428 75.5692 60.2815 75.2936C60.3398 74.9048 60.3785 74.5129 60.3975 74.1197C60.4443 72.9646 60.3468 71.8079 60.1075 70.6797C60.1075 70.5776 60.1075 70.4653 60.0398 70.3632C59.2905 67.3668 57.5294 64.7631 55.0881 63.0427C52.6468 61.3223 49.6939 60.6039 46.7858 61.023H46.6505C44.0051 61.2254 41.3466 61.1193 38.7232 60.7066C30.9893 59.5633 25.8849 54.2348 24.2222 47.7323C21.8053 38.3309 26.4553 29.3582 36.9444 24.734C42.9672 22.0799 47.0759 16.2002 45.4711 9.50384C45.0905 7.90232 44.4145 6.39579 43.4818 5.0705C42.549 3.74522 41.3779 2.62721 40.0354 1.78048C38.693 0.933751 37.2055 0.374936 35.6582 0.136029C34.1109 -0.102878 32.5342 -0.0171846 31.0183 0.388202C25.0536 1.98063 21.7183 8.04411 22.1823 14.3934C23.0331 26.2141 20.0362 33.1453 7.41058 39.3006C7.08014 39.4529 6.75746 39.6233 6.44384 39.811C5.27 40.5221 4.22302 41.4445 3.35028 42.5365C3.14077 42.7945 2.94394 43.0637 2.76057 43.343C2.39314 43.9134 2.06985 44.5142 1.79383 45.1395C1.65849 45.4356 1.54248 45.7418 1.42647 46.0583C1.42262 46.0922 1.42262 46.1264 1.42647 46.1603C1.32013 46.4666 1.22345 46.7626 1.13645 47.079V47.2015C1.04944 47.518 0.972103 47.8344 0.914098 48.1509C0.914098 48.1509 0.914098 48.1509 0.914098 48.2325C0.856094 48.5456 0.807757 48.8858 0.769088 49.2533C0.769088 49.58 0.711083 49.9066 0.701416 50.2741V50.417C0.701416 50.7335 0.701416 51.0601 0.701416 51.3868C0.701416 51.4378 0.701416 51.4991 0.701416 51.5501C0.701416 51.8767 0.75942 52.2034 0.807757 52.5709C0.803128 52.615 0.803128 52.6595 0.807757 52.7036C0.857209 53.0476 0.924988 53.3884 1.01077 53.7244C1.08811 54.0612 1.18479 54.3981 1.29113 54.7452C1.29113 54.7452 1.29113 54.8268 1.29113 54.8779C1.3878 55.1841 1.50381 55.4903 1.62948 55.7864C1.65783 55.8379 1.68054 55.8927 1.69716 55.9497C1.8325 56.2355 1.96784 56.5213 2.11285 56.7969C2.11285 56.848 2.16119 56.8888 2.18053 56.9296C2.34487 57.2155 2.49955 57.4911 2.68323 57.7667C2.86691 58.0423 3.05059 58.3077 3.2536 58.5731C3.44695 58.8283 3.65964 59.0733 3.87232 59.3081L3.95932 59.3897C4.16971 59.624 4.39241 59.8455 4.62637 60.0533C4.64741 60.0823 4.6737 60.1065 4.70371 60.1247C4.9454 60.3493 5.18708 60.5534 5.43843 60.7474C5.97094 61.1573 6.53713 61.516 7.13023 61.8192C7.42025 61.9723 7.71027 62.1153 8.00996 62.2377H8.05829C9.32079 62.7565 10.6581 63.0431 12.0123 63.085C12.3603 63.085 12.6986 63.085 13.0467 63.085C23.0621 62.6461 29.9549 65.2082 34.1409 71.0471C35.2952 72.7638 36.2616 74.613 37.0218 76.5594L37.0798 76.6819C39.1003 82.1635 43.6246 86.0119 48.845 85.92C49.7218 85.9051 50.5942 85.7852 51.4455 85.5627C53.5225 85.009 55.4189 83.8721 56.9336 82.2727C58.4484 80.6733 59.525 78.6708 60.0495 76.4777C60.0882 76.3654 60.0978 76.2327 60.1268 76.1Z" fill="#5C99D2"></path>
<path d="M39.042 38.0252C38.984 38.3008 38.926 38.5662 38.8873 38.8316C38.829 39.2239 38.7903 39.6192 38.7713 40.0158C38.7163 41.1706 38.8107 42.3279 39.0516 43.4558C39.0516 43.5579 39.0516 43.6702 39.1193 43.7723C39.8705 46.7676 41.6321 49.3699 44.0729 51.09C46.5137 52.81 49.4655 53.5293 52.3733 53.1125H52.5183C55.1634 52.907 57.8218 53.0097 60.4456 53.4187C68.1795 54.5722 73.2838 59.9007 74.9466 66.4031C77.3635 75.8046 72.7135 84.7773 62.2244 89.4015C56.2112 92.0759 52.1026 97.9965 53.7074 104.652C54.0901 106.251 54.7673 107.754 55.7003 109.076C56.6333 110.398 57.8038 111.514 59.1449 112.358C60.4861 113.203 61.9717 113.76 63.5169 113.999C65.062 114.237 66.6365 114.151 68.1505 113.747C74.1152 112.145 77.4505 106.091 76.9961 99.7421C76.1357 87.9213 79.1326 80.9902 91.7679 74.8348C92.0869 74.6715 92.3963 74.5082 92.7346 74.3244C93.9064 73.6103 94.9529 72.6884 95.8282 71.5989C96.0312 71.3437 96.2342 71.0681 96.4179 70.7925C96.7843 70.2178 97.1075 69.6137 97.3846 68.9857C97.52 68.6795 97.6456 68.3732 97.752 68.067C97.7558 68.0331 97.7558 67.9988 97.752 67.9649C97.8583 67.6587 97.955 67.3627 98.042 67.0462C98.042 67.0462 98.042 66.9646 98.042 66.9237C98.1193 66.6073 98.1967 66.2908 98.2547 65.9744C98.2594 65.9474 98.2594 65.9197 98.2547 65.8927C98.3224 65.5661 98.361 65.2394 98.3997 64.8719C98.3997 64.5453 98.3997 64.2084 98.4577 63.8512V63.698C98.4577 63.3816 98.4577 63.0651 98.4577 62.7385C98.4577 62.7385 98.4577 62.6262 98.4577 62.565C98.4577 62.2383 98.4094 61.9219 98.361 61.5952V61.4523C98.361 61.1154 98.245 60.7684 98.1677 60.4315C98.0903 60.0947 97.984 59.7578 97.8777 59.4107V59.278C97.7713 58.9718 97.6553 58.6656 97.5296 58.3695C97.5013 58.318 97.4786 58.2632 97.462 58.2062C97.3363 57.9204 97.1913 57.6346 97.0463 57.3487V57.165C96.8935 56.8763 96.7257 56.5969 96.5436 56.3279C96.3599 56.0523 96.1762 55.7971 95.9732 55.5317V55.4705C95.7702 55.2255 95.5672 54.9805 95.3448 54.7457L95.2675 54.6539C95.0451 54.4293 94.8228 54.2047 94.6004 54.0005L94.5134 53.9189C94.2717 53.7045 94.03 53.5004 93.7787 53.3064C93.2417 52.9185 92.676 52.5772 92.0869 52.2856C91.7969 52.1427 91.4972 51.9998 91.1975 51.8773C89.9345 51.3618 88.5971 51.0787 87.2435 51.0403C86.9052 51.0403 86.5572 51.0403 86.2091 51.0403C76.2034 51.4894 69.3009 48.9272 65.1149 43.0883C64.0012 41.4022 63.0674 39.5912 62.3307 37.6884L62.2727 37.5557C60.2522 32.0842 55.7375 28.2359 50.5075 28.3686C49.6303 28.3787 48.7574 28.4986 47.907 28.7258C45.8309 29.2816 43.9355 30.4191 42.4211 32.0183C40.9066 33.6174 39.8293 35.6187 39.303 37.8109C39.0903 37.77 39.071 37.9027 39.042 38.0252Z" fill="#FF6D2A"></path>
</svg>
<h2 className="mt-3 text-center text-lg font-bold text-gray-900">Dashboard</h2>
<p className="mt-1 text-center text-xs text-gray-600">Coworker Portal</p>
</div>
<form className="mt-4" action="#" method="POST">
<input type="hidden" name="remember" value="true" />
<div className="-space-y-px rounded-md shadow-sm">
<div>
<div class>
<div className="group relative flex rounded border outline-0 text-neutral-300 hover:text-neutral-600 focus-within:text-neutral-600 focus-within:border-brand-primary-500 hover:focus-within:border-brand-primary-500 disabled:text-danger bg-white border-neutral-200 hover:border-neutral-300 pl-2">
<input className="peer rounded w-full pl-1 outline-0 placeholder:text-neutral-300 group-hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 valid:text-neutral-600 disabled:bg-neutral-200 disabled:placeholder:text-neutral-500 group-hover:disabled:placeholder:text-neutral-500 disabled:cursor-not-allowed py-1 px-1 text-xs" placeholder="Login" required />
</div>
</div>
</div>
<div>
<div class>
<div className="group relative flex rounded border outline-0 text-neutral-300 hover:text-neutral-600 focus-within:text-neutral-600 focus-within:border-brand-primary-500 hover:focus-within:border-brand-primary-500 disabled:text-danger bg-white border-neutral-200 hover:border-neutral-300 pl-2">
<input className="peer rounded w-full pl-1 outline-0 placeholder:text-neutral-300 group-hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 valid:text-neutral-600 disabled:bg-neutral-200 disabled:placeholder:text-neutral-500 group-hover:disabled:placeholder:text-neutral-500 disabled:cursor-not-allowed py-1 px-1 text-xs" placeholder="Password" required />
</div>
</div>
</div>
</div>
<div className="flex items-center justify-between mt-3">
<div className="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" className="h-2 w-2 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
<label for="remember-me" className="ml-1 block text-xs text-gray-900">Remember me</label>
</div>
<div className="text-sm">
<a href="#" className="font-medium text-indigo-600 hover:text-indigo-500 text-xs">Forgot your password?</a>
</div>
</div>
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-600 focus-visible:outline-offset-2 py-1 px-3 text-sm w-[100%] justify-center mt-3 py-1">
<div className="flex items-center justify-center px-0.5 rounded w-100% text-center gap-1">Sign in</div>
</button>
</form>
</div>
</div>
</div>Preview - OAuthLoginView
Dashboard
Coworker Portal
HTML
<div class="py-3 flex justify-center items-center bg-brand-secondary-100">
<div class="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="w-full max-w-md">
<div>
<svg width="60" height="60" viewBox="0 0 99 115" fill="none" xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-auto">
<path d="M60.1268 76.1C60.1848 75.8346 60.2428 75.5692 60.2815 75.2936C60.3398 74.9048 60.3785 74.5129 60.3975 74.1197C60.4443 72.9646 60.3468 71.8079 60.1075 70.6797C60.1075 70.5776 60.1075 70.4653 60.0398 70.3632C59.2905 67.3668 57.5294 64.7631 55.0881 63.0427C52.6468 61.3223 49.6939 60.6039 46.7858 61.023H46.6505C44.0051 61.2254 41.3466 61.1193 38.7232 60.7066C30.9893 59.5633 25.8849 54.2348 24.2222 47.7323C21.8053 38.3309 26.4553 29.3582 36.9444 24.734C42.9672 22.0799 47.0759 16.2002 45.4711 9.50384C45.0905 7.90232 44.4145 6.39579 43.4818 5.0705C42.549 3.74522 41.3779 2.62721 40.0354 1.78048C38.693 0.933751 37.2055 0.374936 35.6582 0.136029C34.1109 -0.102878 32.5342 -0.0171846 31.0183 0.388202C25.0536 1.98063 21.7183 8.04411 22.1823 14.3934C23.0331 26.2141 20.0362 33.1453 7.41058 39.3006C7.08014 39.4529 6.75746 39.6233 6.44384 39.811C5.27 40.5221 4.22302 41.4445 3.35028 42.5365C3.14077 42.7945 2.94394 43.0637 2.76057 43.343C2.39314 43.9134 2.06985 44.5142 1.79383 45.1395C1.65849 45.4356 1.54248 45.7418 1.42647 46.0583C1.42262 46.0922 1.42262 46.1264 1.42647 46.1603C1.32013 46.4666 1.22345 46.7626 1.13645 47.079V47.2015C1.04944 47.518 0.972103 47.8344 0.914098 48.1509C0.914098 48.1509 0.914098 48.1509 0.914098 48.2325C0.856094 48.5456 0.807757 48.8858 0.769088 49.2533C0.769088 49.58 0.711083 49.9066 0.701416 50.2741V50.417C0.701416 50.7335 0.701416 51.0601 0.701416 51.3868C0.701416 51.4378 0.701416 51.4991 0.701416 51.5501C0.701416 51.8767 0.75942 52.2034 0.807757 52.5709C0.803128 52.615 0.803128 52.6595 0.807757 52.7036C0.857209 53.0476 0.924988 53.3884 1.01077 53.7244C1.08811 54.0612 1.18479 54.3981 1.29113 54.7452C1.29113 54.7452 1.29113 54.8268 1.29113 54.8779C1.3878 55.1841 1.50381 55.4903 1.62948 55.7864C1.65783 55.8379 1.68054 55.8927 1.69716 55.9497C1.8325 56.2355 1.96784 56.5213 2.11285 56.7969C2.11285 56.848 2.16119 56.8888 2.18053 56.9296C2.34487 57.2155 2.49955 57.4911 2.68323 57.7667C2.86691 58.0423 3.05059 58.3077 3.2536 58.5731C3.44695 58.8283 3.65964 59.0733 3.87232 59.3081L3.95932 59.3897C4.16971 59.624 4.39241 59.8455 4.62637 60.0533C4.64741 60.0823 4.6737 60.1065 4.70371 60.1247C4.9454 60.3493 5.18708 60.5534 5.43843 60.7474C5.97094 61.1573 6.53713 61.516 7.13023 61.8192C7.42025 61.9723 7.71027 62.1153 8.00996 62.2377H8.05829C9.32079 62.7565 10.6581 63.0431 12.0123 63.085C12.3603 63.085 12.6986 63.085 13.0467 63.085C23.0621 62.6461 29.9549 65.2082 34.1409 71.0471C35.2952 72.7638 36.2616 74.613 37.0218 76.5594L37.0798 76.6819C39.1003 82.1635 43.6246 86.0119 48.845 85.92C49.7218 85.9051 50.5942 85.7852 51.4455 85.5627C53.5225 85.009 55.4189 83.8721 56.9336 82.2727C58.4484 80.6733 59.525 78.6708 60.0495 76.4777C60.0882 76.3654 60.0978 76.2327 60.1268 76.1Z" fill="#5C99D2"></path>
<path d="M39.042 38.0252C38.984 38.3008 38.926 38.5662 38.8873 38.8316C38.829 39.2239 38.7903 39.6192 38.7713 40.0158C38.7163 41.1706 38.8107 42.3279 39.0516 43.4558C39.0516 43.5579 39.0516 43.6702 39.1193 43.7723C39.8705 46.7676 41.6321 49.3699 44.0729 51.09C46.5137 52.81 49.4655 53.5293 52.3733 53.1125H52.5183C55.1634 52.907 57.8218 53.0097 60.4456 53.4187C68.1795 54.5722 73.2838 59.9007 74.9466 66.4031C77.3635 75.8046 72.7135 84.7773 62.2244 89.4015C56.2112 92.0759 52.1026 97.9965 53.7074 104.652C54.0901 106.251 54.7673 107.754 55.7003 109.076C56.6333 110.398 57.8038 111.514 59.1449 112.358C60.4861 113.203 61.9717 113.76 63.5169 113.999C65.062 114.237 66.6365 114.151 68.1505 113.747C74.1152 112.145 77.4505 106.091 76.9961 99.7421C76.1357 87.9213 79.1326 80.9902 91.7679 74.8348C92.0869 74.6715 92.3963 74.5082 92.7346 74.3244C93.9064 73.6103 94.9529 72.6884 95.8282 71.5989C96.0312 71.3437 96.2342 71.0681 96.4179 70.7925C96.7843 70.2178 97.1075 69.6137 97.3846 68.9857C97.52 68.6795 97.6456 68.3732 97.752 68.067C97.7558 68.0331 97.7558 67.9988 97.752 67.9649C97.8583 67.6587 97.955 67.3627 98.042 67.0462C98.042 67.0462 98.042 66.9646 98.042 66.9237C98.1193 66.6073 98.1967 66.2908 98.2547 65.9744C98.2594 65.9474 98.2594 65.9197 98.2547 65.8927C98.3224 65.5661 98.361 65.2394 98.3997 64.8719C98.3997 64.5453 98.3997 64.2084 98.4577 63.8512V63.698C98.4577 63.3816 98.4577 63.0651 98.4577 62.7385C98.4577 62.7385 98.4577 62.6262 98.4577 62.565C98.4577 62.2383 98.4094 61.9219 98.361 61.5952V61.4523C98.361 61.1154 98.245 60.7684 98.1677 60.4315C98.0903 60.0947 97.984 59.7578 97.8777 59.4107V59.278C97.7713 58.9718 97.6553 58.6656 97.5296 58.3695C97.5013 58.318 97.4786 58.2632 97.462 58.2062C97.3363 57.9204 97.1913 57.6346 97.0463 57.3487V57.165C96.8935 56.8763 96.7257 56.5969 96.5436 56.3279C96.3599 56.0523 96.1762 55.7971 95.9732 55.5317V55.4705C95.7702 55.2255 95.5672 54.9805 95.3448 54.7457L95.2675 54.6539C95.0451 54.4293 94.8228 54.2047 94.6004 54.0005L94.5134 53.9189C94.2717 53.7045 94.03 53.5004 93.7787 53.3064C93.2417 52.9185 92.676 52.5772 92.0869 52.2856C91.7969 52.1427 91.4972 51.9998 91.1975 51.8773C89.9345 51.3618 88.5971 51.0787 87.2435 51.0403C86.9052 51.0403 86.5572 51.0403 86.2091 51.0403C76.2034 51.4894 69.3009 48.9272 65.1149 43.0883C64.0012 41.4022 63.0674 39.5912 62.3307 37.6884L62.2727 37.5557C60.2522 32.0842 55.7375 28.2359 50.5075 28.3686C49.6303 28.3787 48.7574 28.4986 47.907 28.7258C45.8309 29.2816 43.9355 30.4191 42.4211 32.0183C40.9066 33.6174 39.8293 35.6187 39.303 37.8109C39.0903 37.77 39.071 37.9027 39.042 38.0252Z" fill="#FF6D2A"></path>
</svg>
<h2 class="mt-3 text-center text-lg font-bold text-gray-900">Dashboard</h2>
<p class="mt-1 text-center text-xs text-gray-600">Coworker Portal</p>
</div>
<div class="mt-4 grid grid-cols-3 gap-3">
<div>
<a href="#" class="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white py-2 px-2 text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50">
<span class="sr-only">Sign in with Facebook</span>
<svg class="h-2 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z" clipRule="evenodd"></path>
</svg>
</a>
</div>
<div>
<a href="#" class="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white py-2 px-2 text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50">
<span class="sr-only">Sign in with Twitter</span>
<svg class="h-2 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
<path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84"></path>
</svg>
</a>
</div>
<div>
<a href="#" class="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white py-2 px-2 text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50">
<span class="sr-only">Sign in with GitHub</span>
<svg class="h-2 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>React
<div className="py-3 flex justify-center items-center bg-brand-secondary-100">
<div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div className="w-full max-w-md">
<div>
<svg width="60" height="60" viewBox="0 0 99 115" fill="none" xmlns="http://www.w3.org/2000/svg" className="mx-auto h-12 w-auto">
<path d="M60.1268 76.1C60.1848 75.8346 60.2428 75.5692 60.2815 75.2936C60.3398 74.9048 60.3785 74.5129 60.3975 74.1197C60.4443 72.9646 60.3468 71.8079 60.1075 70.6797C60.1075 70.5776 60.1075 70.4653 60.0398 70.3632C59.2905 67.3668 57.5294 64.7631 55.0881 63.0427C52.6468 61.3223 49.6939 60.6039 46.7858 61.023H46.6505C44.0051 61.2254 41.3466 61.1193 38.7232 60.7066C30.9893 59.5633 25.8849 54.2348 24.2222 47.7323C21.8053 38.3309 26.4553 29.3582 36.9444 24.734C42.9672 22.0799 47.0759 16.2002 45.4711 9.50384C45.0905 7.90232 44.4145 6.39579 43.4818 5.0705C42.549 3.74522 41.3779 2.62721 40.0354 1.78048C38.693 0.933751 37.2055 0.374936 35.6582 0.136029C34.1109 -0.102878 32.5342 -0.0171846 31.0183 0.388202C25.0536 1.98063 21.7183 8.04411 22.1823 14.3934C23.0331 26.2141 20.0362 33.1453 7.41058 39.3006C7.08014 39.4529 6.75746 39.6233 6.44384 39.811C5.27 40.5221 4.22302 41.4445 3.35028 42.5365C3.14077 42.7945 2.94394 43.0637 2.76057 43.343C2.39314 43.9134 2.06985 44.5142 1.79383 45.1395C1.65849 45.4356 1.54248 45.7418 1.42647 46.0583C1.42262 46.0922 1.42262 46.1264 1.42647 46.1603C1.32013 46.4666 1.22345 46.7626 1.13645 47.079V47.2015C1.04944 47.518 0.972103 47.8344 0.914098 48.1509C0.914098 48.1509 0.914098 48.1509 0.914098 48.2325C0.856094 48.5456 0.807757 48.8858 0.769088 49.2533C0.769088 49.58 0.711083 49.9066 0.701416 50.2741V50.417C0.701416 50.7335 0.701416 51.0601 0.701416 51.3868C0.701416 51.4378 0.701416 51.4991 0.701416 51.5501C0.701416 51.8767 0.75942 52.2034 0.807757 52.5709C0.803128 52.615 0.803128 52.6595 0.807757 52.7036C0.857209 53.0476 0.924988 53.3884 1.01077 53.7244C1.08811 54.0612 1.18479 54.3981 1.29113 54.7452C1.29113 54.7452 1.29113 54.8268 1.29113 54.8779C1.3878 55.1841 1.50381 55.4903 1.62948 55.7864C1.65783 55.8379 1.68054 55.8927 1.69716 55.9497C1.8325 56.2355 1.96784 56.5213 2.11285 56.7969C2.11285 56.848 2.16119 56.8888 2.18053 56.9296C2.34487 57.2155 2.49955 57.4911 2.68323 57.7667C2.86691 58.0423 3.05059 58.3077 3.2536 58.5731C3.44695 58.8283 3.65964 59.0733 3.87232 59.3081L3.95932 59.3897C4.16971 59.624 4.39241 59.8455 4.62637 60.0533C4.64741 60.0823 4.6737 60.1065 4.70371 60.1247C4.9454 60.3493 5.18708 60.5534 5.43843 60.7474C5.97094 61.1573 6.53713 61.516 7.13023 61.8192C7.42025 61.9723 7.71027 62.1153 8.00996 62.2377H8.05829C9.32079 62.7565 10.6581 63.0431 12.0123 63.085C12.3603 63.085 12.6986 63.085 13.0467 63.085C23.0621 62.6461 29.9549 65.2082 34.1409 71.0471C35.2952 72.7638 36.2616 74.613 37.0218 76.5594L37.0798 76.6819C39.1003 82.1635 43.6246 86.0119 48.845 85.92C49.7218 85.9051 50.5942 85.7852 51.4455 85.5627C53.5225 85.009 55.4189 83.8721 56.9336 82.2727C58.4484 80.6733 59.525 78.6708 60.0495 76.4777C60.0882 76.3654 60.0978 76.2327 60.1268 76.1Z" fill="#5C99D2"></path>
<path d="M39.042 38.0252C38.984 38.3008 38.926 38.5662 38.8873 38.8316C38.829 39.2239 38.7903 39.6192 38.7713 40.0158C38.7163 41.1706 38.8107 42.3279 39.0516 43.4558C39.0516 43.5579 39.0516 43.6702 39.1193 43.7723C39.8705 46.7676 41.6321 49.3699 44.0729 51.09C46.5137 52.81 49.4655 53.5293 52.3733 53.1125H52.5183C55.1634 52.907 57.8218 53.0097 60.4456 53.4187C68.1795 54.5722 73.2838 59.9007 74.9466 66.4031C77.3635 75.8046 72.7135 84.7773 62.2244 89.4015C56.2112 92.0759 52.1026 97.9965 53.7074 104.652C54.0901 106.251 54.7673 107.754 55.7003 109.076C56.6333 110.398 57.8038 111.514 59.1449 112.358C60.4861 113.203 61.9717 113.76 63.5169 113.999C65.062 114.237 66.6365 114.151 68.1505 113.747C74.1152 112.145 77.4505 106.091 76.9961 99.7421C76.1357 87.9213 79.1326 80.9902 91.7679 74.8348C92.0869 74.6715 92.3963 74.5082 92.7346 74.3244C93.9064 73.6103 94.9529 72.6884 95.8282 71.5989C96.0312 71.3437 96.2342 71.0681 96.4179 70.7925C96.7843 70.2178 97.1075 69.6137 97.3846 68.9857C97.52 68.6795 97.6456 68.3732 97.752 68.067C97.7558 68.0331 97.7558 67.9988 97.752 67.9649C97.8583 67.6587 97.955 67.3627 98.042 67.0462C98.042 67.0462 98.042 66.9646 98.042 66.9237C98.1193 66.6073 98.1967 66.2908 98.2547 65.9744C98.2594 65.9474 98.2594 65.9197 98.2547 65.8927C98.3224 65.5661 98.361 65.2394 98.3997 64.8719C98.3997 64.5453 98.3997 64.2084 98.4577 63.8512V63.698C98.4577 63.3816 98.4577 63.0651 98.4577 62.7385C98.4577 62.7385 98.4577 62.6262 98.4577 62.565C98.4577 62.2383 98.4094 61.9219 98.361 61.5952V61.4523C98.361 61.1154 98.245 60.7684 98.1677 60.4315C98.0903 60.0947 97.984 59.7578 97.8777 59.4107V59.278C97.7713 58.9718 97.6553 58.6656 97.5296 58.3695C97.5013 58.318 97.4786 58.2632 97.462 58.2062C97.3363 57.9204 97.1913 57.6346 97.0463 57.3487V57.165C96.8935 56.8763 96.7257 56.5969 96.5436 56.3279C96.3599 56.0523 96.1762 55.7971 95.9732 55.5317V55.4705C95.7702 55.2255 95.5672 54.9805 95.3448 54.7457L95.2675 54.6539C95.0451 54.4293 94.8228 54.2047 94.6004 54.0005L94.5134 53.9189C94.2717 53.7045 94.03 53.5004 93.7787 53.3064C93.2417 52.9185 92.676 52.5772 92.0869 52.2856C91.7969 52.1427 91.4972 51.9998 91.1975 51.8773C89.9345 51.3618 88.5971 51.0787 87.2435 51.0403C86.9052 51.0403 86.5572 51.0403 86.2091 51.0403C76.2034 51.4894 69.3009 48.9272 65.1149 43.0883C64.0012 41.4022 63.0674 39.5912 62.3307 37.6884L62.2727 37.5557C60.2522 32.0842 55.7375 28.2359 50.5075 28.3686C49.6303 28.3787 48.7574 28.4986 47.907 28.7258C45.8309 29.2816 43.9355 30.4191 42.4211 32.0183C40.9066 33.6174 39.8293 35.6187 39.303 37.8109C39.0903 37.77 39.071 37.9027 39.042 38.0252Z" fill="#FF6D2A"></path>
</svg>
<h2 className="mt-3 text-center text-lg font-bold text-gray-900">Dashboard</h2>
<p className="mt-1 text-center text-xs text-gray-600">Coworker Portal</p>
</div>
<div className="mt-4 grid grid-cols-3 gap-3">
<div>
<a href="#" className="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white py-2 px-2 text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50">
<span className="sr-only">Sign in with Facebook</span>
<svg className="h-2 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z" clipRule="evenodd"></path>
</svg>
</a>
</div>
<div>
<a href="#" className="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white py-2 px-2 text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50">
<span className="sr-only">Sign in with Twitter</span>
<svg className="h-2 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
<path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84"></path>
</svg>
</a>
</div>
<div>
<a href="#" className="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white py-2 px-2 text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50">
<span className="sr-only">Sign in with GitHub</span>
<svg className="h-2 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>Preview - GoogleAuthView
Dashboard
Coworker Portal
HTML
<div class="py-3 flex justify-center items-center bg-brand-secondary-100">
<div class="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="w-full max-w-md">
<div>
<svg width="60" height="60" viewBox="0 0 99 115" fill="none" xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-auto">
<path d="M60.1268 76.1C60.1848 75.8346 60.2428 75.5692 60.2815 75.2936C60.3398 74.9048 60.3785 74.5129 60.3975 74.1197C60.4443 72.9646 60.3468 71.8079 60.1075 70.6797C60.1075 70.5776 60.1075 70.4653 60.0398 70.3632C59.2905 67.3668 57.5294 64.7631 55.0881 63.0427C52.6468 61.3223 49.6939 60.6039 46.7858 61.023H46.6505C44.0051 61.2254 41.3466 61.1193 38.7232 60.7066C30.9893 59.5633 25.8849 54.2348 24.2222 47.7323C21.8053 38.3309 26.4553 29.3582 36.9444 24.734C42.9672 22.0799 47.0759 16.2002 45.4711 9.50384C45.0905 7.90232 44.4145 6.39579 43.4818 5.0705C42.549 3.74522 41.3779 2.62721 40.0354 1.78048C38.693 0.933751 37.2055 0.374936 35.6582 0.136029C34.1109 -0.102878 32.5342 -0.0171846 31.0183 0.388202C25.0536 1.98063 21.7183 8.04411 22.1823 14.3934C23.0331 26.2141 20.0362 33.1453 7.41058 39.3006C7.08014 39.4529 6.75746 39.6233 6.44384 39.811C5.27 40.5221 4.22302 41.4445 3.35028 42.5365C3.14077 42.7945 2.94394 43.0637 2.76057 43.343C2.39314 43.9134 2.06985 44.5142 1.79383 45.1395C1.65849 45.4356 1.54248 45.7418 1.42647 46.0583C1.42262 46.0922 1.42262 46.1264 1.42647 46.1603C1.32013 46.4666 1.22345 46.7626 1.13645 47.079V47.2015C1.04944 47.518 0.972103 47.8344 0.914098 48.1509C0.914098 48.1509 0.914098 48.1509 0.914098 48.2325C0.856094 48.5456 0.807757 48.8858 0.769088 49.2533C0.769088 49.58 0.711083 49.9066 0.701416 50.2741V50.417C0.701416 50.7335 0.701416 51.0601 0.701416 51.3868C0.701416 51.4378 0.701416 51.4991 0.701416 51.5501C0.701416 51.8767 0.75942 52.2034 0.807757 52.5709C0.803128 52.615 0.803128 52.6595 0.807757 52.7036C0.857209 53.0476 0.924988 53.3884 1.01077 53.7244C1.08811 54.0612 1.18479 54.3981 1.29113 54.7452C1.29113 54.7452 1.29113 54.8268 1.29113 54.8779C1.3878 55.1841 1.50381 55.4903 1.62948 55.7864C1.65783 55.8379 1.68054 55.8927 1.69716 55.9497C1.8325 56.2355 1.96784 56.5213 2.11285 56.7969C2.11285 56.848 2.16119 56.8888 2.18053 56.9296C2.34487 57.2155 2.49955 57.4911 2.68323 57.7667C2.86691 58.0423 3.05059 58.3077 3.2536 58.5731C3.44695 58.8283 3.65964 59.0733 3.87232 59.3081L3.95932 59.3897C4.16971 59.624 4.39241 59.8455 4.62637 60.0533C4.64741 60.0823 4.6737 60.1065 4.70371 60.1247C4.9454 60.3493 5.18708 60.5534 5.43843 60.7474C5.97094 61.1573 6.53713 61.516 7.13023 61.8192C7.42025 61.9723 7.71027 62.1153 8.00996 62.2377H8.05829C9.32079 62.7565 10.6581 63.0431 12.0123 63.085C12.3603 63.085 12.6986 63.085 13.0467 63.085C23.0621 62.6461 29.9549 65.2082 34.1409 71.0471C35.2952 72.7638 36.2616 74.613 37.0218 76.5594L37.0798 76.6819C39.1003 82.1635 43.6246 86.0119 48.845 85.92C49.7218 85.9051 50.5942 85.7852 51.4455 85.5627C53.5225 85.009 55.4189 83.8721 56.9336 82.2727C58.4484 80.6733 59.525 78.6708 60.0495 76.4777C60.0882 76.3654 60.0978 76.2327 60.1268 76.1Z" fill="#5C99D2"></path>
<path d="M39.042 38.0252C38.984 38.3008 38.926 38.5662 38.8873 38.8316C38.829 39.2239 38.7903 39.6192 38.7713 40.0158C38.7163 41.1706 38.8107 42.3279 39.0516 43.4558C39.0516 43.5579 39.0516 43.6702 39.1193 43.7723C39.8705 46.7676 41.6321 49.3699 44.0729 51.09C46.5137 52.81 49.4655 53.5293 52.3733 53.1125H52.5183C55.1634 52.907 57.8218 53.0097 60.4456 53.4187C68.1795 54.5722 73.2838 59.9007 74.9466 66.4031C77.3635 75.8046 72.7135 84.7773 62.2244 89.4015C56.2112 92.0759 52.1026 97.9965 53.7074 104.652C54.0901 106.251 54.7673 107.754 55.7003 109.076C56.6333 110.398 57.8038 111.514 59.1449 112.358C60.4861 113.203 61.9717 113.76 63.5169 113.999C65.062 114.237 66.6365 114.151 68.1505 113.747C74.1152 112.145 77.4505 106.091 76.9961 99.7421C76.1357 87.9213 79.1326 80.9902 91.7679 74.8348C92.0869 74.6715 92.3963 74.5082 92.7346 74.3244C93.9064 73.6103 94.9529 72.6884 95.8282 71.5989C96.0312 71.3437 96.2342 71.0681 96.4179 70.7925C96.7843 70.2178 97.1075 69.6137 97.3846 68.9857C97.52 68.6795 97.6456 68.3732 97.752 68.067C97.7558 68.0331 97.7558 67.9988 97.752 67.9649C97.8583 67.6587 97.955 67.3627 98.042 67.0462C98.042 67.0462 98.042 66.9646 98.042 66.9237C98.1193 66.6073 98.1967 66.2908 98.2547 65.9744C98.2594 65.9474 98.2594 65.9197 98.2547 65.8927C98.3224 65.5661 98.361 65.2394 98.3997 64.8719C98.3997 64.5453 98.3997 64.2084 98.4577 63.8512V63.698C98.4577 63.3816 98.4577 63.0651 98.4577 62.7385C98.4577 62.7385 98.4577 62.6262 98.4577 62.565C98.4577 62.2383 98.4094 61.9219 98.361 61.5952V61.4523C98.361 61.1154 98.245 60.7684 98.1677 60.4315C98.0903 60.0947 97.984 59.7578 97.8777 59.4107V59.278C97.7713 58.9718 97.6553 58.6656 97.5296 58.3695C97.5013 58.318 97.4786 58.2632 97.462 58.2062C97.3363 57.9204 97.1913 57.6346 97.0463 57.3487V57.165C96.8935 56.8763 96.7257 56.5969 96.5436 56.3279C96.3599 56.0523 96.1762 55.7971 95.9732 55.5317V55.4705C95.7702 55.2255 95.5672 54.9805 95.3448 54.7457L95.2675 54.6539C95.0451 54.4293 94.8228 54.2047 94.6004 54.0005L94.5134 53.9189C94.2717 53.7045 94.03 53.5004 93.7787 53.3064C93.2417 52.9185 92.676 52.5772 92.0869 52.2856C91.7969 52.1427 91.4972 51.9998 91.1975 51.8773C89.9345 51.3618 88.5971 51.0787 87.2435 51.0403C86.9052 51.0403 86.5572 51.0403 86.2091 51.0403C76.2034 51.4894 69.3009 48.9272 65.1149 43.0883C64.0012 41.4022 63.0674 39.5912 62.3307 37.6884L62.2727 37.5557C60.2522 32.0842 55.7375 28.2359 50.5075 28.3686C49.6303 28.3787 48.7574 28.4986 47.907 28.7258C45.8309 29.2816 43.9355 30.4191 42.4211 32.0183C40.9066 33.6174 39.8293 35.6187 39.303 37.8109C39.0903 37.77 39.071 37.9027 39.042 38.0252Z" fill="#FF6D2A"></path>
</svg>
<h2 class="mt-3 text-center text-lg font-bold text-gray-900">Dashboard</h2>
<p class="mt-1 text-center text-xs text-gray-600">Coworker Portal</p>
</div>
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-brand-primary-500 border border-solid border-brand-primary-500 hover:bg-brand-primary-100 focus-visible:bg-brand-primary-100 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-500 py-1 px-3 text-sm w-[100%] flex justify-center mt-3 py-1 border-radius-2">
<div class="flex items-center justify-center px-0.5 rounded w-100% text-center gap-1">
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2891_28864)">
<path d="M20.9983 10.2394C20.9983 9.55962 20.9421 8.87618 20.8221 8.20743H11.1989V12.0582H16.7096C16.481 13.3002 15.7462 14.3989 14.6703 15.097V17.5956H17.958C19.8887 15.8539 20.9983 13.2818 20.9983 10.2394Z" fill="#4285F4"></path>
<path d="M11.1989 20.0103C13.9506 20.0103 16.2711 19.1247 17.9618 17.5962L14.6741 15.0976C13.7594 15.7075 12.5785 16.0529 11.2027 16.0529C8.54102 16.0529 6.28422 14.2929 5.47448 11.9265H2.08179V14.5023C3.81375 17.8791 7.34139 20.0103 11.1989 20.0103Z" fill="#34A853"></path>
<path d="M5.4713 11.9264C5.04393 10.6845 5.04393 9.33963 5.4713 8.09767V5.52188H2.08236C0.635308 8.34753 0.635308 11.6766 2.08236 14.5022L5.4713 11.9264Z" fill="#FBBC04"></path>
<path d="M11.1989 3.96724C12.6535 3.94519 14.0593 4.48166 15.1127 5.46641L18.0256 2.61137C16.1811 0.913773 13.7331 -0.0195359 11.1989 0.00985968C7.34139 0.00985968 3.81375 2.14104 2.08179 5.52153L5.47073 8.09731C6.27673 5.72729 8.53727 3.96724 11.1989 3.96724Z" fill="#EA4335"></path>
</g>
<defs>
<clipPath id="clip0_2891_28864">
<rect width="20" height="20" fill="white" transform="translate(0.998657 0.0100098)"></rect>
</clipPath>
</defs>
</svg>
Sign in
</div>
</button>
</div>
</div>
</div>React
<div className="py-3 flex justify-center items-center bg-brand-secondary-100">
<div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div className="w-full max-w-md">
<div>
<svg width="60" height="60" viewBox="0 0 99 115" fill="none" xmlns="http://www.w3.org/2000/svg" className="mx-auto h-12 w-auto">
<path d="M60.1268 76.1C60.1848 75.8346 60.2428 75.5692 60.2815 75.2936C60.3398 74.9048 60.3785 74.5129 60.3975 74.1197C60.4443 72.9646 60.3468 71.8079 60.1075 70.6797C60.1075 70.5776 60.1075 70.4653 60.0398 70.3632C59.2905 67.3668 57.5294 64.7631 55.0881 63.0427C52.6468 61.3223 49.6939 60.6039 46.7858 61.023H46.6505C44.0051 61.2254 41.3466 61.1193 38.7232 60.7066C30.9893 59.5633 25.8849 54.2348 24.2222 47.7323C21.8053 38.3309 26.4553 29.3582 36.9444 24.734C42.9672 22.0799 47.0759 16.2002 45.4711 9.50384C45.0905 7.90232 44.4145 6.39579 43.4818 5.0705C42.549 3.74522 41.3779 2.62721 40.0354 1.78048C38.693 0.933751 37.2055 0.374936 35.6582 0.136029C34.1109 -0.102878 32.5342 -0.0171846 31.0183 0.388202C25.0536 1.98063 21.7183 8.04411 22.1823 14.3934C23.0331 26.2141 20.0362 33.1453 7.41058 39.3006C7.08014 39.4529 6.75746 39.6233 6.44384 39.811C5.27 40.5221 4.22302 41.4445 3.35028 42.5365C3.14077 42.7945 2.94394 43.0637 2.76057 43.343C2.39314 43.9134 2.06985 44.5142 1.79383 45.1395C1.65849 45.4356 1.54248 45.7418 1.42647 46.0583C1.42262 46.0922 1.42262 46.1264 1.42647 46.1603C1.32013 46.4666 1.22345 46.7626 1.13645 47.079V47.2015C1.04944 47.518 0.972103 47.8344 0.914098 48.1509C0.914098 48.1509 0.914098 48.1509 0.914098 48.2325C0.856094 48.5456 0.807757 48.8858 0.769088 49.2533C0.769088 49.58 0.711083 49.9066 0.701416 50.2741V50.417C0.701416 50.7335 0.701416 51.0601 0.701416 51.3868C0.701416 51.4378 0.701416 51.4991 0.701416 51.5501C0.701416 51.8767 0.75942 52.2034 0.807757 52.5709C0.803128 52.615 0.803128 52.6595 0.807757 52.7036C0.857209 53.0476 0.924988 53.3884 1.01077 53.7244C1.08811 54.0612 1.18479 54.3981 1.29113 54.7452C1.29113 54.7452 1.29113 54.8268 1.29113 54.8779C1.3878 55.1841 1.50381 55.4903 1.62948 55.7864C1.65783 55.8379 1.68054 55.8927 1.69716 55.9497C1.8325 56.2355 1.96784 56.5213 2.11285 56.7969C2.11285 56.848 2.16119 56.8888 2.18053 56.9296C2.34487 57.2155 2.49955 57.4911 2.68323 57.7667C2.86691 58.0423 3.05059 58.3077 3.2536 58.5731C3.44695 58.8283 3.65964 59.0733 3.87232 59.3081L3.95932 59.3897C4.16971 59.624 4.39241 59.8455 4.62637 60.0533C4.64741 60.0823 4.6737 60.1065 4.70371 60.1247C4.9454 60.3493 5.18708 60.5534 5.43843 60.7474C5.97094 61.1573 6.53713 61.516 7.13023 61.8192C7.42025 61.9723 7.71027 62.1153 8.00996 62.2377H8.05829C9.32079 62.7565 10.6581 63.0431 12.0123 63.085C12.3603 63.085 12.6986 63.085 13.0467 63.085C23.0621 62.6461 29.9549 65.2082 34.1409 71.0471C35.2952 72.7638 36.2616 74.613 37.0218 76.5594L37.0798 76.6819C39.1003 82.1635 43.6246 86.0119 48.845 85.92C49.7218 85.9051 50.5942 85.7852 51.4455 85.5627C53.5225 85.009 55.4189 83.8721 56.9336 82.2727C58.4484 80.6733 59.525 78.6708 60.0495 76.4777C60.0882 76.3654 60.0978 76.2327 60.1268 76.1Z" fill="#5C99D2"></path>
<path d="M39.042 38.0252C38.984 38.3008 38.926 38.5662 38.8873 38.8316C38.829 39.2239 38.7903 39.6192 38.7713 40.0158C38.7163 41.1706 38.8107 42.3279 39.0516 43.4558C39.0516 43.5579 39.0516 43.6702 39.1193 43.7723C39.8705 46.7676 41.6321 49.3699 44.0729 51.09C46.5137 52.81 49.4655 53.5293 52.3733 53.1125H52.5183C55.1634 52.907 57.8218 53.0097 60.4456 53.4187C68.1795 54.5722 73.2838 59.9007 74.9466 66.4031C77.3635 75.8046 72.7135 84.7773 62.2244 89.4015C56.2112 92.0759 52.1026 97.9965 53.7074 104.652C54.0901 106.251 54.7673 107.754 55.7003 109.076C56.6333 110.398 57.8038 111.514 59.1449 112.358C60.4861 113.203 61.9717 113.76 63.5169 113.999C65.062 114.237 66.6365 114.151 68.1505 113.747C74.1152 112.145 77.4505 106.091 76.9961 99.7421C76.1357 87.9213 79.1326 80.9902 91.7679 74.8348C92.0869 74.6715 92.3963 74.5082 92.7346 74.3244C93.9064 73.6103 94.9529 72.6884 95.8282 71.5989C96.0312 71.3437 96.2342 71.0681 96.4179 70.7925C96.7843 70.2178 97.1075 69.6137 97.3846 68.9857C97.52 68.6795 97.6456 68.3732 97.752 68.067C97.7558 68.0331 97.7558 67.9988 97.752 67.9649C97.8583 67.6587 97.955 67.3627 98.042 67.0462C98.042 67.0462 98.042 66.9646 98.042 66.9237C98.1193 66.6073 98.1967 66.2908 98.2547 65.9744C98.2594 65.9474 98.2594 65.9197 98.2547 65.8927C98.3224 65.5661 98.361 65.2394 98.3997 64.8719C98.3997 64.5453 98.3997 64.2084 98.4577 63.8512V63.698C98.4577 63.3816 98.4577 63.0651 98.4577 62.7385C98.4577 62.7385 98.4577 62.6262 98.4577 62.565C98.4577 62.2383 98.4094 61.9219 98.361 61.5952V61.4523C98.361 61.1154 98.245 60.7684 98.1677 60.4315C98.0903 60.0947 97.984 59.7578 97.8777 59.4107V59.278C97.7713 58.9718 97.6553 58.6656 97.5296 58.3695C97.5013 58.318 97.4786 58.2632 97.462 58.2062C97.3363 57.9204 97.1913 57.6346 97.0463 57.3487V57.165C96.8935 56.8763 96.7257 56.5969 96.5436 56.3279C96.3599 56.0523 96.1762 55.7971 95.9732 55.5317V55.4705C95.7702 55.2255 95.5672 54.9805 95.3448 54.7457L95.2675 54.6539C95.0451 54.4293 94.8228 54.2047 94.6004 54.0005L94.5134 53.9189C94.2717 53.7045 94.03 53.5004 93.7787 53.3064C93.2417 52.9185 92.676 52.5772 92.0869 52.2856C91.7969 52.1427 91.4972 51.9998 91.1975 51.8773C89.9345 51.3618 88.5971 51.0787 87.2435 51.0403C86.9052 51.0403 86.5572 51.0403 86.2091 51.0403C76.2034 51.4894 69.3009 48.9272 65.1149 43.0883C64.0012 41.4022 63.0674 39.5912 62.3307 37.6884L62.2727 37.5557C60.2522 32.0842 55.7375 28.2359 50.5075 28.3686C49.6303 28.3787 48.7574 28.4986 47.907 28.7258C45.8309 29.2816 43.9355 30.4191 42.4211 32.0183C40.9066 33.6174 39.8293 35.6187 39.303 37.8109C39.0903 37.77 39.071 37.9027 39.042 38.0252Z" fill="#FF6D2A"></path>
</svg>
<h2 className="mt-3 text-center text-lg font-bold text-gray-900">Dashboard</h2>
<p className="mt-1 text-center text-xs text-gray-600">Coworker Portal</p>
</div>
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-brand-primary-500 border border-solid border-brand-primary-500 hover:bg-brand-primary-100 focus-visible:bg-brand-primary-100 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-500 py-1 px-3 text-sm w-[100%] flex justify-center mt-3 py-1 border-radius-2">
<div className="flex items-center justify-center px-0.5 rounded w-100% text-center gap-1">
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2891_28864)">
<path d="M20.9983 10.2394C20.9983 9.55962 20.9421 8.87618 20.8221 8.20743H11.1989V12.0582H16.7096C16.481 13.3002 15.7462 14.3989 14.6703 15.097V17.5956H17.958C19.8887 15.8539 20.9983 13.2818 20.9983 10.2394Z" fill="#4285F4"></path>
<path d="M11.1989 20.0103C13.9506 20.0103 16.2711 19.1247 17.9618 17.5962L14.6741 15.0976C13.7594 15.7075 12.5785 16.0529 11.2027 16.0529C8.54102 16.0529 6.28422 14.2929 5.47448 11.9265H2.08179V14.5023C3.81375 17.8791 7.34139 20.0103 11.1989 20.0103Z" fill="#34A853"></path>
<path d="M5.4713 11.9264C5.04393 10.6845 5.04393 9.33963 5.4713 8.09767V5.52188H2.08236C0.635308 8.34753 0.635308 11.6766 2.08236 14.5022L5.4713 11.9264Z" fill="#FBBC04"></path>
<path d="M11.1989 3.96724C12.6535 3.94519 14.0593 4.48166 15.1127 5.46641L18.0256 2.61137C16.1811 0.913773 13.7331 -0.0195359 11.1989 0.00985968C7.34139 0.00985968 3.81375 2.14104 2.08179 5.52153L5.47073 8.09731C6.27673 5.72729 8.53727 3.96724 11.1989 3.96724Z" fill="#EA4335"></path>
</g>
<defs>
<clipPath id="clip0_2891_28864">
<rect width="20" height="20" fill="white" transform="translate(0.998657 0.0100098)"></rect>
</clipPath>
</defs>
</svg>
Sign in
</div>
</button>
</div>
</div>
</div>