JSFiddle - React, Tailwind, and code Playground

by Vsnegovik

HTML

<script src="https://e-timer.ru/js/etimer.js"></script>
<a href="#0" title="Записаться онлайн" class="zapis">Записаться онлайн</a>

<div class="cd-panel from-right">
    <header class="cd-panel-header">
      <h2>Записаться онлайн</h2>
      <a href="#0" class="cd-panel-close" title="Закрыть"><i class="icon-close"></i></a>
    </header>

    <div class="cd-panel-container">
      <div class="cd-panel-content">
       <h3>Выберите услугу</h3>
        <p>fg gdfg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg ffg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf gdfg dfg dfg dfg dfg dfg df dfg dfg dfg fg dfgdf fg...

CSS

.cd-panel {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 400px;
  visibility: hidden;
  -webkit-transition: visibility 0s 0.6s;
  transition: visibility 0s 0.6s;
}
.cd-panel::after {
  /* overlay layer */
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 100%;
  background: transparent;
  cursor: pointer;
  -webkit-transition: background 0.3s 0.3s;
  transition: background 0.3s 0.3s;
}
.cd-panel.is-visible {
  visibility: visible;
  -webkit-transition: visibility 0s 0s;
  transition: visibility 0s 0s;
}
.cd-panel.is-visible::after {
  background: rgba(0, 0, 0, 0.6);
  -webkit-transition: background 0.3s 0s;
  transition: background 0.3s 0s;
}
.cd-panel-header {
  position: fixed;
  width: 400px;
  height: 60px;
  line-height: 60px;
  z-index: 2;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  -webkit-transition: top 0.3s 0s;
  transition: top 0.3s 0s;
  background: #CCCCCC;
}
.cd-panel-header h2 {
  font-weight: 600;
  color: #000;
  text-transform: uppercase;
  font-size: 16px;
  padding: 0 20px 0 20px;
}
.from-right .cd-panel-header, .from-left .cd-panel-header {
  top: -60px;
}
.from-right .cd-panel-header {
  right: 0;
}
.from-left .cd-panel-header {
  left: 0;
}
.is-visible .cd-panel-header {
  top: 0;
  -webkit-transition: top 0.3s 0.3s;
  transition: top 0.3s 0.3s;
}

.cd-panel-close {
  position: absolute;
  top: 0;
  right: 0;
  height: 60px;
  line-height: 68px;
  width: 60px;
  display: inline-block;
background: #000;
  text-align: center;
}
.cd-panel-close:hover {
  background: #F8A717;
}
.cd-panel-close:hover .icon-close:before{
color: #000;
}
.cd-panel-close > i {
  pointer-events: none;
}

.cd-panel-container {
  position: fixed;
  width: 400px;
  height: 100%;
  top: 0;
  background: #eee;
  z-index: 1;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property:...

JavaScript

jQuery(document).ready(function ($) {
    //open the lateral panel
    $('.zapis').on('click', function (event) {
      event.preventDefault();
      $('.cd-panel').addClass('is-visible');
    });
    //clode the lateral panel
    $('.cd-panel').on('click', function (event) {
      if ($(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close')) {
        $('.cd-panel').removeClass('is-visible');
        event.preventDefault();
      }
    });
  });