Alerts

<!-- Component: Simple Success Alert -->
<div class="w-full px-4 py-3 text-sm border rounded border-emerald-100 bg-emerald-50 text-emerald-500" role="alert">
  <p>Success! You have installed Tailwind CSS</p>
</div>
<!-- End Simple Success Alert -->

<!-- Component: Success Alert With Title and Text-->
<div class="w-full px-4 py-3 text-sm border rounded border-emerald-100 bg-emerald-50 text-emerald-500" role="alert">
  <h3 class="mb-2 font-semibold">All components are now published.</h3>
  <p>You successfully read this important alert message. Green often indicates something successful or positive. </p>
</div>
<!-- End Success Alert With Title and Text-->

<!-- Component: Success Alert With Icon -->
<div class="flex items-start w-full gap-4 px-4 py-3 text-sm border rounded border-emerald-100 bg-emerald-50 text-emerald-500" role="alert">
  <!-- Icon -->
  <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-01 desc-01">
    <title id="title-01">Icon title</title>
    <desc id="desc-01">A more detailed description of the icon</desc>
    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
  <!-- Text -->
  <p>Success! You have installed Tailwind CSS</p>
</div>
<!-- End Success Alert With Icon -->

<!-- Component: Success Alert With Icon - Title - Text -->
<div class="flex items-start w-full gap-4 px-4 py-3 text-sm border rounded border-emerald-100 bg-emerald-50 text-emerald-500" role="alert">
  <!-- Icon -->
  <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-06 desc-06">
    <title id="title-06">Icon title</title>
    <desc id="desc-06">A more detailed description of the icon</desc>
    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
  <!-- Text -->
  <div>
    <h3 class="mb-2 font-semibold">All components are now published.</h3>
    <p>You successfully read this important alert message. Green often indicates something successful or positive. </p>
  </div>
</div>
<!-- End Success Alert With Icon -->

<!-- Component: Dismissible Success Alert -->
<div class="flex items-center w-full gap-4 px-4 py-3 text-sm border rounded border-emerald-100 bg-emerald-50 text-emerald-500" role="alert">
  <!-- Text -->
  <p class="flex-1">Success! You have installed Tailwind CSS</p>
  <!-- Close button -->
  <button aria-label="Close" class="inline-flex items-center justify-center h-8 gap-2 px-4 text-xs font-medium tracking-wide transition duration-300 rounded-full focus-visible:outline-none justify-self-center whitespace-nowrap text-emerald-500 hover:bg-emerald-100 hover:text-emerald-600 focus:bg-emerald-200 focus:text-emerald-700 disabled:cursor-not-allowed disabled:text-emerald-300 disabled:shadow-none disabled:hover:bg-transparent">
    <span class="relative only:-mx-4">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-11 desc-11">
        <title id="title-11">Icon title</title>
        <desc id="desc-11">
          A more detailed description of the icon
        </desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </span>
  </button>
</div>
<!-- End Dismissible Success Alert -->

<!-- Component: Dismissible Success Alert With Action Button -->
<div class="flex items-center w-full gap-4 px-4 py-3 text-sm border rounded border-emerald-100 bg-emerald-50 text-emerald-500" role="alert">
  <!-- Text -->
  <p class="flex-1 truncate">Success! You are now logged in</p>
  <!-- Action button -->
  <button class="inline-flex items-center justify-center h-8 gap-2 px-4 text-xs font-medium tracking-wide transition duration-300 rounded focus-visible:outline-none justify-self-center whitespace-nowrap text-emerald-500 hover:bg-emerald-100 hover:text-emerald-600 focus:bg-emerald-200 focus:text-emerald-700 disabled:cursor-not-allowed disabled:text-emerald-300 disabled:shadow-none disabled:hover:bg-transparent">
    <span class="relative">
      Logout
    </span>
  </button>
  <!-- Close button -->
  <button aria-label="Close" class="inline-flex items-center justify-center h-8 gap-2 px-4 text-xs font-medium tracking-wide transition duration-300 rounded-full focus-visible:outline-none justify-self-center whitespace-nowrap text-emerald-500 hover:bg-emerald-100 hover:text-emerald-600 focus:bg-emerald-200 focus:text-emerald-700 disabled:cursor-not-allowed disabled:text-emerald-300 disabled:shadow-none disabled:hover:bg-transparent">
    <span class="relative only:-mx-4">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-16 desc-16">
        <title id="title-16">Icon title</title>
        <desc id="desc-16">
          A more detailed description of the icon
        </desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </span>
  </button>
</div>
<!-- End Dismissible Success Alert With Action Button -->

<!-- Component: Dismissible Success Alert With Icon and Action Buttons -->
<div class="flex flex-col w-full px-4 py-3 text-sm border rounded border-emerald-100 bg-emerald-50 text-emerald-500" role="alert">
  <!-- Alert heading with icon & close button -->
  <div class="flex items-center gap-4 mb-2">
    <!-- Icon -->
    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-21 desc-21">
      <title id="title-21">Icon title</title>
      <desc id="desc-21">A more detailed description of the icon</desc>
      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <!-- Headline -->
    <h3 class="flex-1 font-semibold ">All components are now published.</h3>
    <!-- Close button -->
    <button aria-label="Close" class="inline-flex items-center justify-center h-8 gap-2 px-4 text-xs font-medium tracking-wide transition duration-300 rounded-full focus-visible:outline-none justify-self-center whitespace-nowrap text-emerald-500 hover:bg-emerald-100 hover:text-emerald-600 focus:bg-emerald-200 focus:text-emerald-700 disabled:cursor-not-allowed disabled:text-emerald-300 disabled:shadow-none disabled:hover:bg-transparent">
      <span class="relative only:-mx-4">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-22 desc-22">
          <title id="title-22">Icon title</title>
          <desc id="desc-22">
            A more detailed description of the icon
          </desc>
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </span>
    </button>
  </div>
  <!-- Alert body -->
  <div class="px-9">
    <p>You successfully read this important alert message. Green often indicates something successful or positive. </p>
  </div>
  <!-- Alert actions -->
  <div class="flex gap-2 mt-4 px-9">
    <button class="inline-flex items-center justify-center h-8 gap-2 px-4 text-xs font-medium tracking-wide text-white transition duration-300 rounded focus-visible:outline-none whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
      <span>proceed</span>
    </button>
    <button class="inline-flex items-center justify-center h-8 gap-2 px-4 text-xs font-medium tracking-wide transition duration-300 rounded focus-visible:outline-none justify-self-center whitespace-nowrap text-emerald-500 hover:bg-emerald-100 hover:text-emerald-600 focus:bg-emerald-200 focus:text-emerald-700 disabled:cursor-not-allowed disabled:text-emerald-300 disabled:shadow-none disabled:hover:bg-transparent">
      <span class="relative">
        Cancel
      </span>
    </button>
  </div>
</div>
<!-- End Dismissible Success Alert With Icon and Action Buttons -->