JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<head>
    <link href='http://fonts.googleapis.com/css?family=Medula+One' rel='stylesheet' type='text/css'>
</head>

<div class="container">
    <h2 class="threedeetext">Sass Rocks!</h2>
</div>

SCSS

.container{
    width: 600px;
height: 200px;
border: 1px solid #CCC;
margin: 0 auto 60px;
position: relative;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
}
h2 {
  text-transform: uppercase;
  font-size: 160px;
    font-family: 'Medula One', cursive;
    text-transform: none;
    font-weight: 400;
  margin: 20px 50px;
  float: left;

}

//Sass Magic
@mixin threedee($color) {
  color: $color; //Sets the text to the passed in color
  text-shadow:   //Uses shadows to create a 3D illusion
    0 2px 0 darken($color, 14%),
    0 4px 0 darken($color, 16%),
    0 6px 0 darken($color, 18%), //Increase percentages to darken shadows
    0 8px 0 darken($color, 20%),
    3px 8px 15px rgba(0,0,0,0.1),
    3px 8px 5px rgba(0,0,0,0.3);
}

.threedeetext {
    -webkit-transform:rotateY(45deg);
    -webkit-transform: rotateY( 41deg );
-moz-transform: rotateY( 45deg );
-o-transform: rotateY( 45deg );
transform: rotateY( 37deg );
  @include threedee(yellow); //Change only this color and apply the class in your HTML
}

//For more information about Sass, visit sass-lang.com/