<div class="py-[1rem] px-[1rem] text-primary-500 bg-primary-50 border border-primary-200 dark:bg-[#15203c] dark:border-[#15203c] rounded-md">
    A simple primary alert—check it out!
</div>
<div class="py-[1rem] px-[1rem] text-secondary-500 bg-secondary-50 border border-secondary-200 dark:bg-[#15203c] dark:border-[#15203c] rounded-md">
    A simple secondary alert—check it out!
</div>
<div class="py-[1rem] px-[1rem] text-success-500 bg-success-50 border border-success-200 dark:bg-[#15203c] dark:border-[#15203c] rounded-md">
    A simple success alert—check it out!
</div>
<div class="py-[1rem] px-[1rem] text-danger-500 bg-danger-50 border border-danger-200 dark:bg-[#15203c] dark:border-[#15203c] rounded-md">
    A simple danger alert—check it out!
</div>
<div class="py-[1rem] px-[1rem] text-warning-500 bg-warning-50 border border-warning-200 dark:bg-[#15203c] dark:border-[#15203c] rounded-md">
    A simple warning alert—check it out!
</div>
<div class="py-[1rem] px-[1rem] text-info-500 bg-info-50 border border-info-200 dark:bg-[#15203c] dark:border-[#15203c] rounded-md">
    A simple info alert—check it out!
</div>
<div class="py-[1rem] px-[1rem] text-gray-500 bg-gray-50 border border-gray-200 dark:bg-[#15203c] dark:border-[#15203c] rounded-md">
    A simple light alert—check it out!
</div>
<div class="py-[1rem] px-[1rem] text-dark bg-[#ced4da] border border-[#adb5bd] dark:bg-[#15203c] dark:border-[#15203c] dark:text-white rounded-md">
    A simple dark alert—check it out!
</div>

<div class="py-[1rem] px-[1rem] text-white bg-primary-500 border border-primary-500 rounded-md">
    A simple primary alert—check it out!
</div>
<div class="py-[1rem] px-[1rem] text-white bg-secondary-500 border border-secondary-500 rounded-md">
    A simple secondary alert—check it out!
</div>
<div class="py-[1rem] px-[1rem] text-white bg-success-500 border border-success-500 rounded-md">
    A simple success alert—check it out!
</div>
<div class="py-[1rem] px-[1rem] text-white bg-danger-500 border border-danger-500 rounded-md">
    A simple danger alert—check it out!
</div>
<div class="py-[1rem] px-[1rem] text-white bg-warning-500 border border-warning-500 rounded-md">
    A simple warning alert—check it out!
</div>
<div class="py-[1rem] px-[1rem] text-white bg-info-500 border border-info-500 rounded-md">
    A simple info alert—check it out!
</div>
<div class="py-[1rem] px-[1rem] text-gray-500 bg-[#f8f9fa] border border-[#f8f9fa] rounded-md">
    A simple light alert—check it out!
</div>
<div class="py-[1rem] px-[1rem] text-white bg-dark border border-dark rounded-md">
    A simple dark alert—check it out!
</div>

<div class="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 gap-[5px]">
    <i class="ri-home-2-line text-[20px]"></i>
    A simple primary alert—check it out!
</div>

<div class="py-[1rem] px-[1rem] text-white bg-primary-500 border border-primary-500 rounded-md flex items-center gap-[5px]">
    <i class="ri-home-2-line text-[20px]"></i>
    A simple primary alert—check it out!
</div>

<div class="py-[1rem] px-[1rem] text-primary-500 border border-primary-500 rounded-md">
    A simple primary alert—check it out!
</div>
<div class="py-[1rem] px-[1rem] text-secondary-500 border border-secondary-500 rounded-md">
    A simple secondary alert—check it out!
</div>
<div class="py-[1rem] px-[1rem] text-success-500 border border-success-500 rounded-md">
    A simple success alert—check it out!
</div>
<div class="py-[1rem] px-[1rem] text-danger-500 border border-danger-500 rounded-md">
    A simple danger alert—check it out!
</div>
<div class="py-[1rem] px-[1rem] text-warning-500 border border-warning-500 rounded-md">
    A simple warning alert—check it out!
</div>
<div class="py-[1rem] px-[1rem] text-info-500 border border-info-500 rounded-md">
    A simple info alert—check it out!
</div>
<div class="py-[1rem] px-[1rem] text-gray-500 border border-gray-100 rounded-md">
    A simple light alert—check it out!
</div>
<div class="py-[1rem] px-[1rem] text-dark border border-dark rounded-md">
    A simple dark alert—check it out!
</div>

<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>