JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<svg class="yellow_folder" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 470 369" style="enable-background:new 0 0 470 369;" xml:space="preserve">

<defs><g id="folder">
<linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="235.046" y1="57.8958" x2="235.046" y2="358.6761">
  <stop offset="0" />
  <stop offset="1" />
</linearGradient>
	 
<path class="st0" d="M186,8.4V8.2c0-4.4-3.5-7.9-7.9-7.9H37.7c-11.5,0-20.6,9.7-19.9,21.2l17.3,264.1c0.7,10.5,9.4,18.6,19.9,18.6 H415c10.5,0,19.2-8.1,19.9-18.6l16.3-248.1c0.8-11.5-8.4-21.2-19.9-21.2H193.9C189.5,16.3,186,12.8,186,8.4z"/>
	
<path class="st1" d="M186,11.6v-0.2c0-4.4-3.5-7.9-7.9-7.9H37.7c-11.5,0-20.6,9.7-19.9,21.2l17.3,264.1c0.7,10.5,9.4,18.6,19.9,18.6 H415c10.5,0,19.2-8.1,19.9-18.6l16.3-248.1c0.8-11.5-8.4-21.2-19.9-21.2H193.9C189.5,19.5,186,16,186,11.6z"/>
	
<path class="st2" d="M21.5,37.8h427c11.5,0,20.6,9.7,19.9,21.2l-18.8,286.6c-0.7,10.5-9.4,18.6-19.9,18.6H40.4 c-10.5,0-19.2-8.1-19.9-18.6L1.7,59.1C0.9,47.6,10,37.8,21.5,37.8z"/>

<path class="st3" d="M21.5,41.1h427c11.5,0,20.6,9.7,19.9,21.2l-18.8,286.6c-0.7,10.5-9.4,18.6-19.9,18.6H40.4 c-10.5,0-19.2-8.1-19.9-18.6L1.7,62.3C0.9,50.8,10,41.1,21.5,41.1z"/>
</g></defs>
	
<use xlink:href="#folder"/>
</svg>


<svg class="yellow_folder" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 470 369" style="enable-background:new 0 0 470 369;" xml:space="preserve">	
<use xlink:href="#folder"/>
</svg>

CSS

.yellow_folder {width:82px;}
.yellow_folder #gradient stop:nth-child(1) {stop-color: #FCF26A;}
.yellow_folder #gradient stop:nth-child(2) {stop-color: #FBB03B;}

.yellow_folder .st0{fill:#FBB03B;}
.yellow_folder .st1{fill:url(#gradient);}
.yellow_folder .st2{fill:#F99819;}
.yellow_folder .st3{fill:url(#gradient);}