depot/app/views/products/_form.html.erb

<%= form_with(model: product, class: "contents") do |form| %>
  <% if product.errors.any? %>
    <div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-md mt-3">
      <h2><%= pluralize(product.errors.count, "error") %> prohibited this product from being saved:</h2>

      <ul class="list-disc ml-6">
        <% product.errors.each do |error| %>
          <li><%= error.full_message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="my-5">
    <%= form.label :title %>
    <%= form.text_field :title, class: ["block shadow-sm rounded-md border px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": product.errors[:title].none?, "border-red-400 focus:outline-red-600": product.errors[:title].any?}] %>
  </div>

  <div class="my-5">
    <%= form.label :description %>
    <%= form.textarea :description, rows: 10, class:
    ["block shadow-sm rounded-md border px-3 py-2 mt-2 w-full",
    {"border-gray-400 focus:outline-blue-600":
    product.errors[:description].none?,
    "border-red-400 focus:outline-red-600":
    product.errors[:description].any?}] %>
  </div>

  <div class="my-5">
    <%= form.label :image %>
      <%= form.file_field :image, accept: "image/*", class:
      ["block shadow-sm rounded-md border px-3 py-2 mt-2 w-full",
      {"border-gray-400 focus:outline-blue-600": product.errors[:image].none?,
      "border-red-400 focus:outline-red-600": product.errors[:image].any?}] %>
  </div>

  <div class="my-5">
    <%= form.label :price %>
    <%= form.text_field :price, class: ["block shadow-sm rounded-md border px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": product.errors[:price].none?, "border-red-400 focus:outline-red-600": product.errors[:price].any?}] %>
  </div>

  <div class="inline">
    <%= form.submit class: "w-full sm:w-auto rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white inline-block font-medium cursor-pointer" %>
  </div>
<% end %>