Alerts

<div class="bg-yellow-50/90 text-yellow-700 p-4 rounded flex items-start justify-between space-x-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">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img" aria-labelledby="a1jrdf2ivqfn6guus69kdsvt3mlknrfm" class="text-yellow-400 w-5 h-5 flex-shrink-0 dark:text-yellow-400/90"><title id="a1jrdf2ivqfn6guus69kdsvt3mlknrfm">Exclamation triangle</title>
  <path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd"></path>
</svg>

  <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">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae itaque sed quisquam, numquam.</p>
  </div>
</div>

<%= tag.div class:"bg-yellow-50/90 text-yellow-700 p-4 rounded flex items-start justify-between space-x-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", classes: "text-yellow-400 w-5 h-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 %>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae itaque sed quisquam, numquam.
    <% end %>
  <% end %>
<% end %>

.text-yellow-700.p-4.rounded.flex.items-start.justify-between.space-x-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", classes: "text-yellow-400 w-5 h-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 Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae itaque sed quisquam, numquam.

<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">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img" aria-labelledby="afzgyl9lc4u5be4twa1fzvs9laz1cl90" class="text-rose-500 w-5 h-5 flex-shrink-0 dark:text-rose-400"><title id="afzgyl9lc4u5be4twa1fzvs9laz1cl90">Shield exclamation</title>
  <path fill-rule="evenodd" d="M11.484 2.17a.75.75 0 011.032 0 11.209 11.209 0 007.877 3.08.75.75 0 01.722.515 12.74 12.74 0 01.635 3.985c0 5.942-4.064 10.933-9.563 12.348a.749.749 0 01-.374 0C6.314 20.683 2.25 15.692 2.25 9.75c0-1.39.223-2.73.635-3.985a.75.75 0 01.722-.516l.143.001c2.996 0 5.718-1.17 7.734-3.08zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zM12 15a.75.75 0 00-.75.75v.008c0 .414.336.75.75.75h.008a.75.75 0 00.75-.75v-.008a.75.75 0 00-.75-.75H12z" clip-rule="evenodd"></path>
</svg>

  <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", classes: "text-rose-500 w-5 h-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 %>

.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", classes: "text-rose-500 w-5 h-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-indigo-50/90 text-indigo-700 p-4 rounded text-sm sm:flex items-center justify-between">
  <div class="flex items-start justify-between space-x-3">
    <%= icon "star", classes: "text-indigo-500 w-5 h-5 flex-shrink-0", variant: :solid %>
    <div class="flex-1">
      <p class="text-indigo-800 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-indigo-50/90 text-indigo-700 p-4 rounded text-sm sm:flex items-center justify-between" do %>
  <%= tag.div class: "flex items-start justify-between space-x-3" do %>
    <%= icon "star", classes: "text-indigo-500 w-5 h-5 flex-shrink-0", variant: :solid %>
    <%= tag.div class: "flex-1"  do %>
      <%= tag.p "Your response is requested", class: "text-indigo-800 font-semibold" %>
      <%= tag.p "Vote for your favorite dog breed today.", class: "leading-snug my-1" %>
    <% end %>
  <% 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 %>

= tag.div class:"bg-indigo-50/90 text-indigo-700 p-4 rounded text-sm sm:flex items-center justify-between"
  = tag.div class: "flex items-start justify-between space-x-3"
    = icon "star", classes: "text-indigo-500 w-5 h-5 flex-shrink-0", variant: :solid
    = tag.div class: "flex-1"
      = tag.p "Your response is requested", class: "text-indigo-800 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"
      = 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-indigo-50/90 text-indigo-700 rounded p-4 text-sm flex justify-between items-center dark:bg-indigo-50/10 dark:text-indigo-100">
  <div class="flex-1">
    <p class="text-blue-800 dark:text-indigo-300 font-semibold">A dismissible notice</p>
    <p class="leading-snug my-1 pr-4">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque minus dolor ratione debitis mollitia architecto officii.</p>
  </div>
  <button type="button" class="w-8 h-8 rounded-full bg-transparent hover:bg-indigo-700 transition ease-in-out duration-300 flex items-center justify-center group dark:hover:bg-indigo-500">
    <%= icon "x-mark", classes: "w-5 h-5 text-indigo-700 group-hover:text-indigo-100 dark:text-indigo-300 dark:group-hover:text-indigo-100", title: "Dismiss" %>
  </button>
</div>

<%= tag.div class: "bg-indigo-50/90 text-indigo-700 rounded p-4 text-sm flex justify-between items-center dark:bg-indigo-50/10 dark:text-indigo-100" do %>
  <%= tag.div class: "flex-1" do %>
    <%= tag.p "A dismissible notice", class: "text-blue-800 dark:text-indigo-300 font-semibold" %>
    <%= tag.p "Lorem ipsum dolor...", class: "leading-snug my-1 pr-4" %>
  <% end %>

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

.text-indigo-700.rounded.p-4.text-sm.flex.justify-between.items-center.dark:text-indigo-100{class: "bg-indigo-50/90 dark:bg-indigo-50/10"}
  .flex-1
    %p.text-blue-800.dark:text-indigo-300.font-semibold A dismissible notice
    %p.leading-snug.my-1.pr-4 Lorem ipsum dolor...
  %button.w-8.h-8.rounded-full.bg-transparent.hover:bg-indigo-700.transition.ease-in-out.duration-300.flex.items-center.justify-center.group.dark:hover:bg-indigo-500{type: "button"}
    = icon "x-mark", classes: "w-5 h-5 text-indigo-700 group-hover:text-indigo-100 dark:text-indigo-300 dark:group-hover:text-indigo-100", title: "Dismiss"