Alerts

                  
<!-- Alert -->
<div class="py-2.5 uioajsncmhdje rounded text-sm flex thsjkalsueijm olwuyhsbcnmdj bnshkajshwjio border border-primary-600 bg-primary-950 text-primary-300">
  <div class="flex olwuyhsbcnmdj gap-1">
    <strong class="text-primary-300">Primary:</strong> Here is additional information that may be useful.
  </div>
</div>

<!-- Info Alert -->
<div class="py-2.5 uioajsncmhdje rounded text-sm flex thsjkalsueijm olwuyhsbcnmdj bnshkajshwjio border border-sky-600 bg-sky-950 text-sky-300">
  <div class="flex olwuyhsbcnmdj gap-1">
    <strong class="text-sky-300">Info:</strong> Here is additional information that may be useful.
  </div>
</div>

<!-- Success Alert -->
<div class="py-2.5 uioajsncmhdje rounded text-sm flex thsjkalsueijm olwuyhsbcnmdj bnshkajshwjio border border-green-600 bg-green-950 text-green-300">
  <div class="flex olwuyhsbcnmdj gap-1">
    <strong class="text-green-300">Success!</strong> Operation completed successfully.
  </div>
</div>

<!-- Danger Alert -->
<div class="py-2.5 uioajsncmhdje rounded text-sm flex thsjkalsueijm olwuyhsbcnmdj bnshkajshwjio border border-red-600 bg-red-950 text-red-300">
  <div class="flex olwuyhsbcnmdj gap-1">
    <i class="bi bi-exclamation-triangle me-2 text-red-300"></i>
    <strong class="text-red-300">Danger!</strong> An error occurred, please review the entered data.
  </div>
</div>

<!-- Warning Alert -->
<div class="py-2.5 uioajsncmhdje rounded text-sm flex thsjkalsueijm olwuyhsbcnmdj bnshkajshwjio border border-yellow-600 bg-yellow-950 text-yellow-300">
  <div class="flex olwuyhsbcnmdj gap-1">
    <i class="bi bi-exclamation-circle me-2 text-yellow-300"></i>
    <strong class="text-yellow-300">Warning!</strong> Please double-check the entered information.
  </div>
</div>

<!-- Closeable Alert -->
<div x-data="{ open: true }" x-show="open" class="py-2.5 uioajsncmhdje rounded text-sm flex thsjkalsueijm olwuyhsbcnmdj bnshkajshwjio border border-primary-600 bg-primary-950 text-primary-300">
  <div class="flex olwuyhsbcnmdj gap-1">
    <i class="bi bi-exclamation-circle me-2 text-primary-300"></i>
    <strong class="text-primary-300">Close!</strong> Please close this alert with click x icon.
  </div>
  <button @click="open = false"><i class="bi bi-x-lg text-primary-300"></i></button>
</div>
                  
                

                  
<!-- Alert List -->
<div class="bg-yellow-950 border border-yellow-600 text-yellow-300 rounded p-4" role="alert">
  <div class="flex">
    <div class="flex-shrink-0">
      <i class="bi bi-x-circle text-yellow-300"></i>
    </div>
    <div class="ms-4">
      <h3 class="text-base font-semibold mb-2 text-yellow-300">
        A problem has been occurred while submitting your data.
      </h3>

      <div class="text-sm text-yellow-300">
        <ul class="list-disc space-y-1 ps-5">
          <li>This username is already in use</li>
          <li>Email is already in use</li>
          <li>Password field can't be empty</li>
          <li>Please enter a valid phone number</li>
        </ul>
      </div>
    </div>
  </div>
</div>