Cookies Components in Asitrastudio library

<div class="fixed bottom-0 right-0 w-full bg-white z-50" x-data="{ open: true }" x-show="open">
  <div class="relative pt-8 pb-9">
    <button class="absolute top-0 right-0 mt-4 mr-6 p-0 text-xl" x-on:click="open = false">
      <svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M7.5 6.45616L7.42929 6.38545L1.96352 0.919676C1.96351 0.919673 1.96351 0.919669 1.96351 0.919666C1.75876 0.714984 1.4811 0.6 1.19159 0.6C0.902079 0.6 0.624425 0.71498 0.419676 0.919655C0.419669 0.919662 0.419662 0.919669 0.419655 0.919676M7.5 6.45616L0.419655 0.919676M7.5 6.45616L7.57071 6.38545M7.5 6.45616L7.57071 6.38545M0.419655 0.919676C0.21498 1.12442 0.1 1.40208 0.1 1.69159C0.1 1.9811 0.214984 2.25876 0.419666 2.46351M0.419655 0.919676L0.419666 2.46351M0.419666 2.46351C0.419669 2.46351 0.419673 2.46351 0.419676 2.46352M0.419666 2.46351L0.419676 2.46352M0.419676 2.46352L5.88545 7.92929M0.419676 2.46352L5.88545 7.92929M7.57071 6.38545L13.0365 0.919676C13.0365 0.919673 13.0365 0.919669 13.0365 0.919666C13.2412 0.714984 13.5189 0.6 13.8084 0.6C14.0979 0.6 14.3756 0.71498 14.5803 0.919655C14.785 1.12441 14.9 1.40207 14.9 1.69159C14.9 1.9811 14.785 2.25876 14.5803 2.46351C14.5803 2.46351 14.5803 2.46351 14.5803 2.46352L9.11455 7.92929L9.04384 8L9.11455 8.07071L14.5803 13.5365C14.5803 13.5365 14.5803 13.5365 14.5803 13.5365M7.57071 6.38545L14.5803 13.5365M5.95616 8L5.88545 8.07071L0.419676 13.5365C0.419673 13.5365 0.419669 13.5365 0.419666 13.5365C0.214984 13.7412 0.1 14.0189 0.1 14.3084C0.1 14.5979 0.21498 14.8756 0.419655 15.0803C0.624405 15.285 0.902069 15.4 1.19159 15.4C1.4811 15.4 1.75876 15.285 1.96351 15.0803C1.96351 15.0803 1.96351 15.0803 1.96352 15.0803L7.42929 9.61455L7.5 9.54384L7.57071 9.61455L13.0365 15.0803C13.0365 15.0803 13.0365 15.0803 13.0365 15.0803C13.2412 15.285 13.5189 15.4 13.8084 15.4C14.0979 15.4 14.3756 15.285 14.5803 15.0803C14.5803 15.0803 14.5803 15.0803 14.5803 15.0803M5.95616 8L14.5803 15.0803M5.95616 8L5.88545 7.92929M5.95616 8L5.88545 7.92929M14.5803 15.0803C14.785 14.8756 14.9 14.5979 14.9 14.3084C14.9 14.0189 14.785 13.7412 14.5803 13.5365M14.5803 15.0803L14.5803 13.5365" fill="#222222" stroke="black" stroke-width="1"></path>
      </svg>
    </button>
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-8/12 px-4 mb-8 lg:mb-0">
          <h4 class="font-medium text-2xl tracking-tight mb-4">Cookie Consent</h4>
          <p class="text-coolGray-500 text-sm leading-snug mb-5">In order to provide you with a more personal user experience, we and our selected third parties use cookies or similar technologies for technical purposes and, with your consent, for “basic interactions &amp; functionalities”, “experience enhancement”, “measurement” and “targeting &amp; advertising”. Denying consent may make related features unavailable. You can freely give, deny, or withdraw your consent at any time.Use the “I accept” button to consent to the use of such technologies.</p>
        </div>
        <div class="w-full lg:w-4/12 px-4 sm:flex items-center lg:justify-end">
          <a x-on:click.prevent="open = false" class="inline-block w-full sm:w-auto text-center mb-3 sm:mb-0 sm:mr-4 py-4 px-8 font-medium text-white leading-none bg-black hover:bg-blue-500 border-1.5 border-black hover:border-blue-500 rounded-full transition duration-150" href="#">I accept</a>
          <a class="inline-block w-full sm:w-auto text-center py-4 px-8 font-medium text-black hover:text-white leading-none bg-white hover:bg-black border-1.5 border-black rounded-full transition duration-150" href="#">Settings</a>
        </div>
      </div>
    </div>
  </div>
</div>

<section class="is-relative is-clipped" x-data="{ open: true }" :class="{ 'is-hidden': !open }">
  <div class="pt-8 pb-9 is-fixed is-bottom-0 is-right-0 has-background-white" style="z-index: 50; width: 100%;">
    <div class="is-absolute is-top-0 is-right-0 mt-2 mr-5 mr-12-widescreen">
      <button x-on:click.prevent="open = false" class="button p-0 is-light has-background-white">
        <svg width="15" height="16" viewbox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7.5 6.45616L7.42929 6.38545L1.96352 0.919676C1.96351 0.919673 1.96351 0.919669 1.96351 0.919666C1.75876 0.714984 1.4811 0.6 1.19159 0.6C0.902079 0.6 0.624425 0.71498 0.419676 0.919655C0.419669 0.919662 0.419662 0.919669 0.419655 0.919676M7.5 6.45616L0.419655 0.919676M7.5 6.45616L7.57071 6.38545M7.5 6.45616L7.57071 6.38545M0.419655 0.919676C0.21498 1.12442 0.1 1.40208 0.1 1.69159C0.1 1.9811 0.214984 2.25876 0.419666 2.46351M0.419655 0.919676L0.419666 2.46351M0.419666 2.46351C0.419669 2.46351 0.419673 2.46351 0.419676 2.46352M0.419666 2.46351L0.419676 2.46352M0.419676 2.46352L5.88545 7.92929M0.419676 2.46352L5.88545 7.92929M7.57071 6.38545L13.0365 0.919676C13.0365 0.919673 13.0365 0.919669 13.0365 0.919666C13.2412 0.714984 13.5189 0.6 13.8084 0.6C14.0979 0.6 14.3756 0.71498 14.5803 0.919655C14.785 1.12441 14.9 1.40207 14.9 1.69159C14.9 1.9811 14.785 2.25876 14.5803 2.46351C14.5803 2.46351 14.5803 2.46351 14.5803 2.46352L9.11455 7.92929L9.04384 8L9.11455 8.07071L14.5803 13.5365C14.5803 13.5365 14.5803 13.5365 14.5803 13.5365M7.57071 6.38545L14.5803 13.5365M5.95616 8L5.88545 8.07071L0.419676 13.5365C0.419673 13.5365 0.419669 13.5365 0.419666 13.5365C0.214984 13.7412 0.1 14.0189 0.1 14.3084C0.1 14.5979 0.21498 14.8756 0.419655 15.0803C0.624405 15.285 0.902069 15.4 1.19159 15.4C1.4811 15.4 1.75876 15.285 1.96351 15.0803C1.96351 15.0803 1.96351 15.0803 1.96352 15.0803L7.42929 9.61455L7.5 9.54384L7.57071 9.61455L13.0365 15.0803C13.0365 15.0803 13.0365 15.0803 13.0365 15.0803C13.2412 15.285 13.5189 15.4 13.8084 15.4C14.0979 15.4 14.3756 15.285 14.5803 15.0803C14.5803 15.0803 14.5803 15.0803 14.5803 15.0803M5.95616 8L14.5803 15.0803M5.95616 8L5.88545 7.92929M5.95616 8L5.88545 7.92929M14.5803 15.0803C14.785 14.8756 14.9 14.5979 14.9 14.3084C14.9 14.0189 14.785 13.7412 14.5803 13.5365M14.5803 15.0803L14.5803 13.5365" fill="#222222" stroke="black" stroke-width="1"></path>
        </svg>
      </button>
    </div>
    <div class="section py-0">
      <div class="container">
        <div class="columns is-multiline is-vcentered">
          <div class="column is-7 mb-6 mb-0-desktop">
            <h4 class="mb-4 is-size-5 has-text-weight-medium has-text-dark" style="letter-spacing: -0.01em;">Cookie Consent</h4>
            <p class="is-size-7 has-text-grey mb-4">In order to provide you with a more personal user experience, we and our selected third parties use cookies or similar technologies for technical purposes and, with your consent, for &ldquo;basic interactions &amp; functionalities&rdquo;, &ldquo;experience enhancement&rdquo;, &ldquo;measurement&rdquo; and &ldquo;targeting &amp; advertising&rdquo;. Denying consent may make related features unavailable. You can freely give, deny, or withdraw your consent at any time.Use the &ldquo;I accept&rdquo; button to consent to the use of such technologies.</p>
            <p class="is-size-7 has-text-grey">Use the &ldquo;I don&rsquo;t accept&rdquo; button to continue without accepting.</p>
          </div>
          <div class="column is-5 is-flex is-align-items-center is-justify-content-end"><a x-on:click.prevent="open = false" class="button is-small py-4 is-dark mr-4 is-rounded" href="#">I accept</a><a class="button is-small py-4 is-outlined is-dark is-rounded" href="#">Settings</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="position-fixed bottom-0 end-0 w-100 bg-white pt-8 pb-9" style="z-index: 50;">
  <button class="position-absolute top-0 end-0 mt-2 me-5 me-xl-12 btn btn-link p-0 fs-6 fw-bold">
    <svg width="15" height="16" viewbox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M7.5 6.45616L7.42929 6.38545L1.96352 0.919676C1.96351 0.919673 1.96351 0.919669 1.96351 0.919666C1.75876 0.714984 1.4811 0.6 1.19159 0.6C0.902079 0.6 0.624425 0.71498 0.419676 0.919655C0.419669 0.919662 0.419662 0.919669 0.419655 0.919676M7.5 6.45616L0.419655 0.919676M7.5 6.45616L7.57071 6.38545M7.5 6.45616L7.57071 6.38545M0.419655 0.919676C0.21498 1.12442 0.1 1.40208 0.1 1.69159C0.1 1.9811 0.214984 2.25876 0.419666 2.46351M0.419655 0.919676L0.419666 2.46351M0.419666 2.46351C0.419669 2.46351 0.419673 2.46351 0.419676 2.46352M0.419666 2.46351L0.419676 2.46352M0.419676 2.46352L5.88545 7.92929M0.419676 2.46352L5.88545 7.92929M7.57071 6.38545L13.0365 0.919676C13.0365 0.919673 13.0365 0.919669 13.0365 0.919666C13.2412 0.714984 13.5189 0.6 13.8084 0.6C14.0979 0.6 14.3756 0.71498 14.5803 0.919655C14.785 1.12441 14.9 1.40207 14.9 1.69159C14.9 1.9811 14.785 2.25876 14.5803 2.46351C14.5803 2.46351 14.5803 2.46351 14.5803 2.46352L9.11455 7.92929L9.04384 8L9.11455 8.07071L14.5803 13.5365C14.5803 13.5365 14.5803 13.5365 14.5803 13.5365M7.57071 6.38545L14.5803 13.5365M5.95616 8L5.88545 8.07071L0.419676 13.5365C0.419673 13.5365 0.419669 13.5365 0.419666 13.5365C0.214984 13.7412 0.1 14.0189 0.1 14.3084C0.1 14.5979 0.21498 14.8756 0.419655 15.0803C0.624405 15.285 0.902069 15.4 1.19159 15.4C1.4811 15.4 1.75876 15.285 1.96351 15.0803C1.96351 15.0803 1.96351 15.0803 1.96352 15.0803L7.42929 9.61455L7.5 9.54384L7.57071 9.61455L13.0365 15.0803C13.0365 15.0803 13.0365 15.0803 13.0365 15.0803C13.2412 15.285 13.5189 15.4 13.8084 15.4C14.0979 15.4 14.3756 15.285 14.5803 15.0803C14.5803 15.0803 14.5803 15.0803 14.5803 15.0803M5.95616 8L14.5803 15.0803M5.95616 8L5.88545 7.92929M5.95616 8L5.88545 7.92929M14.5803 15.0803C14.785 14.8756 14.9 14.5979 14.9 14.3084C14.9 14.0189 14.785 13.7412 14.5803 13.5365M14.5803 15.0803L14.5803 13.5365" fill="#222222" stroke="black" stroke-width="1"></path>
    </svg>
  </button>
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-8 mb-6 mb-lg-0">
        <h4 class="fs-5 fw-medium mb-4" >Cookie Consent</h4>
        <p class="text-secondary-light fs-9" >
          In order to provide you with a more personal user experience, we and our selected third parties use cookies or similar
          technologies for technical purposes and, with your consent, for &ldquo;basic interactions &amp; functionalities&rdquo;, &ldquo;experience
          enhancement&rdquo;, &ldquo;measurement&rdquo; and &ldquo;targeting &amp; advertising&rdquo;. Denying consent may make related features unavailable. You
          can freely give, deny, or withdraw your consent at any time.Use the &ldquo;I accept&rdquo; button to consent to the use of such
          technologies.
        </p>
        <p class="text-secondary-light fs-9 mb-0" >Use the &ldquo;I don&rsquo;t accept&rdquo; button to continue without accepting.</p>
      </div>
      <div class="col-12 col-lg-4 d-flex align-items-center justify-content-lg-end"><a class="btn me-4 btn-dark" href="#" >I accept</a><a class="btn btn-outline-dark" href="#" >Settings</a></div>
    </div>
  </div>
</div>