Styling with TailwindCSS

Styling the article delete form

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

Modified files

templates/app/article_delete.html

--- 
+++ 
@@ -1,12 +1,14 @@
 {% extends "app/base.html" %}

 {% block content %}
-  <h1>Delete Article</h1>
-  <p>Are you sure you want to delete "{{ article.title }}"?</p>
-  <form method="POST">
+<main class="max-w-2xl mx-auto flex flex-col items-center mt-10">
+  <h1 class="subtitle mb-2">Delete Article</h1>
+  <p class="text-lg mb-6">Are you sure you want to delete "{{ article.title }}"?</p>
+
+  <form method="POST" class="flex items-center gap-4">
     {% csrf_token %}
-    <button type="submit">Delete</button>
+    <button type="submit" class="button danger">Yes, delete it</button>
+    <a href="{% url 'home' %}" class="button secondary"> {% include "svgs/arrow-left.svg" with class="inline-block w-6 h-6 mt-[-2px] mr-2" %} No, take me back</a>
   </form>
-
-  <a href="{% url 'home' %}">No, take me back</a>
+</main>
 {% endblock content %}