JSFiddle - React, Tailwind, and code Playground

by borisjavier

HTML

<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  <link rel="stylesheet" href="https://pattern.kivan-works.com/fonts/kredit.css">
</head>

<body class="active">
  <div class="floating">
    <div class="thickness"></div>
    <div class="thickness"></div>
    <div class="thickness"></div>
    <div class="card_body">     
      <div class="logo">
      <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 595.28 841.89" style="enable-background:new 0 0 595.28 841.89;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#D7A928;}
	.st1{fill:#FFFFFF;}
	.st2{fill:#C38C12;}
</style>
<path class="st0" d="M148.7,497.8l-11.5-47.75c-5.73-23.81-4.13-48.79,4.6-71.67l18.37-48.14c6.44-16.87,19.02-30.8,35.36-39.16
	l50.3-25.72c15.32-7.83,32.97-10.26,49.96-6.87l71.77,14.32c21.54,4.3,40.12,17.55,50.87,36.27l34.6,60.26
	c7.92,13.79,11.08,29.68,9.02,45.32l-8.11,61.5c-2.33,17.65-11.16,33.84-24.85,45.56l-44.77,41.68
	c-13.67,11.71-39.19,21.6-57.43,21.59l-66.3-0.04c-17.19-0.01-33.89-5.76-47.31-16.28L175,538.67c-12.98-10.18-22.16-24.24-26.11-40
	"/>
<path class="st1"...

CSS

* {
  background-repeat: no-repeat;
}

html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  display: flex;
  background: linear-gradient(125deg, #fbd7e5, #bdf4fa);
}

.card_body {
  padding: 0.75rem 1.75rem;
}
.active .floating:before {
  opacity: 1;
  transition: 500ms;
}
.floating:before {
  font-family: "Quicksand";
  font-weight: bold;
  content: "Keep Moving Your Mouse!";
  width: 100%;
  text-align: center;
  font-size: 2rem;
  position: absolute;
  top: -70px;
  opacity: 0;
  transition: 300ms;
  background: -webkit-linear-gradient(145deg, #4684c1, #343174);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.floating {
  font-family: Inconsolata; 
  margin: auto; 
  width: 453px;
  height: 280px;
  box-shadow: -20px 14px 54px rgba(0, 0, 0, 0.55);
  font-size: 18px;
  border-radius: 8px;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  background: linear-gradient(145deg, #4684c1, #343174);
  transform: rotateX(17deg) rotateY(18deg);
}

.logo {
  height: 60px;
  transform: translateZ(30px);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  margin: 0;
  font-weight: normal;
  filter: drop-shadow(-6.4px 6.2px 8px rgba(0, 0, 0, 0.6));
  z-index: 20;
}

.chips {
  margin-top: 17px;
  margin-left: -1px;
  height: 70px;
  width: 80px;
  filter: drop-shadow(-6.4px 6.2px 8px rgba(0, 0, 0, 0.6));
  transform: translateZ(25px);
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='50px' x='0px' y='0px' viewBox='0 0 40 40' style='enable-background:new 0 0 40 40;' xml:space='preserve'%3E%3Cg id='surface1'%3E%3Cpath fill='%23F5CE85' d='M8.9,34.5c-6.4,0.1-6.4,0.1-6.4-6.4V11.9c0-3.5-0.1-6.4,3.4-6.4h25.3c6.4,0,6.4,0,6.4,6.4v16.3 c0,6.4,0,6.4-6.4,6.4L8.9,34.5z'/%3E%3Cpath fill='%23967A44'...

JavaScript

document.addEventListener('mousemove', function(event){
  let card_x = getTransformValue(event.clientX,window.innerWidth,56);
  let card_y = getTransformValue(event.clientY,window.innerHeight,56);
  let shadow_x = getTransformValue(event.clientX,window.innerWidth,20);
  let shadow_y = getTransformValue(event.clientY,window.innerHeight,20);
  let text_shadow_x = getTransformValue(event.clientX,window.innerWidth,28);
  let text_shadow_y = getTransformValue(event.clientY,window.innerHeight,28);
  $(".floating").css("transform","rotateX("+card_y/1+"deg) rotateY("+card_x+"deg)");
  $(".floating").css("box-shadow",-card_x+"px "+card_y/1+"px 55px rgba(0, 0, 0, .55)");
  $(".svg").css("filter","drop-shadow("+-shadow_x+"px "+shadow_y/1+"px 4px rgba(0, 0, 0, .6))");
  $(".text").css("text-shadow",-text_shadow_x+"px "+text_shadow_y/1+"px 6px rgba(0, 0, 0, .8)");
});
function getTransformValue(v1,v2,value){
  return ((v1/v2*value-value/2)*1).toFixed(1);                        
}
$(function(){
  setTimeout(function(){
    $("body").removeClass("active");
  }, 2200);
});