<div class="fixed w-full px-4 z-50 mt-20">
  <%= [info: "green", error: "red"] |> Enum.map(fn {level, color} ->  %>
    <%= if live_flash(@flash, level) do %>
      <div
        class="relative bg-<%= color %>-100 lg:w-1/2 w-full p-5 object-right rounded shadow-xl m-auto mb-5 js-flash"
        phx-click="lv:clear-flash"
        phx-value-key="<%= level %>"
      >
        <div class="flex justify-between text-<%= color %>-700">
          <div class="flex space-x-3">
            <div class="flex-1 leading-tight text-sm font-medium">
              <%= live_flash(@flash, level) %>
            </div>
          </div>
          <div class="flex-none">
            &times;
          </div>
        </div>
      </div>
    <% end %>
  <% end) %>
</div>
