<tr @click="volume = '<%= @plan[:volume] %>'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': volume === '<%= @plan[:volume] %>', 'border-b border-gray-200 cursor-pointer': volume !== '<%= @plan[:volume] %>'}">
  <td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': volume === '<%= @plan[:volume] %>'}"><%= @plan[:volume] %></td>
  <td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': volume === '<%= @plan[:volume] %>'}">
    <span x-show="billingCycle === 'monthly'"><span x-text="priceFor(<%= @plan[:monthly_product_id] %>)"></span> / mo</span>
    <span x-cloak x-show="billingCycle === 'yearly'"><span x-text="priceFor(<%= @plan[:yearly_product_id] %>)"></span> / yr</span>
  </td>
</tr>
