JSFiddle - React, Tailwind, and code Playground

by codepo8

HTML

<h1><span class="win8"></span>Windows 8</h1>

CSS

h1 {
    line-height: 120px;
    font-size: 90px;
    font-weight:bold;
    font-family: arial;
    color: #004351;
    padding-left:190px;
    position:relative;
    width: 600px;
    height: 100px;
    -webkit-perspective:800px;
    -moz-perspective:800px;
    -ms-perspective:800px;
    -o-perspective:800px;
    perspective:800px;
    -webkit-perspective-origin: 0 0;
  }
  .win8 {
    -moz-transform: rotateY(-60deg);
    -webkit-transform: rotateY(-70deg);
    -ms-transform: rotateY(-70deg);
    -o-transform: rotateY(-70deg);
    transform: rotateY(-70deg);
    width:210px;
    height:90px;
    left:0;
    top: 15px;
    position: absolute;
    background: #004351;
  }
   img{visibility:visible}
  .win8:after {
    content:'';
    width:10px;
    position:absolute;
    background:#fff;
    left: 105px;
    height: 90px;
    top:0px;
  }
  .win8:before {
    content:'';
    height:6px;
    position:absolute;
    background:#fff;
    top: 42px;
    width: 210px;
    left:0;
  }