Skip to content

Instantly share code, notes, and snippets.

@theoparis
Last active May 13, 2022 23:35
Show Gist options
  • Save theoparis/c331b344efc5628f535c3f68998aa479 to your computer and use it in GitHub Desktop.
Save theoparis/c331b344efc5628f535c3f68998aa479 to your computer and use it in GitHub Desktop.
svelte + windicss template for login page
<main class="flex flex-col items-center w-full min-h-screen bg-gray-700">
<header class="flex flex-col p-4 mb-12 w-full bg-gray-800">
<h1 class="text-4xl text-gray-100 text-center mb-4 font-bold">
template
</h1>
<p class="text-lg text-gray-100 text-center">
yet another tailwind template
</p>
</header>
<h2 class="text-3xl text-gray-100 text-center mb-4">Login</h2>
<form class="flex flex-col items-center gap-2 w-2/6">
<input
name="email"
placeholder="Email"
class="px-4 py-2 bg-gray-800 font-medium text-sm border-2 hover:border-gray-400 border-gray-600 text-gray-100 rounded-md w-full"
/>
<button
class="flex flex-row justify-center items-center px-4 py-2 bg-gray-800 font-medium text-sm border-2 hover:border-gray-400 border-gray-600 text-gray-100 rounded-md w-full"
>
<svg
class="w-4 fill-gray-100 mr-2"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
><title>Discord</title><path
d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286
/></svg
>
Login with Discord
</button>
<button
type="submit"
class="px-4 py-2 bg-gray-800 font-medium text-sm border-2 hover:border-gray-400 border-gray-600 text-gray-100 rounded-md w-full"
>Login</button
>
</form>
</main>
@theoparis
Copy link
Author

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment