auth_username.html

{% set inputBorderColor = "border-gray-300" %}
{% set inputTextColor = "text-gray-500" %}
{% set inputFocusBorderColor = "focus:border-indigo-500" %}
{% set inputFocusRingColor = "focus:ring-indigo-500" %}

{% extends "layout.html" %}

{% block content %}
    <div class="shadow bg-gray-50 rounded-xl px-4 py-6">
        <h1 class="text-center text-3xl font-bold uppercase">
            <span>
                Enter your username
            </span>
        </h1>

        <div class="mt-4 text-center lg:mx-20">
            <form method="post">
                <div>
                    <input type="text" name="username" class="w-full p-2 border {{ inputTextColor }} {{ inputBorderColor }} rounded-lg {{ inputFocusBorderColor }} {{ inputFocusRingColor }}" placeholder="Enter your username" />
                    <div class="mt-4"><button class="rounded-2xl font-medium text-xl bg-green-700 px-4 py-2 text-white opacity-90 hover:opacity-100" type="submit">Continue</button></div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}