Alert UI Components – Sirius Library

<section>
  <div class="alert alert-primary alert-dismissible fade show py-10 px-10 px-lg-20" role="alert">
    <p class="alert-heading fw-bold mb-4">Cookies! &#x1F36A;</p>
    <div class="row">
      <div class="col-12 col-lg-7 mb-5 mb-lg-0">
        <p class="mb-0 mw-2xl">This site uses functional and analytical cookies to offer you an optimal visitor experience. This also enables us to record and analyze visitor behaviour and thereby improve our site and display relevant advertisements. By clicking on accpet you agree with this.</p>
      </div>
      <div class="col-12 col-lg-5">
        <div class="mw-md ms-lg-auto d-flex align-items-center">
          <button class="btn me-2 btn-outline-light" type="button"><span class="me-3">
              <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.375 8.06219L1.875 8.06221" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M10.125 8.06221L7.875 8.06219" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M3.375 3.93724L1.875 3.93716" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M10.125 3.93716L4.875 3.93724" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M4.875 2.81219V5.0622" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M7.875 9.18719V6.93719" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></span><span>Manage cookies</span></button>
          <button class="btn btn-danger" type="button"><span class="me-3">
              <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.125 3.37524L4.875 8.62501L2.25 6.00024" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></span><span>Accept cookies</span></button>
        </div>
      </div>

<section x-data="{ open: true }" :class="{'hidden': !open}">
    <div class="bg-blue-500 py-10 px-10 lg:px-20">
        <div class="container mx-auto px-4">
            <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
                <p class="text-white text-sm font-semibold">Cooookies! 🍪</p>
                <button x-on:click="open=false">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                        <g clip-path="url(#clip0_708_3760)">
                          <path d="M15.625 4.375L4.375 15.625" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                          <path d="M15.625 15.625L4.375 4.375" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </g>
                        <defs>
                          <clipPath id="clip0_708_3760">
                            <rect width="20" height="20" fill="white"></rect>
                          </clipPath>
                        </defs>
                    </svg>
                </button>
            </div>
            <div class="flex flex-wrap -m-4">
                <div class="w-full lg:w-7/12 p-4">
                    <p class="text-white text-sm max-w-2xl">This site uses functional and analytical cookies to offer you an optimal visitor experience. This also enables us to record and analyze visitor behaviour and thereby improve our site and display relevant advertisements. By clicking on accpet you agree with this.</p>
                    <a href="#" class="text-white text-sm underline">Read more about our privacy policy.</a>
                </div>