JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="wrap">
  <div class="body">
    <div class="text -left" data-js="text">
      Nixie
    </div>
    <div class="text -right" data-js="text">
      Core
    </div>
    <div class="bg" data-js="bg"></div>
  </div>
</div>

CSS

.wrap {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 0 100px;
  perspective: 1000px;
}

.body {
  transform: rotateY(-25deg);
  height: 100%;
  width: 100%;
  perspective: 1000px;
}

.text {
  white-space: nowrap;
  font-size: 30px;
  color: #fff;
  position: absolute;
  color: #000;
  user-select: none;
  transform: rotateY(35deg) rotateY(10deg);
}

.text.-inner {
  color: #fff;
}

.text.-left {
  left: -40px;
  top: 40px;
}

.text.-right {
  right: -40px;
  bottom: 40px;
}

.bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f00;
  overflow: hidden;
  perspective: 1000px;
  z-index: 100;
}

JavaScript

const $text = document.querySelectorAll('[data-js="text"]');
const $bg = document.querySelector('[data-js="bg"]');

[...$text].map($text => {
  const $innerText = $text.cloneNode();
  $innerText.innerHTML = $text.innerHTML;
  $innerText.classList.add('-inner');


	$bg.appendChild($innerText);
});