JSFiddle - React, Tailwind, and code Playground
by madvofirst
HTML
<?xml version="1.0" encoding="UTF-8"?>
<svg width="178px" height="178px" viewBox="0 0 178 178" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>Group 5</title>
<desc>Created with Sketch.</desc>
<defs>
<polygon id="path-1" points="60 14.0056192 91.8198052 27.185814 105 59.0056192 91.8198052 90.8254243 60 104.005619 28.1801948 90.8254243 15 59.0056192 28.1801948 27.185814"></polygon>
<filter x="-81.7%" y="-78.3%" width="263.3%" height="263.3%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feOffset dx="0" dy="3" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
<feGaussianBlur stdDeviation="24" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
</feMerge>
</filter>
<path d="M49.4812866,70.0157357 L54.614892,68.3045339 C54.9563722,68.1907072 55.3291694,68.2179643 55.6504616,68.3802498 C57.0511393,69.0877353 58.599125,69.4543635 60.1713315,69.4502677 C64.0056559,69.448784 67.5101928,67.2815045 69.2269351,63.8465607 C69.9344207,62.445883 70.3010489,60.8978974 70.2969575,59.3286883 L70.2990027,58.7245279 C70.0154704,53.5852036 65.9118187,49.4815519...
CSS
svg {
fill: blue;
}