JSFiddle - React, Tailwind, and code Playground

HTML

<div class="calendar-wrap" id="calendar-wrap">
                        <div class="calendar-week">
                            <div class="calendar-day mon">Понедельник, 25</div>
                            <div class="calendar-day tue">Вторник, 26</div>
                            <div class="calendar-day wed">Среда, 27</div>
                            <div class="calendar-day thu">Четверг, 28</div>
                            <div class="calendar-day fri">Пятница, 1</div>
                            <div class="calendar-day sat current-day">Суббота, 2</div>
                            <div class="calendar-day sun">Воскресенье, 3</div>
                         </div>
                        <div class="calendar-week">
                            <div class="calendar-day">4</div>
                            <div class="calendar-day">5</div>
                            <div class="calendar-day">6</div>
                            <div class="calendar-day">7</div>
                            <div class="calendar-day">8</div>
                            <div class="calendar-day added-event">
                                <div class="day">9</div>
                                <div class="event-name">Новое событие!</div>
                                <div class="member">Дима Дима, Петя Михайлов</div>
                            </div>
                            <div class="calendar-day">10</div>
                        </div>
                        </div>

CSS

.calendar-wrap {
  margin-top: 10px;
  margin-bottom: 50px;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .calendar-wrap .calendar-week {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; }
    .calendar-wrap .calendar-week .calendar-day {
      width: calc(100%/7);
      min-height: 30vh;
      border: 1px solid #ebebeb;
      padding: 10px 0 0 10px;
      color: #999999;
      border-right: none;
      position: relative; }
      .calendar-wrap .calendar-week .calendar-day:last-child {
        border-right: 1px solid #ebebeb; }
      .calendar-wrap .calendar-week .calendar-day.current-day {
        background-color: #f4f4f4; }
      .calendar-wrap .calendar-week .calendar-day.added-event {
        background-color: #c2e4fe; }
      .calendar-wrap .calendar-week .calendar-day .day {
        margin-bottom: 10px; }
      .calendar-wrap .calendar-week .calendar-day .event-name {
        font-weight: bold;
        margin-bottom: 5px; }
      .calendar-wrap .calendar-week .calendar-day:hover {
        background-color: #e5f1f9;
        border: 1px solid #8abfe9;
        cursor: pointer; }
  .calendar-wrap .add-event-wrap {
    position: absolute;
    width: 300px;
    border: 1px solid #cccccc;
    background-color: #fff;
    right: -320px;
    z-index: 9;
    -webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.75);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -border-radius: 3px; }
    .calendar-wrap .add-event-wrap .inputs-wrap {
      margin: 20px 20px 25px 20px;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
     ...

JavaScript

var calendar = document.getElementById('calendar-wrap');

var selectedTd;


var div = document.createElement("div");
div.className = "add-event-wrap";
div.innerHTML = "<div class='inputs-wrap'><input type='text' placeholder='Событие' id='ev'><input type='text' placeholder='День, месяц, год' id='dat'><input type='text' placeholder='Имена участников' id='names'><textarea placeholder='Описание'></textarea><div class='buttons-wrap'><button type='submit' id='add'>Готово</button><button type='reset'>Удалить</button> </div> </div>";


calendar.onclick = function(event) {



    var target = event.target;


    while (target != this) {
        if (target.querySelectorAll('calendar-day')) {
            highlight(target);

            target.appendChild(div);
            return;
        }

        target = target.parentNode;
    }
};

function highlight(node) {

    if (selectedTd) {
        selectedTd.classList.remove('highlight');

    }
    selectedTd = node;
    selectedTd.classList.add('highlight');

}