JSFiddle - React, Tailwind, and code Playground

by Vasilii Chugunov

HTML

<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="stage">
  <div id="dialogBackground" style="display:none;"></div>
  <div id="dialogText" style="display:none;">
  </div>
</div>

CSS

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
#stage {
  width: 100%;
  min-height: 100%;
  border: 2px solid green;
  position: relative;
}

#dialogBackground {
  position: absolute;
  width: 200px;
  height: 100px;
  background-color: black;
  color: white;
  border-radius: 10px;
}

#dialogText {
  position: absolute;
  width: 150px;
  height: 50px;
  color: white;
  bottom: 0%;
  padding: 30px
}

JavaScript

var dialog = $('#dialogBackground');
var changeId = 1;
dialog.css('bottom', '0%');
$('#stage').click(function() {
  $('#dialogBackground').animate({
    width: "show"
  }, 500);
  $('#dialogText').toggle("drop");
  changeId++;
  switch (changeId) {
    case 2:
      $('#dialogText').text('Учебник CSS для начинающих.');
      break;
    case 4:
      $('#dialogText').text('Yj Свойства шрифта');
      break;
    case 6:
      $('#dialogText').text('Свойства шрифта2');
      break;
    case 8:
      $('#dialogText').text('Урок 1 Начать');
      changeId = 0;
      break;
  }
});