Blog Creation Form - Copy this Html, Tailwind Component to your project

Make it responsive and modern without a backgorund color the color theme is orange and black. {% extends "base.html" %} {% block content %} <div dir="rtl" style="display: flex; justify content: center; align items: center; height: 100vh; background color: #f9f9f9;"> <div style="width: 50%; background: white; padding: 20px; border radius: 10px; box shadow: 0 4px 6px rgba(0, 0, 0, 0.1);"> <h1 style="text align: center; margin bottom: 20px; font family: Arial, sans serif; color: #333;">إنشاء مدونة</h1> <form method="post" enctype="multipart/form data" style="display: flex; flex direction: column; gap: 15px;"> {% csrf_token %} {{ form.media }} <div style="display: flex; flex direction: column; gap: 10px;"> {{ form.non_field_errors }} {% for field in form %} <div style="margin bottom: 15px;"> <label style="font weight: bold; margin bottom: 5px; display: block;">{{ field.label }}</label> {{ field }} {{ field.errors }} </div> {% endfor %} </div> <button type="submit" style="background color: #007bff; color: white; border: none; padding: 10px 15px; font size: 16px; border radius: 5px; cursor: pointer;"> حفظ </button> </form> </div> </div> {% endblock content %}