<div class="container">
        <div class="card">
            <div class="toolbar">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="body">
                <div class="line-number">
                    <ul>
                        <li>254</li>
                        <li>255</li>
                        <li>256</li>
                        <li>257</li>
                        <li>258</li>
                        <li>259</li>
                        <li>260</li>
                        <li>261</li>
                        <li>262</li>
                        <li>263</li>
                        <li>264</li>
                    </ul>
                </div>
                <div class="code">
                    <ul>
                        <li style="color: #636d83;">// - - - - - - - -</li>
                        <li style="color: #636d83;">// Slavko Djogic</li>
                        <li style="color: #636d83;">// - - - - - - - -</li>
                        <li>
                            <span style="color: #c678dd;">let</span> person
                            <span style="color: #56b6c2;">=</span> {</li>
                        <li>&nbsp;&nbsp;&nbsp;first_name
                            <span class="ch">:</span>&nbsp;&nbsp;
                            <span class="value">'Slavko'</span>,</li>
                        <li>&nbsp;&nbsp;&nbsp;last_name
                            <span class="ch">:</span>&nbsp;&nbsp;&nbsp;
                            <span class="value">'Djogic'</span>,</li>
                        <li>&nbsp;&nbsp;&nbsp;gender
                            <span class="ch">:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span class="value">'Male'</span>,</li>
                        <li>&nbsp;&nbsp;&nbsp;birth_year
                            <span class="ch">:</span>&nbsp;&nbsp;
                            <span class="value">'1998'</span>,</li>
                        <li>&nbsp;&nbsp;&nbsp;location
                            <span class="ch">:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                            <span class="value">'Kladari, Srbac'</span>,</li>
                        <li>&nbsp;&nbsp;&nbsp;number
                            <span class="ch">:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span class="value">'+(387)00000000'</span>
                        </li>
                        <li>};</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

* {
  padding: 0;
  margin: 0;
  outline: none;
  border: none;
  font-family: "Courier New", Courier, monospace;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html,
body {
  width: 100%;
  height: 100vh;
  display: -ms-grid;
  display: grid;
  justify-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: whitesmoke;
}

.container {
  -webkit-perspective: 10px;
  perspective: 10px;
}

.card {
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-transition: transform 0.5s;
  -moz-transition: transform 0.5s;
  -o-transition: transform 0.5s;
  background-color: #282c34;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 500px;
  cursor: pointer;
}

.card .toolbar {
  background-color: #21252b;
  border-radius: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 10px;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.card .toolbar span {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-right: 7px;
}

.card .toolbar span:first-child {
  background-color: #ff6058;
}

.card .toolbar span:nth-child(2) {
  background-color: #ffbd2e;
}

.card .toolbar span:last-child {
  background-color: #28ca41;
  margin-right: 0px;
}

.card .body {
  padding: 10px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 10fr;
  grid-template-columns: 1fr 10fr;
  grid-column-gap: 30px;
}

.card .body .line-number {
  border-right: 1px #636d83 solid;
}

.card .body .line-number ul {
  list-style: none;
}

.card .body .line-number ul li {
  color: #636d83;
  margin-bottom: 3px;
}

.card .body .line-number ul li:last-child {
  margin-bottom: 0px;
}

.card .body .code ul {
  list-style: none;
}

.card .body .code ul li {
  color: #bbbbbb;
  margin-bottom: 3px;
}

.card .body .code ul li:last-child {
  margin-bottom: 0px;
}

.card .body .code .value {
  color: #6ab979;
}

.card .body .code .ch {
  color: #56b6c2;
}

document.addEventListener("DOMContentLoaded", function() {
  const container = document.querySelector(".container");
  const inner = document.querySelector(".card");

  var mouse = {
    _x: 0,
    _y: 0,
    x: 0,
    y: 0,
    updatePosition: function(event) {
      var e = event || window.event;
      this.x = e.clientX - this._x;
      this.y = (e.clientY - this._y) * -1;
    },
    setOrigin: function(e) {
      this._x = e.offsetLeft + Math.floor(e.offsetWidth / 2);
      this._y = e.offsetTop + Math.floor(e.offsetHeight / 2);
    },
    show: function() {
      return "(" + this.x + ", " + this.y + ")";
    }
  };
  mouse.setOrigin(container);

  var counter = 0;
  var updateRate = 10;
  var isTimeToUpdate = function() {
    return counter++ % updateRate === 0;
  };

  var onMouseEnterHandler = function(event) {
    update(event);
  };

  var onMouseLeaveHandler = function() {
    inner.style = "";
  };

  var onMouseMoveHandler = function(event) {
    if (isTimeToUpdate()) {
      update(event);
    }
  };

  var update = function(event) {
    mouse.updatePosition(event);
    updateTransformStyle(
      (mouse.y / inner.offsetHeight / 2).toFixed(2),
      (mouse.x / inner.offsetWidth / 2).toFixed(2)
    );
  };

  var updateTransformStyle = function(x, y) {
    var style = "rotateX(" + x + "deg) rotateY(" + y + "deg)";
    inner.style.transform = style;
    inner.style.webkitTransform = style;
    inner.style.mozTransform = style;
    inner.style.msTransform = style;
    inner.style.oTransform = style;
  };

  container.onmouseenter = onMouseEnterHandler;
  container.onmouseleave = onMouseLeaveHandler;
  container.onmousemove = onMouseMoveHandler;
});