<div class="alert py-[1rem] px-[1rem] text-primary-500 bg-primary-50 border border-primary-200 dark:bg-[#15203c] dark:border-[#15203c] rounded-md flex items-center justify-between" id="dismissingAlert">
A simple primary alert—check it out!
<button class="leading-none text-[20px] close-btn">
<i class="ri-close-line"></i>
</button>
</div>
<div class="alert py-[1rem] px-[1rem] text-secondary-500 bg-secondary-50 border border-secondary-200 dark:bg-[#15203c] dark:border-[#15203c] rounded-md flex items-center justify-between" id="dismissingAlert">
A simple secondary alert—check it out!
<button class="leading-none text-[20px] close-btn">
<i class="ri-close-line"></i>
</button>
</div>
<div class="alert py-[1rem] px-[1rem] text-success-500 bg-success-50 border border-success-200 dark:bg-[#15203c] dark:border-[#15203c] rounded-md flex items-center justify-between" id="dismissingAlert">
A simple success alert—check it out!
<button class="leading-none text-[20px] close-btn">
<i class="ri-close-line"></i>
</button>
</div>
<div class="alert py-[1rem] px-[1rem] text-danger-500 bg-danger-50 border border-danger-200 dark:bg-[#15203c] dark:border-[#15203c] rounded-md flex items-center justify-between" id="dismissingAlert">
A simple danger alert—check it out!
<button class="leading-none text-[20px] close-btn">
<i class="ri-close-line"></i>
</button>
</div>
<div class="alert py-[1rem] px-[1rem] text-warning-500 bg-warning-50 border border-warning-200 dark:bg-[#15203c] dark:border-[#15203c] rounded-md flex items-center justify-between" id="dismissingAlert">
A simple warning alert—check it out!
<button class="leading-none text-[20px] close-btn">
<i class="ri-close-line"></i>
</button>
</div>
<div class="alert py-[1rem] px-[1rem] text-info-500 bg-info-50 border border-info-200 dark:bg-[#15203c] dark:border-[#15203c] rounded-md flex items-center justify-between" id="dismissingAlert">
A simple info alert—check it out!
<button class="leading-none text-[20px] close-btn">
<i class="ri-close-line"></i>
</button>
</div>
<div class="alert py-[1rem] px-[1rem] text-gray-500 bg-gray-50 border border-gray-200 dark:bg-[#15203c] dark:border-[#15203c] rounded-md flex items-center justify-between" id="dismissingAlert">
A simple light alert—check it out!
<button class="leading-none text-[20px] close-btn">
<i class="ri-close-line"></i>
</button>
</div>
<div class="alert py-[1rem] px-[1rem] text-dark bg-[#ced4da] border border-[#adb5bd] dark:bg-[#15203c] dark:border-[#15203c] dark:text-white rounded-md flex items-center justify-between" id="dismissingAlert">
A simple dark alert—check it out!
<button class="leading-none text-[20px] close-btn">
<i class="ri-close-line"></i>
</button>
</div>