JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 24" width="24" height="24"><defs><style>.cls-1{fill:green}</style></defs><title>Bell (grey)</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M19.93,20.24l-1.72-2.86A8.52,8.52,0,0,1,17,13V10.5a7,7,0,1,0-14,0V13a8.5,8.5,0,0,1-1.2,4.37L.07,20.24a.52.52,0,0,0,0,.5A.52.52,0,0,0,.5,21h19a.5.5,0,0,0,.44-.26A.52.52,0,0,0,19.93,20.24ZM1.38,20l1.27-2.1A9.58,9.58,0,0,0,4,13V10.5a6,6,0,0,1,12,0V13a9.58,9.58,0,0,0,1.35,4.89L18.62,20Z"/><path class="cls-1" d="M10,0A2,2,0,0,0,8,2V4a.5.5,0,0,0,.5.5A.5.5,0,0,0,9,4V2a1,1,0,1,1,2,0V4a.51.51,0,0,0,1,0V2A2,2,0,0,0,10,0Z"/><path class="cls-1" d="M12.17,20.25a.5.5,0,0,0-.69-.18.5.5,0,0,0-.18.68,1.5,1.5,0,1,1-2.6,0,.49.49,0,0,0-.18-.68.5.5,0,0,0-.69.18A2.46,2.46,0,0,0,7.5,21.5a2.5,2.5,0,0,0,5,0A2.46,2.46,0,0,0,12.17,20.25Z"/><path class="cls-1" d="M17.81,18.11c.4.13-.07-.15-.2-.28a1.29,1.29,0,0,0-.35-.24,3.26,3.26,0,0,0-.08-1.37c-.14-.61-.34-1.2-.49-1.8A2.93,2.93,0,0,0,16,13.09a9.54,9.54,0,0,0,.37-1.9A6.45,6.45,0,0,0,11,4.13,10.34,10.34,0,0,0,11.28,2,1.2,1.2,0,0,0,8.89,2a10.34,10.34,0,0,1-.32,1.9l0,.21a6.84,6.84,0,0,0-1.88.59c-2.59,1.24-4.22,6.14-2.74,9A3.17,3.17,0,0,0,3.43,16a1.53,1.53,0,0,0-.51.29c-.24.2-.35.68-.44.85a3.37,3.37,0,0,1-1,.88,1.21,1.21,0,0,0,.61,2.23A21.3,21.3,0,0,0,6,20.13a19.73,19.73,0,0,1,2.85-.26l0,.22a2.58,2.58,0,0,0-.32.18,1.22,1.22,0,0,0-.24,1.88,2,2,0,0,0,1.29.79,1.19,1.19,0,0,0,1.21-.44,1.42,1.42,0,0,0,.74-1.44c0-.22-.09-.45-.15-.68.19,0,.37-.08.55-.12A19,19,0,0,1,15.44,20a2.28,2.28,0,0,0,.59-.11l.2,0a2.4,2.4,0,0,0,.93.55C18.63,20.93,19.26,18.61,17.81,18.11Z"/></g></g></svg>