Styling the user's dashboard

--- 
+++ 
@@ -2,24 +2,36 @@
 {% load humanize %}

 {% block content %}
-  <h1>Articles</h1>
+<main class="max-w-7xl mx-auto mt-10 p-2 md:p-4 lg:p-10">
+  <h1 class="title mb-4">Welcome</h1>

-  <p>
+  <p class="text-xl mb-4">
     You have created {{ user.article_count | intcomma }}
     article{{ user.article_count | pluralize }}
     and written {{ user.written_words | intcomma }}
     word{{ user.written_words | pluralize }}.
   </p>

-  <a href="{% url 'create_article' %}">Create article</a>
+  <a class="button primary inline-block mb-6 w-full sm:w-auto text-center" href="{% url 'create_article' %}">Start new article</a>
+
+  <h2 class="subtitle mb-6">Your latest articles</h2>

   {% if articles %}
     <ul>
     {% for article in articles %}
-      <li><a href="{% url 'update_article' article.id %}">{{ article.title }}</a> with {{ article.word_count }} word{{ article.word_count | pluralize }}.</li>
+      <li>
+        <a
+          class="text-2xl flex items-center"
+          href="{% url 'update_article' article.id %}">
+          {{ article.title }}
+          <span class="ml-2 px-4 py-0.5 text-xs rounded-sm uppercase bg-gray-200">{{ article.status }}</span>
+        </a>
+        <p class="text-sm">{{ article.word_count }} word{{ article.word_count | pluralize }}</p>
+      </li>
     {% endfor %}
     </ul>
   {% else %}
     <p>You have no articles yet.</p>
   {% endif %}
+</main>
 {% endblock content %}