bugsink/templates/signup.html

{% extends "barest_base.html" %}
{% load static %}
{% load tailwind_forms %}

{% block title %}Sign up · {{ site_title }}{% endblock %}

{% block content %}

<div class="bg-cyan-100 dark:bg-cyan-900 h-screen overflow-y-scroll flex items-center justify-center"> {# the cyan background #}
    <div class="bg-white dark:bg-slate-900 lg:w-5/12 md:6/12 w-10/12">  {# the centered box #}
        <div class="bg-slate-200 dark:bg-slate-800 absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full p-4 md:p-8">  {# the logo #}
                <a href="/"><img src="{% static 'images/bugsink-logo.png' %}" class="h-8 w-8 md:h-16 md:w-16 dark:hidden block" alt="Bugsink logo"><img src="{% static 'images/bugsink-logo-dark.png' %}" class="h-8 w-8 md:h-16 md:w-16 hidden dark:block" alt="Bugsink logo"></a>
        </div>

        <div class="p-12 md:pt-24 md:pl-24 md:pr-24 md:pb-16">

            <form method="post" action=".">
                {% csrf_token %}

                {% tailwind_formfield_implicit form.username %}
                {% tailwind_formfield_implicit form.password1 %}
                {% tailwind_formfield_implicit form.password2 %}

                <button class="bg-slate-800 font-medium p-2 md:p-4 text-white uppercase w-full">Sign up</button>

            </form>

            <div class="mt-4">
                <a href="{% url 'request_reset_password' %}" class="text-slate-800 dark:text-slate-100">Forgot password?</a>
                <a href="{% url 'login' %}" class="float-right text-slate-800 dark:text-slate-100">Log in instead</a>
            </div>
        </div>

    </div>
</div>

{% endblock %}