JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js"></script>

<style type="text/css">
  .bottom__cookie-block {
    width: 100%;
    height: 350px;
    background-color: #ffffff;
    display: none;
    padding: 4px;
    position: fixed;
    bottom: 0;
    z-index: 100000;
    text-align: center;
    -webkit-transform: translateZ(0);
  }

</style>



<div class="bottom__cookie-block">
  <p>Продолжая использовать сайт, вы соглашаетесь на сбор файлов cookie <a href="javascript:void(0);" class="ok">Ок </a>
    <a href="#" class="podr">Подробнее</a>
  </p>
</div>

<script src="https://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js">
  $(function() {
    // Проверяем запись в куках о посещении
    // Если запись есть - ничего не происходит
    if (!$.cookie('hideModal')) {
      // если cookie не установлено появится окно
      // с задержкой 5 секунд
      var delay_popup = 100;
      setTimeout("document.querySelector('.bottom__cookie-block').style.display='inline-block'", delay_popup);
    }
    $.cookie('hideModal', true, {
      // Время хранения cookie в днях
      expires: 30,
      path: '/'
    });
  });

  // Закрытие полосы cookie

  $('.ok').click(function() {
    $('.bottom__cookie-block').fadeOut();
  });

</script>

<!-- dog sale -->
<a href="#" id="mk1" style="display:block" class="btn-mondal open-modal" data-modal="#modal1">Open Modal</a>
<div class="overlay">
  <div class="modal"...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}