Rails / Alpinejs tabbed registration form

_new_account_form.html.erb

<div class="w-2/6 p-5">
  <%= render partial: 'shared/global/logo' %>
  <div class="flex w-full justify-center my-4">
    <p class="text-center w-full body-font text-2xl font-semibold text-primary-700">Free 14 Day Trial Registration</p>
  </div>
  <div class="w-full mt-4">
    <%= form_for(@account, html: { class: 'w-full p-3' }) do |f| %>

    <% if @account.errors.any? %>
      <div id="error_explanation">
        <h2><%= pluralize(account.errors.count, "error") %> prohibited this user from being saved:</h2>

        <ul>
          <% account.errors.full_messages.each do |message| %>
            <li><%= message %></li>
          <% end %>
        </ul>
      </div>
    <% end %>

    <div x-data="{ tab: 'page1' }">
        <div x-show="tab === 'page1'" class="w-full p-3">
          <div class="flex w-full justify-center mb-4 block">
            <div class="w-1/3 p-2">
              <p class="text-center w-full text-white text-xs bg-support-cayan-700 p-2 body-font font-bold rounded-l-full rounded-r-full">1. Account</p>
            </div>
            <div class="w-1/3 p-2">
              <p class="text-center w-full text-white text-xs bg-gray-500 p-2 body-font font-bold rounded-l-full rounded-r-full">2. Login</p>
            </div>
            <div class="w-1/3 p-2">
              <p class="text-center w-full text-white text-xs bg-gray-500 p-2 body-font font-bold rounded-l-full rounded-r-full">3. Contact</p>
            </div>
          </div>
          <div class="mb-2 mt-4">
            <%= f.label :company_name, "Company Name", class: "form-label" %>
            <%= f.text_field :company_name, class: "form-input w-full" %>
          </div>
          <%= f.fields_for :owner do |o| %>
          <div class="mb-2">
            <%= o.label :first_name, "First Name", class: "form-label" %>
            <%= o.text_field :first_name, class: "form-input w-full" %>
          </div>
          <div class="mb-2">
            <%= o.label :last_name, "Last Name", class: "form-label" %>
            <%= o.text_field :last_name, class: "form-input w-full" %>
          </div>
          <% end %>
          <div class="flex w-full justify-center mt-4">
            <button type="button" :class="{ 'active': tab === 'page2' }" @click="tab = 'page2'" class="w-full p-3 bg-primary-700 text-white font-semibold body-font hover:bg-support-cayan-700 rounded-lg shadow-md">Continue to Login</button>
          </div>
        </div>
        <div x-show="tab === 'page2'" class="w-full p-3">
          <div class="flex w-full justify-center mb-4 block">
            <div class="w-1/3 p-2">
              <p class="text-center w-full text-white text-xs bg-primary-700 p-2 body-font font-bold rounded-l-full rounded-r-full">1. Account</p>
            </div>
            <div class="w-1/3 p-2">
              <p class="text-center w-full text-white text-xs bg-support-cayan-700 p-2 body-font font-bold rounded-l-full rounded-r-full">2. Login</p>
            </div>
            <div class="w-1/3 p-2">
              <p class="text-center w-full text-white text-xs bg-gray-500 p-2 body-font font-bold rounded-l-full rounded-r-full">3. Contact</p>
            </div>
          </div>
          <%= f.fields_for :owner do |o| %>
            <div class="mb-2">
              <%= o.label :username, "Username (Employee ID - this is used to login)", class: "form-label" %>
              <%= o.text_field :username, class: "w-full form-input" %>
            </div>
            <div class="mb-2">
              <%= o.label :password, "Password", class: "form-label" %>
              <%= o.password_field :password, class: "w-full form-input" %>
            </div>
            <div class="mb-2">
              <%= o.label :password_confirmation, "Confirm Password", class: "form-label" %>
              <%= o.password_field :password_confirmation, class: "w-full form-input" %>
            </div>
          <% end %>
          <div class="flex w-full justify-center items-center mt-4">
            <div class="flex w-2/6 justify-center">
              <button type="button" :class="{ 'active': tab === 'page1' }" @click="tab = 'page1'" class="w-full bg-gray-500 text-white p-3 mr-1 rounded-lg shadow-md hover:bg-black font-semibold body-font">Back to Account</button>
            </div>
            <div class="flex w-4/6 justify-center">
              <button type="button" :class="{ 'active': tab === 'page3' }" @click="tab = 'page3'" class="w-full p-3 bg-primary-700 ml-1 text-white font-semibold body-font hover:bg-support-cayan-700 rounded-lg shadow-md">Continue to Contact</button>
            </div>
          </div>
        </div>
        <div x-show="tab === 'page3'" class="w-full p-3">
          <div class="flex w-full justify-center mb-4 block">
            <div class="w-1/3 p-2">
              <p class="text-center w-full text-white text-xs bg-primary-700 p-2 body-font font-bold rounded-l-full rounded-r-full">1. Account</p>
            </div>
            <div class="w-1/3 p-2">
              <p class="text-center w-full text-white text-xs bg-primary-700 p-2 body-font font-bold rounded-l-full rounded-r-full">2. Login</p>
            </div>
            <div class="w-1/3 p-2">
              <p class="text-center w-full text-white text-xs bg-support-cayan-700 p-2 body-font font-bold rounded-l-full rounded-r-full">3. Contact</p>
            </div>
          </div>
          <%= f.fields_for :owner do |o| %>
            <div class="mb-2">
              <%= o.label :email, "Email Address (This is used to confirm your account)", class: "form-label" %>
              <%= o.email_field :email, class: "w-full form-input" %>
            </div>
            <div class="mb-2">
              <%= o.label :cell_phone, "Cell Phone (Used for mobile notifications - Can be disabled)", class: "form-label" %>
              <%= o.text_field :cell_phone, class: "w-full form-input" %>
            </div>
            <div class="flex mb-2 w-full">
              <div class="w-3/4 mr-2">
                <%= o.label :telephone, "Office Telephone (Optional)", class: "form-label" %>
                <%= o.text_field :telephone, class: "w-full form-input" %>
              </div>
              <div class="w-1/4">
                <%= o.label :ext, "Ext.", class: "form-label" %>
                <%= o.text_field :ext, class: "w-full form-input" %>
              </div>
            </div>
          <% end %>
          <div class="flex w-full">
            <div class="w-2/6 mr-1">
              <button type="button" :class="{ 'active': tab === 'page2' }" @click="tab = 'page2'" class="w-full bg-gray-500 text-white p-3 rounded-lg shadow-md hover:bg-black font-semibold body-font">Back to Login</button>
            </div>
            <div class="w-4/6 ml-1">
              <%= f.submit "Start 14 Day Trial", class: "w-full p-3 bg-primary-700 text-white font-semibold body-font hover:bg-support-cayan-700 rounded-lg shadow-md" %>
            </div>
          </div>
        </div>
    </div>
    <% end %>
  </div>
</div>