JSFiddle - React, Tailwind, and code Playground

by Rishi Kumar

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 40 47"> <g fill="none" fill-rule="nonzero" opacity=".75"> <path fill="#678DA9" d="M20 47l20-11.69V12L20 23.651z"/> <path fill="#739DBC" d="M0 35.318L20 47V23.659L0 12z"/> <path fill="#7EACCD" d="M39 11.984L19.504 0 0 11.984 19.504 24z"/> </g></svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0 0 30 30"> <defs> <path id="a" d="M13.912 3.463L8.088.197a1.549 1.549 0 0 0-1.51 0L.755 3.463A1.46 1.46 0 0 0 0 4.733v6.533c0 .525.288 1.009.755 1.271l5.823 3.266a1.548 1.548 0 0 0 1.51 0l5.824-3.266a1.46 1.46 0 0 0 .755-1.27V4.733a1.46 1.46 0 0 0-.755-1.271"/> </defs> <g fill="none" fill-rule="evenodd"> <mask id="b" fill="#fff"> <use xlink:href="#a"/> </mask> <g fill-rule="nonzero" mask="url(#b)"> <path fill="#678DA9" d="M7.23 17.274l7.238-4.302V4.393L7.23 8.681z"/> <path fill="#739DBC" d="M0 12.972l7.233 4.296V8.684L0 4.396z"/> <path fill="#7EACCD" d="M14.455 4.387L7.233.108.008 4.388l7.225 4.29z"/> </g> </g></svg>