JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js"></script>
<div class="container">
  
  <div data-tilt></div>
</div>

CSS

.container {
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container div {
  width: 300px;
  height: 300px;
  background: red;
}

JavaScript

VanillaTilt.init(document.querySelector('[data-tilt]'), {
          reverse:                true,
          max:                    25,
          perspective:            700,
          scale:                  1.2,
          speed:                  300,
          transition:             true,
          reset:                  true,
          glare:                  false,
          "max-glare":            0.5,
          "full-page-listening":  true,

        });