JSFiddle - React, Tailwind, and code Playground

by Yuriy Petrichenko

HTML

<div>
  <h2>I want say</h2>
  <p>Hello I love JS</p>
  <div class="back">
    <h1>I love Js</h1>
  </div>
  <p id="last">And it hard way</p>
</div>

CSS

div {
  display: flex;
  flex-direction: column;
  align-items:center;
  text-align: center;
  background-color: black;
}
.back:hover{
  transition:all .5s;
  box-shadow: 0px 3px 35px 1px orange;
   border-top-left-radius:21px;
   border-bottom-right-radius:21px;
   border-top-right-radius:51px;
   border-bottom-left-radius:51px;
}
.back {
   display: flex;
  align-items:center;
  text-align: center;
  width: 80%;
  box-shadow: 0px 3px 10px 1px orange;
  background-color: yellow;
  transition:all .5s;
}

p {
  color: white;
  filter: blur(3px);
}

h1 {
padding:0;
transform: rotate(25deg);
  color: black;
}
h2{
  margin:0;
  color:white;
}
#last{
  filter: blur(2px);
}

JavaScript

function pow(x, n) {
  if (n != 1) { // пока n != 1, сводить вычисление pow(x,n) к pow(x,n-1)
    return x * pow(x, n - 1);
  } else {
    return x;
  }
}

alert( pow(2, 3) ); // 8