Here’s my situation
I am trying to style Alert messages in my project. For success messages, I would like the background of the message to be green. But what happens is, the background green stays on the page like it s fixed. I want that background only when the alert message is returned.
Here is my code,
live.html.leex
<main role="main">
<div>
<p class="alert-info" role="alert"
phx-click="lv:clear-flash"
phx-value-key="info"><%= live_flash(@flash, :info) %>
<span class="absolute inset-y-0 right-0 flex items-center mr-4">
<svg class="w-4 h-4" role="button" viewBox="0 0 20 20"> <path d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>
</span>
</p>
</div>
<%= @inner_content %>
</main>
app.css
.alert-info{
@apply relative py-3 pl-4 pr-10 leading-normal text-green-700 bg-green-100 rounded-lg;
}
form_component.ex
|> put_flash(:info, "User created successfully")
This is what I get when the alert message is returned
But this background seems fixed
Any help is appreciated.
Thanks! 
