JSFiddle - React, Tailwind, and code Playground
by vals
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: 200px;
left: 300px;
margin-top:-150px;
line-height:236px;
font-size:225pt;
font-weight:bold;
font-family:'Carrois Gothic SC', sans-serif;
background-image:
linear-gradient(187deg,#FFBF7F,#FFBF7F),
linear-gradient(184deg,#F38844 30%, #F4A668 50%),
linear-gradient(185deg,#E95E3F 30%,#F38669 50%),
linear-gradient(184deg,#8A7668 33%,#AF9F88 38%),
linear-gradient(187deg,#af9678,#cfb698),
linear-gradient(187deg,#dcc2a1,#ecd2b1);
background-position:
0px 0px, 0px 9%, 0px 20%, 0px 30%, 0px 60%, 0px 100%;
background-size: 200px 9.7%, 200px 11%, 200px 10%, 200px 30%, 200px 30%, 200px 30%, 200px 40%;
background-repeat: no-repeat;
color: transparent;
-webkit-background-clip: text;
}
.B:before {
content:'';
position:absolute;
left: -235px;
height:135px;
width: 258px;
background-image: linear-gradient(180deg, rgba(76%, 39%, 35%,.5) 16.77%, rgba(94%, 48%, 23%,.5) 17%, rgba(94%, 48%, 23%,.5) 34%, rgba(88%, 31%, 20%,.5) 35%, rgba(88%, 31%, 20%,.5) 50%, rgba(36%, 34%, 35%,.5) 51%, rgba(36%, 34%, 35%,.5) 67%, rgba(45%, 40%, 35%,.5) 68%, rgba(45%, 40%, 35%,.5) 84%,rgba(62%, 54%, 45%,.5) 84%), /* Vertical bar next to the letter */
linear-gradient(187deg,#A18D74 23px,#B8A28A 26px), /* second small bar in last big bar */
radial-gradient(circle at bottom right, #B8A28A 22px, transparent 22px),
linear-gradient(188deg,#87766C 22px,#A4978E 24px), /* first small bar in last big bar */
radial-gradient(circle at bottom right, #A4978E 22px, transparent 22px),
linear-gradient(200deg,rgba(0, 0, 0, 1) -21px,transparent 27px), /* shadow */
radial-gradient(circle at top right,#D1B69B 44px, transparent 30px), /* last big bar */
linear-gradient(0deg,#D1B69B,#D1B69B),
linear-gradient(187deg,#6D6864 18px, #898481 21px), /*...