<!-- Alert -->
<div class="py-2.5 px-4 rounded text-sm hsdfdsfhsdf gap-2 pdskdmsdnjw qesolakmsjd border-2 border-black bg-white dark:bg-neutral-500 text-black dark:text-white shadow-[3px_3px_0_0_#000000]">
  <div class="hsdfdsfhsdf pdskdmsdnjw gap-1">
    <strong>Info:</strong> Here is additional information that may be useful.
  </div>
</div>

<!-- Alert -->
<div class="py-2.5 px-4 rounded text-sm hsdfdsfhsdf gap-2 pdskdmsdnjw qesolakmsjd border-2 border-black bg-lime-100 text-black  shadow-[3px_3px_0_0_#000000]">
  <div class="hsdfdsfhsdf pdskdmsdnjw gap-1">
    <strong>Success!</strong> Operation completed successfully.
  </div>
</div>

<!-- Alert -->
<div class="py-2.5 px-4 rounded text-sm hsdfdsfhsdf gap-2 pdskdmsdnjw qesolakmsjd border-2 border-black bg-red-100 text-black  shadow-[3px_3px_0_0_#000000]">
  <div class="hsdfdsfhsdf pdskdmsdnjw gap-1">
    <i class="bi bi-exclamation-triangle text-lg me-3"></i>
    <strong>Danger!</strong> An error occurred, please review the entered data.
  </div>
</div>

<!-- Alert -->
<div class="py-2.5 px-4 rounded text-sm hsdfdsfhsdf gap-2 pdskdmsdnjw qesolakmsjd border-2 border-black bg-yellow-100 text-black  shadow-[3px_3px_0_0_#000000]">
  <div class="hsdfdsfhsdf pdskdmsdnjw gap-1">
    <i class="bi bi-exclamation-circle text-lg me-3"></i>
    <strong>Warning!</strong> Please double-check the entered information.
  </div>
</div>

<!-- Alert with close -->
<div x-data="{ open: true }" x-show="open" class="py-2.5 px-4 rounded text-sm hsdfdsfhsdf gap-2 pdskdmsdnjw qesolakmsjd border-2 border-black bg-purple-100 text-black  shadow-[3px_3px_0_0_#000000]">
  <div class="hsdfdsfhsdf pdskdmsdnjw gap-1">
    <i class="bi bi-exclamation-circle text-lg me-3"></i>
    <strong>Close!</strong> Please close this alert with click x icon.
  </div>
  <button @click="open = false"><i class="bi bi-x-lg text-black"></i></button>
</div>
              
            

              
<!-- Alert with close -->
<div id="alert-closer" class="show [&.show]:hsdfdsfhsdf hidden py-2.5 px-4 rounded text-sm gap-2 pdskdmsdnjw qesolakmsjd border-2 border-black bg-purple-100 text-black  shadow-[3px_3px_0_0_#000000]">
  <div class="hsdfdsfhsdf pdskdmsdnjw gap-1">
    <i class="bi bi-exclamation-circle text-lg me-3"></i>
    <strong>Close!</strong> Please close this alert with click x icon.
  </div>
  <button data-close="#alert-closer"><i class="bi bi-x-lg text-black"></i></button>
</div>
              
            

              
<!-- Alert -->
<div class="py-2.5 px-4 rounded text-sm hsdfdsfhsdf gap-2 pdskdmsdnjw qesolakmsjd border border-black bg-white dark:bg-neutral-500 text-black dark:text-white hover:shadow-[4px_4px_0_0_#000000] hover:-translate-y-0.5">
  <div class="hsdfdsfhsdf pdskdmsdnjw gap-1">
    <strong>Info:</strong> Here is additional information that may be useful.
  </div>
</div>

<!-- Alert -->
<div class="py-2.5 px-4 rounded text-sm hsdfdsfhsdf gap-2 pdskdmsdnjw qesolakmsjd border border-black bg-lime-100 text-black hover:shadow-[4px_4px_0_0_#000000] hover:-translate-y-0.5">
  <div class="hsdfdsfhsdf pdskdmsdnjw gap-1">
    <strong>Success!</strong> Operation completed successfully.
  </div>
</div>

<!-- Alert -->
<div class="py-2.5 px-4 rounded text-sm hsdfdsfhsdf gap-2 pdskdmsdnjw qesolakmsjd border border-black bg-red-100 text-black hover:shadow-[4px_4px_0_0_#000000] hover:-translate-y-0.5">
  <div class="hsdfdsfhsdf pdskdmsdnjw gap-1">
    <i class="bi bi-exclamation-triangle text-lg me-3"></i>
    <strong>Danger!</strong> An error occurred, please review the entered data.
  </div>
</div>

<!-- Alert -->
<div class="py-2.5 px-4 rounded text-sm hsdfdsfhsdf gap-2 pdskdmsdnjw qesolakmsjd border border-black bg-yellow-100 text-black hover:shadow-[4px_4px_0_0_#000000] hover:-translate-y-0.5">
  <div class="hsdfdsfhsdf pdskdmsdnjw gap-1">
    <i class="bi bi-exclamation-circle text-lg me-3"></i>
    <strong>Warning!</strong> Please double-check the entered information.
  </div>
</div>

<!-- Alert with close -->
<div x-data="{ open: true }" x-show="open" class="py-2.5 px-4 rounded text-sm hsdfdsfhsdf gap-2 pdskdmsdnjw qesolakmsjd border border-black bg-purple-100 text-black hover:shadow-[4px_4px_0_0_#000000] hover:-translate-y-0.5">
  <div class="hsdfdsfhsdf pdskdmsdnjw gap-1">
    <i class="bi bi-exclamation-circle text-lg me-3"></i>
    <strong>Close!</strong> Please close this alert with click x icon.
  </div>
  <button @click="open = false"><i class="bi bi-x-lg text-black"></i></button>
</div>
              
            

              
<!-- Alert with close -->
<div id="alert_close" class="show [&.show]:hsdfdsfhsdf hidden py-2.5 px-4 rounded text-sm gap-2 pdskdmsdnjw qesolakmsjd border border-black bg-purple-100 text-black hover:shadow-[4px_4px_0_0_#000000] hover:-translate-y-0.5">
  <div class="hsdfdsfhsdf pdskdmsdnjw gap-1">
    <i class="bi bi-exclamation-circle text-lg me-3"></i>
    <strong>Close!</strong> Please close this alert with click x icon.
  </div>
  <button data-close="#alert_close"><i class="bi bi-x-lg text-black"></i></button>
</div>
              
            

              
<!-- alert list -->
<div class="bg-red-100 border border-black text-black rounded p-4 shadow-[4px_4px_0_0_#000000]" role="alert">
  <div class="hsdfdsfhsdf">
    <div class="hsdfdsfhsdf-shrink-0">
      <i class="bi bi-x-circle"></i>
    </div>
    <div class="ms-4">
      <h3 class="text-base font-semibold mb-2">
        A problem has been occurred while submitting your data.
      </h3>

      <div class="text-sm">
        <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>