Alert Messages Component

<div class="rounded-md bg-yellow-50 p-4 dark:bg-yellow-900">
  <div class="flex">
    <div class="flex-shrink-0">
      <svg class="h-5 w-5 text-yellow-400 dark:text-yellow-300" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M8.485 2.495a.75.75 0 00-1.06 0L3.235 6.725a4.5 4.5 0 000 6.35l4.19 4.19a.75.75 0 001.06 0l4.19-4.19a4.5 4.5 0 000-6.35L9.545 2.495a.75.75 0 00-1.06 0zM9.75 9.75a.75.75 0 000 1.5h.008a.75.75 0 000-1.5H9.75z" clip-rule="evenodd" />
      </svg>
    </div>
    <div class="ml-3">
      <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Attention needed</h3>
      <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid ab dignissimos sint officiis. </p>
      </div>
      <div class="mt-4">
        <div class="-mx-2 -my-1 flex">
          <button type="button" class="rounded-md bg-yellow-50 px-2 py-1.5 text-sm font-medium text-yellow-800 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-yellow-600 focus:ring-offset-2 dark:bg-yellow-900 dark:text-yellow-200 dark:hover:bg-yellow-800 dark:focus:ring-yellow-400 dark:focus:ring-offset-yellow-900">Take action</button>
          <button type="button" class="ml-3 rounded-md bg-yellow-50 px-2 py-1.5 text-sm font-medium text-yellow-800 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-yellow-600 focus:ring-offset-2 dark:bg-yellow-900 dark:text-yellow-200 dark:hover:bg-yellow-800 dark:focus:ring-yellow-400 dark:focus:ring-offset-yellow-900">Dismiss</button>
        </div>
      </div>
    </div>
  </div>
</div>