analytics/lib/plausible_web/templates/site/new.html.eex

<div class="w-full max-w-3xl mt-4 mx-auto flex">
  <%= form_for @changeset, "/sites", [class: "max-w-lg w-full mx-auto bg-white shadow-lg rounded px-8 pt-6 pb-8 mb-4 mt-8"], fn f -> %>
    <h2 class="text-xl font-black">Your website details</h2>
    <div class="my-6">
      <%= label f, :domain, class: "block text-sm font-medium text-gray-700" %>
      <div class="mt-2 flex rounded-md shadow-sm">
        <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
          https://
        </span>
        <%= text_input f, :domain, class: "focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full px-3 py-2 rounded-none rounded-r-md sm:text-sm border-gray-300", placeholder: "example.com" %>
      </div>
      <%= error_tag f, :domain %>
    </div>
    <div class="my-6">
      <%= label f, :timezone, "Reporting Timezone", class: "block text-sm font-medium text-gray-700" %>
      <p class="text-gray-500 text-xs mt-1">To make sure we agree on what 'today' means</p>

      <div class="inline-block relative w-full">
        <%= select f, :timezone, Plausible.Timezones.options(), id: "tz-select", selected: "Etc/Greenwich", class: "mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" %>
      </div>
    </div>
    <script>
      var offset = (new Date()).getTimezoneOffset()
      var option = document.querySelector('#tz-select option[offset="' + offset + '"]')
      if (option) { option.selected = "selected"}
    </script>

    <%= submit "Add snippet →", class: "button mt-4 w-full" %>
  <% end %>

  <%= if @is_first_site do %>
    <div class="pt-12 pl-8 hidden md:block">
      <%= render(PlausibleWeb.AuthView, "_onboarding_steps.html", current_step: 2) %>
    </div>
  <% end %>
</div>