JSFiddle - React, Tailwind, and code Playground

by doctor23

HTML

<div class="privacy-container">
  <div class="privacy">
    <div class="privacy__title">
      <h2>Политика конфиденциальности<br>персональных данных</h2>
      <div class="close"></div>
    </div>
    <div class="privacy__text">
      <p>Настоящая Политика конфиденциальности персональных данных (далее – Политика конфиденциальности) действует в
        отношении всей информации, которую сайт <strong>asdasd</strong>, (далее – asdasd) расположенный на
        доменном имени <strong>sadasd</strong> (а также его субдоменах), может получить о Пользователе во время использования
        сайта sadasd (а также его субдоменов), его программ и его продуктов.</p>

      <h3>1. Определение терминов</h3>

      <p><strong>1.1 В настоящей Политике конфиденциальности используются следующие термины:<strong></p>

      <p>1.1.1. «<strong>Администрация сайта</strong>» (далее – Администрация) – уполномоченные сотрудники
        на управление сайтом <strong>asdasd</strong>,
        которые организуют и (или) осуществляют обработку персональных данных, а также определяет цели обработки персональных
        данных, состав персональных данных, подлежащих обработке, действия (операции), совершаемые с персональными данными.</p>

      <p>1.1.2. «Персональные данные» - любая информация, относящаяся к прямо или косвенно определенному, или определяемому
        физическому лицу (субъекту персональных данных).</p>

      <p>1.1.3. «Обработка персональных данных» - любое действие (операция) или совокупность действий (операций), совершаемых
        с использованием средств автоматизации или без использования таких средств с персональными данными, включая сбор, запись,
        систематизацию, накопление, хранение, уточнение (обновление, изменение), извлечение, использование, передачу
        (распространение, предоставление, доступ), обезличивание, блокирование, удаление, уничтожение персональных данных.</p>

      <p>1.1.4. «Конфиденциальность персональных данных» - обязательное для соблюдения...

SCSS

.privacy-container {
  * {
    transition: none;
  }

  .privacy {
    // display: none;
    // opacity: 0;
    width: 50%;
    margin: 20px auto;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #eee;

    .mCSB_draggerContainer {
      background: #006dad !important;
    }

    .mCSB_scrollTools {
      opacity: 1 !important;
    }

    .mCSB_dragger_bar,
    .mCSB_draggerRail {
      background: #fff !important;
    }

    .privacy__title {
      display: flex;
      background: #006dad;
      padding: 15px;
      position: fixed;
      width: 49%;

      h2 {
        color: #fff;
        text-align: center;
        width: 100%;
      }

      .close {
        width: 40px;
        height: 40px;
        top: 50%;
        right: 5%;

        &:after,
        &:before {
          background: #fff;
        }
      }
    }

    .privacy__text {
      padding: 30px;
      padding-top: 95px;

      h3,
      h4 {
        text-align: center;
      }

      p {
        font-weight: normal;
      }
    }
  }
}

JavaScript

$(window).on('load', function() {
  $('.privacy').mCustomScrollbar();
});