Alerts

                      <div class="alert alert-primary !text-[#2c549d] !bg-[#edf2fc] !border-[#2c549d] alert-icon !p-[1rem] !pl-10 alert-dismissible fade show !border-0 !shadow-none" role="alert"><i class="uil uil-star before:content-['\eceb']"></i> A simple primary alert with <a href="#" class="alert-link hover:!text-[#2c549d] text-[#2c549d] hover">an example link</a>.<button type="button" class="btn-close !text-[#2c549d]" data-bs-dismiss="alert" aria-label="Close"></button>
                      </div>
                      <div class="alert alert-secondary !text-[#777b84] !bg-[#f7f7f9] !border-[#777b84] !p-[1rem]  alert-icon !pl-10 alert-dismissible fade show !border-0 !shadow-none" role="alert"><i class="uil uil-clock before:content-['\e9ee']"></i> A simple secondary alert with <a href="#" class="alert-link !text-[#777b84] hover">an example link</a>.<button type="button" class="btn-close !text-[#777b84]" data-bs-dismiss="alert" aria-label="Close"></button>
                      </div>
                      <div class="alert alert-success !text-[#308970] !bg-[#edf9f6] !border-[#308970] !p-[1rem]  alert-icon !pl-10 alert-dismissible fade show !border-0 !shadow-none" role="alert"><i class="uil uil-check-circle before:content-['\e9db']"></i> A simple success alert with <a href="#" class="alert-link !text-[#308970] hover">an example link</a>.<button type="button" class="btn-close !text-[#308970]" data-bs-dismiss="alert" aria-label="Close"></button>
                      </div>
                      <div class="alert alert-danger !text-[#9e454b] !bg-[#fcf0f1] !border-[#9e454b] !p-[1rem]  alert-icon !pl-10 alert-dismissible fade show !border-0 !shadow-none" role="alert"><i class="uil uil-times-circle before:content-['\ed37']"></i> A simple danger alert with <a href="#" class="alert-link !text-[#9e454b] hover">an example link</a>.<button type="button" class="btn-close !text-[#9e454b]" data-bs-dismiss="alert" aria-label="Close"></button>
                      </div>
                      <div class="alert alert-warning !text-[#af803e] !bg-[#fff8ee] !border-[#af803e] !p-[1rem]  alert-icon !pl-10 alert-dismissible fade show !border-0 !shadow-none" role="alert"><i class="uil uil-exclamation-triangle before:content-['\ead2']"></i> A simple warning alert with <a href="#" class="alert-link !text-[#af803e] hover">an example link</a>.<button type="button" class="btn-close !text-[#af803e]" data-bs-dismiss="alert" aria-label="Close"></button>
                      </div>
                      <div class="alert alert-info !text-[#3b768b] !bg-[#eff7fa] !border-[#3b768b] !p-[1rem]  alert-icon !pl-10 alert-dismissible fade show !border-0 !shadow-none" role="alert"><i class="uil uil-exclamation-circle before:content-['\ead0']"></i> A simple info alert with <a href="#" class="alert-link hover:!text-[#3b768b] !text-[#3b768b] hover">an example link</a>.<button type="button" class="btn-close !text-[#3b768b]" data-bs-dismiss="alert" aria-label="Close"></button>
                      </div>
                      <div class="alert alert-light !text-[#b2b2b2] !bg-[#fbfbfc] !border-[#b2b2b2] !p-[1rem]  alert-icon !pl-10 alert-dismissible fade show !border-0 !shadow-none" role="alert"><i class="uil uil-lock before:content-['\ebdc']"></i> A simple light alert with <a href="#" class="alert-link hover:!text-[#b2b2b2] text-[#b2b2b2] hover">an example link</a>.<button type="button" class="btn-close !text-[#b2b2b2]" data-bs-dismiss="alert" aria-label="Close"></button>
                      </div>
                      <div class="alert alert-dark !text-[#1b1e23] !bg-[#eaebec] !border-[#1b1e23] !p-[1rem]   alert-icon !pl-10 alert-dismissible fade show !border-0 !shadow-none" role="alert"><i class="uil uil-map-marker-info before:content-['\ebde']"></i> A simple dark alert with <a href="#" class="alert-link hover:!text-[#1b1e23] text-[#1b1e23] hover">an example link</a>.<button type="button" class="btn-close !text-[#1b1e23]" data-bs-dismiss="alert" aria-label="Close"></button>
                      </div>