Styling the article form templates

--- 
+++ 
@@ -16,4 +16,16 @@

 .danger {
   @apply shadow-sm border border-red-400 text-red-800 bg-red-200 hover:bg-red-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-200;
+}
+
+.EasyMDEContainer, textarea {
+  @apply rounded-md border-gray-200 border-2 text-base leading-6;
+}
+
+.EasyMDEContainer .CodeMirror {
+  @apply !border-none !bg-inherit;
+}
+
+.EasyMDEContainer:has(textarea:focus), textarea:focus {
+  @apply ring-1 ring-emerald-500 border-emerald-500;
 }

--- 
+++ 
@@ -1,11 +1,13 @@
 {% extends "app/layouts/base_form.html" %}

 {% block article_stats %}
-  <p>{{ article.word_count }} word{{ article.word_count | pluralize }}.</p>
-  <p>Last edited on {{ article.updated_at | date:"jS F Y" }}</p>
+  <p class="text-center">{{ article.word_count }} word{{ article.word_count | pluralize }}</p>
+  <p>Last edited on <span class="font-bold">{{ article.updated_at | date:"jS F Y" }}</span></p>
 {% endblock article_stats %}

 {% block buttons %}
-  <a href="{% url 'delete_article' article.id %}">Delete article</a>
-  <button type="submit">Save</button>
+  <div class="flex justify-end gap-4">
+    <a href="{% url 'delete_article' article.id %}" class="button danger">Delete article</a>
+    <button type="submit" class="button primary">Save</button>
+  </div>
 {% endblock buttons %}=

--- 
+++ 
@@ -1,5 +1,7 @@
 {% extends "app/layouts/base_form.html" %}

 {% block buttons %}
-  <button type="submit">Save</button>
+  <div class="flex justify-end">
+    <button type="submit" class="button primary">Save</button>
+  </div>
 {% endblock buttons %}

--- 
+++ 
@@ -3,24 +3,34 @@
 {% load widget_tweaks %}

 {% block content %}
-<form method="POST">
-  {% csrf_token %}
-  {% render_field form.title %}
-  
-  {% block article_stats %}
+<main class="max-w-7xl mx-auto mt-10">
+  <form method="POST">
+    {% csrf_token %}
+    <div class="mb-4">
+    {% render_field form.title class="text-4xl w-full rounded-md border-2 border-gray-200 focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500" placeholder="Write a title for your article" %}
+    </div>
+    
+    <div class="flex gap-10 mb-10 items-center">
+      {% render_field form.status class="text-xs border-none rounded-sm uppercase" %}
+      {% block article_stats %}

-  {% endblock article_stats %}
-  
-  {% render_field form.status %}
-  
-  {% render_field form.content %}
+      {% endblock article_stats %}
+    </div>
+    
+    <div class="mb-10">
+      {% render_field form.content rows=20 %}
+    </div>

-  {% render_field form.twitter_post %}
+    <div class="mb-10">
+      <p class="text-xl font-semibold mb-2">{{ form.twitter_post.label }}</p>
+      {% render_field form.twitter_post rows=10 class="w-full" %}
+    </div>

-  {% block buttons %}
+    {% block buttons %}

-  {% endblock buttons %}
-</form>
+    {% endblock buttons %}
+  </form>
+</main>
 {% endblock content %}

 {% block page_js %}