Küpsised

<!-- use class 'fixed' for bottom layout -->
<div id="cookie-overlay" class="bottom-0 left-0 right-0 p-2 bg-gray-50 shadow-lg z-[999]">
  <div class="flex items-center justify-between mx-auto">
    <p class="text-sm">
      Sellel veebilehel kasutatakse küpsiseid. Saate küpsistest igal ajal loobuda, muutes kasutatava veebilehitseja
      seadistusi ja kustutades salvestatud küpsised.
    </p>
    <div class="md:whitespace-nowrap text-center">
      <a href="#" class="
        inline-flex flex-nowrap items-center py-2 text-sm px-4
        font-medium text-center text-gray-900 bg-transparent rounded cursor-pointer border-none
        no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
        hover:bg-white/60 focus:active:bg-white
    ">
        Loe lähemalt
      </a>
      <button type="button" class="
        inline-flex flex-nowrap items-center py-2 text-sm px-4
        font-medium text-center text-gray-900 bg-white rounded cursor-pointer
        border border-solid border-gray-200 focus:active:border-gray-900
        no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
        hover:bg-gray-100 focus:active:bg-gray-200
      ">
        Nõus
      </button>
    </div>
  </div>
</div>

<!-- use class 'fixed' for bottom layout -->
<div id="cookie-overlay" class="bottom-0 left-0 right-0 p-2 bg-gray-800 shadow-lg z-[999]">
  <div class="flex items-center justify-between mx-auto">
    <p class="text-sm text-gray-50">
      Sellel veebilehel kasutatakse küpsiseid. Saate küpsistest igal ajal loobuda, muutes kasutatava veebilehitseja
      seadistusi ja kustutades salvestatud küpsised.
    </p>
    <div class="md:whitespace-nowrap text-center">
      <a href="#" class="
        inline-flex flex-nowrap items-center py-2 px-4 text-sm text-gray-50
        font-medium text-center bg-transparent rounded cursor-pointer border-none
        no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
        hover:bg-white/60 focus:active:bg-white hover:text-gray-900 focus:active:text-gray-900
    ">
        Loe lähemalt
      </a>
      <button type="button" class="
        inline-flex flex-nowrap items-center py-2 text-sm px-4
        font-medium text-center text-gray-900 bg-white rounded cursor-pointer
        border border-solid border-gray-200 focus:active:border-gray-900
        no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
        hover:bg-gray-100 focus:active:bg-gray-200
      ">
        Nõus
      </button>
    </div>
  </div>
</div>

<!-- uses AlpineJS and plugin $persist for local Storage -->
<div x-data="{ cookies: $persist(false).as('accept-cookies') }">
  <div id="cookie-overlay" :class="cookies ? 'hidden' : 'block'"
       class="bottom-0 left-0 right-0 p-2 bg-gray-50 shadow-lg z-[999]">
    <div class="flex items-center justify-between mx-auto">
      <p class="text-sm">
        Sellel veebilehel kasutatakse küpsiseid. Saate küpsistest igal ajal loobuda, muutes kasutatava veebilehitseja
        seadistusi ja kustutades salvestatud küpsised.
      </p>
      <div class="md:whitespace-nowrap text-center">
        <a target="_blank" href="#" class="
          inline-flex flex-nowrap items-center py-2 text-sm px-4
          font-medium text-center text-gray-900 bg-transparent rounded cursor-pointer border-none
          no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
          hover:bg-white/60 focus:active:bg-white
      ">
          Loe lähemalt
        </a>
        <button type="button" @click="cookies = !cookies" class="
          inline-flex flex-nowrap items-center py-2 text-sm px-4
          font-medium text-center text-gray-900 bg-white rounded cursor-pointer
          border border-solid border-gray-200 focus:active:border-gray-900
          no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
          hover:bg-gray-100 focus:active:bg-gray-200
        ">
          Nõus
        </button>
      </div>
    </div>
  </div>
</div>