JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<div class="bg">
  <div class="planetN">
    <div class="planetN-before">
      Планета 2-ого Каскада. Нептун.
      <br> Население 1.
      <br> Вид Федор.
      <br>
    </div>
  </div>
  <div class="planetM">
    <div class="planetM-before">
      Планета 3-ого Каскада. Марс.
      <br> Населени 2.
      <br> Вид Ученики.
      <br> Именуемые:
      <br> Антон, Александр
    </div>
  </div>
  <div class="planetS">
    <div class="planetS-before">
      Планета 4-ого Каскада. Сатурн.
      <br> Население 2.
      <br> Вид JavaScript.
      <br> Именуемые:
      <br>Ваня, Никита
      <br>
    </div>
  </div>
  <div class="planetZ">
    <div class="planetZ-before">
      Планета 1-ого Каскада. Земля.
      <br> Население: Веб-содружество.
      <br> Вид cyberForumJsFiddleSyn.
      <br>
    </div>
  </div>
</div>

CSS

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.bg {
  background: url(https://kudago.com/media/images/event/4c/bd/4cbdde84052a80c7617f72cfadd36449.jpg) no-repeat center center;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.planetN {
  position: absolute;
  width: 33%;
  height: 52%;
  border-radius: 50%;
  top: -3.3%;
  left: 6%;
  transition: all 0.3s ease-in;
}

.planetN:hover {
  background: rgba(8, 1, 145, 0.3)
}

.planetN-before {
  transition: all 2s ease-in;
  position: fixed;
  left:-100%;
  width: 200px;
  top: 50px;
  border: 2px solid rgba(0, 153, 224, 1);
  z-index: 2;
  text-align: right;
}

.planetN:hover .planetN-before {
 left:0;
 transition: all 1s;
  background: rgba(8, 1, 145, 0.8);
  color: #fff;
  border: 2px solid rgba(0, 153, 224, 1);
  border-right: 2px solid rgba(0, 153, 224, 1);
  border-bottom: 2px solid rgba(0, 104, 200, 1);
  border-radius: 5px;
}

.planetM {
  position: absolute;
  width: 15.7%;
  height: 25%;
  border-radius: 50%;
  top: 26.3%;
  left: 47%;
  transition: all 0.3s ease-in;
}

.planetM:hover {
  background: rgba(216, 17, 17, 0.3)
}

.planetM-before {
  transition: all 2s ease-in;
  position: fixed;
  left:-100%;
  width: 200px;
  top:10%;
  border: 2px solid rgba(0, 153, 224, 1);
  z-index: 2;
  text-align: right;
}

.planetM:hover .planetM-before {
  left:0;
  transition: all 1s;
  background: rgba(8, 1, 145, 0.8);
  color: #fff;
  border: 2px solid rgba(0, 153, 224, 1);
  border-right: 2px solid rgba(0, 153, 224, 1);
  border-bottom: 2px solid rgba(0, 104, 200, 1);
  border-radius: 5px;
}

.planetS {
  position: absolute;
  width: 9%;
  height: 15%;
  border-radius: 50%;
  top: 77.5%;
  left: 12%;
  transition: all 0.3s ease-in;
}

.planetS:hover {
  background: rgba(145, 78, 78, 0.3)
}

.planetS-before {
  transition: all 2s ease-in;
  position:fixed;
  left:-100%;
  width: 200px;
  height: 115px;
  top: 10%;
  border: 2px solid rgba(0, 153, 224,...