Currently, I am working on a Rails 6 application and designing a form. My goal is to center the form in the middle of the page while utilizing TailwindCSS for styling. However, upon adding the 'with' property, instead of centering, the form shifts to the right of the page.
https://i.sstatic.net/SHnne.png
Below is how the form appears:
<div class="max-w-full">
<%= form_for @post do |f| %>
<div class="md:flex md:items-center mb-6">
<div class="md:w-1/3">
<label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-full-name">
<%= f.label :title, 'Title:' %>
</label>
</div>
<div class="md:w-2/3">
<%= f.text_field :title, class: "bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" %>
</div>
</div>
// More form elements...
<div class="md:flex md:items-center">
<div class="md:w-1/3"></div>
<div class="md:w-2/3">
<%= f.submit "Create", class: "shadow bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" %>
</div>
</div>
<% end %>
</div>
Can anybody provide any solutions or suggestions?