Alert

<div class="bg-yellow-50/90 text-yellow-700 p-4 rounded flex items-start justify-between gap-3 text-sm dark:bg-yellow-300/10 dark:border dark:border-yellow-400/30 dark:text-yellow-50 dark:selection:bg-yellow-50/10">
  <%= icon "exclamation-triangle", class: "text-yellow-400 size-5 flex-shrink-0 dark:text-yellow-400/90", variant: :solid %>
  <div class="flex-1">
    <p class="text-yellow-800 dark:text-yellow-400/90 font-semibold">Action required</p>
    <p class="leading-snug my-1">Your account password will expire in 3 days. Please update your password to maintain access to your account.</p>
  </div>
</div>

<%= tag.div class:"bg-yellow-50/90 text-yellow-700 p-4 rounded flex items-start justify-between gap-3 text-sm dark:bg-yellow-300/10 dark:border dark:border-yellow-400/20 dark:text-yellow-50 dark:selection:bg-yellow-50/10" do %>
  <%= icon "exclamation-triangle", class: "text-yellow-400 size-5 flex-shrink-0 dark:text-yellow-400/90", variant: :solid %>
  <% tag.div class: "flex-1"  do %>
    <%= tag.p "Action required", class: "text-yellow-800 dark:text-yellow-400/90 font-semibold" %>
    <% tag.p class: "leading-snug my-1" do %>
      Your account password will expire in 3 days. Please update your password to maintain access to your account.
    <% end %>
  <% end %>
<% end %>

.text-yellow-700.p-4.rounded.flex.items-start.justify-between.gap-3.text-sm.dark:border{class: "bg-yellow-50/90 dark:bg-yellow-300/10 dark:border-yellow-400/30 dark:text-yellow-50 dark:selection:bg-yellow-50/10"}
  = icon "exclamation-triangle", class: "text-yellow-400 size-5 flex-shrink-0 dark:text-yellow-400/90", variant: :solid
  .flex-1
    %p.text-yellow-800.font-semibold{class: "dark:text-yellow-400/90"} Action required
    %p.leading-snug.my-1 Your account password will expire in 3 days. Please update your password to maintain access to your account.

<div class="bg-rose-50/90 text-rose-700 p-4 rounded flex items-start justify-between space-x-3 text-sm dark:bg-rose-400/10 dark:border dark:border-rose-400/20 dark:text-rose-50 dark:selection:bg-rose-50/10">
  <%= icon "shield-exclamation", class: "text-rose-500 size-5 flex-shrink-0 dark:text-rose-400", variant: :solid %>
  <div class="flex-1">
    <p class="text-rose-800 font-semibold dark:text-rose-300">There was 1 error trying to process your request.</p>
    <ul class="list-disc pl-4 mt-1">
      <li>Your name must be as cool as Andy.</li>
    </ul>
  </div>
</div>

<%= tag.div class:"bg-rose-50/90 text-rose-700 p-4 rounded flex items-start justify-between space-x-3 text-sm dark:bg-rose-400/10 dark:border dark:border-rose-400/20 dark:text-rose-50 dark:selection:bg-rose-50/10" do %>
  <%= icon "shield-exclamation", class: "text-rose-500 size-5 flex-shrink-0 dark:text-rose-400", variant: :solid %>
  <%= tag.div class: "flex-1"  do %>
    <%= tag.p "There was 1 error trying to process your request.", class: "text-rose-800 font-semibold dark:text-rose-300" %>
    <%= tag.ul class: "list-disc pl-4 mt-1" do %>
      <%= tag.li "Your name must be as cool as Andy" %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

.text-rose-700.p-4.rounded.flex.items-start.justify-between.space-x-3.text-sm.dark:border.dark:text-rose-50{class: "bg-rose-50/90 dark:bg-rose-400/10 dark:border-rose-400/20 dark:selection:bg-rose-50/10"}
  = icon "shield-exclamation", class: "text-rose-500 size-5 flex-shrink-0 dark:text-rose-400", variant: :solid
  .flex-1
    %p.text-rose-800.font-semibold.dark:text-rose-300 There was 1 error trying to process your request.
    %ul.list-disc.pl-4.mt-1
      %li Your name must be as cool as Andy.

<div class="bg-primary-50/90 text-primary-700 p-4 rounded text-sm sm:flex md:items-center justify-between dark:bg-primary-50/10 dark:text-primary-50 dark:border dark:border-primary-400/30">
  <div class="flex items-start justify-between gap-3">
    <%= icon "star", class: "text-primary-500 size-5 flex-shrink-0 dark:text-primary-400", variant: :solid %>
    <div class="flex-1">
      <p class="text-primary-800 dark:text-primary-300 font-semibold">Your response is requested</p>
      <p class="leading-snug my-1">Vote for your favorite dog breed today.</p>
    </div>
  </div>
  <div class="flex items-center space-x-6 sm:pt-0 pt-3 sm:pl-0 sm:pr-4 pr-0 pl-8">
    <a href="#" class="btn-link">Vote now</a>
    <a href="#" class="btn-link">Dismiss</a>
  </div>
</div>

<%= tag.div class:"bg-primary-50/90 text-primary-700 p-4 rounded text-sm sm:flex md:items-center justify-between dark:bg-primary-50/10 dark:text-primary-50 dark:border dark:border-primary-400/30" do %>
  <%= tag.div class: "flex items-start justify-between gap-3" do %>
    <%= icon "star", class:  "text-primary-500 size-5 flex-shrink-0 dark:text-primary-400", variant: :solid %>
    <%= tag.div class: "flex-1"  do %>
      <%= tag.p "Your response is requested", class: "text-primary-800 dark:text-primary-300 font-semibold" %>
      <%= tag.p "Vote for your favorite dog breed today.", class: "leading-snug my-1" %>
    <% end %>
    <%= tag.div class: "flex items-center space-x-6 sm:pt-0 pt-3 sm:pl-0 sm:pr-4 pr-0 pl-8" do %>
      <%= link_to "Vote now", "#", class: "btn-link" %>
      <%= link_to "Dismiss", "#", class: "btn-link" %>
    <% end %>
  <% end %>
<% end %>

= tag.div class:"bg-primary-50/90 text-primary-700 p-4 rounded text-sm sm:flex md:items-center justify-between dark:bg-primary-50/10 dark:text-primary-50 dark:border dark:border-primary-400/30" do
  = tag.div class: "flex items-start justify-between gap-3" do
    = icon "star", class: "text-primary-500 size-5 flex-shrink-0 dark:text-primary-400", variant: :solid
    = tag.div class: "flex-1"  do
      = tag.p "Your response is requested", class: "text-primary-800 dark:text-primary-300 font-semibold"
      = tag.p "Vote for your favorite dog breed today.", class: "leading-snug my-1"
    = tag.div class: "flex items-center space-x-6 sm:pt-0 pt-3 sm:pl-0 sm:pr-4 pr-0 pl-8" do
      = link_to "Vote now", "#", class: "btn-link"
      = link_to "Dismiss", "#", class: "btn-link"

<div class="bg-blue-50/90 text-blue-700 border-l-4 border-blue-700 py-4 pr-4 pl-6 text-sm dark:bg-blue-50/10 dark:text-blue-50 dark:border-blue-400">
  <p class="text-blue-800 dark:text-blue-400 font-semibold">Upcoming maintenance alert</p>
  <p class="leading-snug my-1">We'll be undergoing routine maintenance on Jan 1, 2024 that affects your account. <a href="#" class="font-semibold underline text-blue-700  hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500">Read more about the update here</a>.</p>
</div>

<%= tag.div class: "bg-blue-50/90 text-blue-700 border-l-4 border-blue-700 py-4 pr-4 pl-6 text-sm dark:bg-blue-50/10 dark:text-blue-50 dark:border-blue-400" do %>
  <%= tag.p "Upcoming maintenance alert", class: "text-blue-800 dark:text-blue-400 font-semibold" %>
  <%= tag.p  class: "leading-snug my-1" do %>
    We'll be undergoing routine maintenance on Jan 1, 2024 that affects your account. <%= link_to "Read more about the update here", "#", class: "font-semibold underline text-blue-700  hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500" %>.
  <% end %>
<% end %>

.text-blue-700.border-l-4.border-blue-700.py-4.pr-4.pl-6.text-sm.dark:text-blue-50.dark:border-blue-400{class: "bg-blue-50/90 dark:bg-blue-50/10"}
  %p.text-blue-800.dark:text-blue-400.font-semibold Upcoming maintenance alert
  %p.leading-snug.my-1
    We'll be undergoing routine maintenance on Jan 1, 2024 that affects your account.
      %a.font-semibold.underline.text-blue-700.hover:text-blue-800.dark:text-blue-400.dark:hover:text-blue-500{href: "#"} Read more about the update here

<div class="bg-primary-50/90 text-primary-700 rounded p-4 text-sm flex justify-between items-center dark:bg-primary-50/10 dark:text-primary-100">
  <div class="flex-1">
    <p class="text-primary-800 dark:text-primary-300 font-semibold">A dismissible notice</p>
    <p class="leading-snug my-1 pr-4">Your account settings have been successfully updated. The changes will take effect immediately.</p>
  </div>
  <button type="button" class="size-8 rounded-full bg-transparent hover:bg-primary-700 transition ease-in-out duration-300 flex items-center justify-center group dark:hover:bg-primary-500">
    <%= icon "x-mark", class: "size-5 text-primary-700 group-hover:text-primary-100 dark:text-primary-300 dark:group-hover:text-primary-100", title: "Dismiss" %>
  </button>
</div>

<%= tag.div class: "bg-primary-50/90 text-primary-700 rounded p-4 text-sm flex justify-between items-center dark:bg-primary-50/10 dark:text-primary-100" do %>
  <%= tag.div class: "flex-1" do %>
    <%= tag.p "A dismissible notice", class: "text-primary-800 dark:text-primary-300 font-semibold" %>
    <%= tag.p "Your account settings have been successfully updated. The changes will take effect immediately.", class: "leading-snug my-1 pr-4" %>
  <% end %>

  <%= tag.button class: "size-8 rounded-full bg-transparent hover:bg-primary-700 transition ease-in-out duration-300 flex items-center justify-center group dark:hover:bg-primary-500", type: "button" do %>
    <%= icon "x-mark", class: "size-5 text-primary-700 group-hover:text-primary-100 dark:text-primary-300 dark:group-hover:text-primary-100", title: "Dismiss" %>
  <% end %>
<% end %>

.text-primary-700.rounded.p-4.text-sm.flex.justify-between.items-center.dark:text-primary-100{class: "bg-primary-50/90 dark:bg-primary-50/10"}
  .flex-1
    %p.text-primary-800.dark:text-primary-300.font-semibold A dismissible notice
    %p.leading-snug.my-1.pr-4 Your account settings have been successfully updated. The changes will take effect immediately.
  %button.size-8.rounded-full.bg-transparent.hover:bg-primary-700.transition.ease-in-out.duration-300.flex.items-center.justify-center.group.dark:hover:bg-primary-500{type: "button"}
    = icon "x-mark", class: "size-5 text-primary-700 group-hover:text-primary-100 dark:text-primary-300 dark:group-hover:text-primary-100", title: "Dismiss"