JSFiddle - React, Tailwind, and code Playground

HTML

<link href='http://fonts.googleapis.com/css?family=Carrois+Gothic+SC' rel='stylesheet' type='text/css'>
<div class='B'>B</div>

CSS

body { background:#FFF8E6; }
.B {
  position:absolute;
  top:50%; left:50%;
  margin-top:-150px;
  line-height:236px;
  font-size:225pt;
  font-weight:bold;
  font-family:'Carrois Gothic SC', sans-serif;
  background-image:-webkit-gradient(linear, left top, left bottom, color-stop(9%,#FFBF7F), color-stop(9%,#F4A668), color-stop(19.6%,#F4A668), color-stop(19.9%,#F38669), color-stop(28.7%,#F38669), color-stop(29%,#AF9F88), color-stop(49%,#AF9F88), color-stop(49%,#cfb698), color-stop(70%,#cfb698), color-stop(70%,#ecd2b1));
  color:transparent;
  -webkit-background-clip: text;
}
.B:after {
  content:'';
  z-index:-1;
  position:absolute;
  left:-387px;
  height:45px; width:150px;
  border-radius: 0px 0px 0px 50px;
  box-shadow: 
    180px -12px 0 -9pt #FFBF7F,
    220px -12px 0 -9pt #FFBF7F,
    276px -12px 0 -9pt #FFBF7F,
    
    215px 11px 0 -8pt #F4A668,
    220px 11px 0 -8pt #F4A668,
    275px 11px 0 -8pt #F4A668,
    
    255px 33px 0 -8pt #F38669,
    275px 33px 0 -8pt #F38669,
    
    255px 56px 0 -9pt #898481,
    276px 56px 0 -9pt #898481,
    
    /* I DON'T KNOW HOW TO FLIP THESE WITHOUT ADDING AN ELEMENT */
    275px 78px 0 -8pt #A4978E,
    
    300px 101px 0 -8pt #B8A28A,
    /************************************************************/
    190px 45px 0 0px #CCBCAC,
    
    230px 90px 0 0px #CABBA8,
    
    150px 0 0 0px #FCCDA1;
    
}