JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id=figure3d>3D TEXT</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Alfa+Slab+One);
:root{
  background-color: #00dbba;
  overflow:hidden;
  text-align:center;
}
#figure3d {
-webkit-transform: rotateX(65deg) scale(1) skew(10deg) translate3d(0px, 0px, 0px);
-webkit-transform-origin: center center;
-webkit-transform-style: preserve-3d;
font-size:8.6em;
  letter-spacing:10px;
  font-family: 'Alfa Slab One', cursive;
font-weight:900;
    color:white;
text-shadow: -1px 1px 0 #51B3A3, 
    -2px 2px 0 #51B3A3, 
    -2px 3px 0 #51B3A3, 
    -2px 5px 0 #51B3A3,
    -2px 7px 0 #51B3A3,
    -2px 8px 0 #51B3A3,
    -2px 10px 0 #51B3A3,
    -2px 11px 0 #51B3A3,
    -3px 13px 0 #51B3A3,
    -3px 14px 0 #51B3A3,
    -3px 16px 0 #51B3A3,
    -3px 17px 0 #51B3A3,
    -4px 19px 0 #51B3A3,
    -4px 20px 0 #51B3A3,
    -4px 22px 0 #51B3A3,
    -4px 23px 0 #51B3A3,
    -4px 25px 0 #51B3A3,
    -4px 26px 0 #51B3A3,
    -5px 28px 0 #51B3A3,
    -5px 29px 0 #51B3A3;
}