Styling with TailwindCSS

Creating a responsive structure for our sigding page

Want more?

This lesson for enrolled students only. Join the course to unlock it!

You can see the code changes implemented in this lecture below.

If you have purchased the course in a different platform, you still have access to the code changes per lecture here on Teclado. The lecture video and lecture notes remain locked.

Join course for $15

New files

templates/account/signup.html

{% extends "base.html" %}

{% load allauth %}
{% load widget_tweaks %}


{% block content %}
<main class="max-w-7xl mx-auto mt-10 lg:mt-20">
  <div class="flex flex-col items-center lg:flex-row lg:items-start space-y-6">
    <div class="basis-3/5 lg:mt-10">
      <h1 class="text-4xl font-bold tracking-tight leading-none lg:text-5xl xl:text-6xl">
        <span class="md:block">Write and collaborate</span>
        <span class="md:block text-emerald-600">
          <span class="text-black">on your</span> next piece
        </span>
      </h1>
      <p class="mt-6 text-xl text-gray-600">Write on our platform for maximum productivity</p>
    </div>
    <div class="basis-2/5">
      <!-- signup form -->
    </div>
  </div>
</main>
{% endblock content %}