JSFiddle - React, Tailwind, and code Playground
by swarups
HTML
<svg width="70" height="70" viewBox="0 0 70 70">
<g fill="#fff">
<path d="M20.7 0L46.1 0C48.4 0 50.1 2.3 50.1 4.7L50.1 22.3C50.1 24.6 48.4 26.4 46.1 26.4L40.9 26.4 40.9 34.6 34 26.4 20.7 26.4C18.4 26.4 16.7 24.6 16.7 22.3L16.7 4.7C16.7 2.3 18.4 0 20.7 0" fill="#8FB9EB"/>
<path d="M14.9 18.6L14.9 23.9C14.9 25.2 16.2 27 17.4 27L18.3 27 18.3 30.1C18.3 31.4 17 32.3 15.7 32.3L8.9 32.3 5.1 36.3 5.1 32.3 2.9 32.3C1.7 32.3 0.4 31.4 0.4 30.1L0.4 20.8C0.4 19.5 1.7 18.6 2.9 18.6L14.9 18.6Z" fill="#CCC"/>
<path d="M45.9 14.9L21.4 14.9C20.7 14.9 20.3 14.4 20.3 13.9 20.3 13.2 20.7 12.9 21.4 12.9L45.9 12.9C46.5 12.9 47 13.2 47 13.9 47 14.4 46.5 14.9 45.9 14.9"/>
<path d="M21.8 10C21.1 10 20.7 9.5 20.7 9 20.7 8.3 21.1 8 21.8 8L33.7 8C34.4 8 34.8 8.3 34.8 9 34.8 9.5 34.4 10 33.7 10L21.8 10Z"/>
<path d="M45.9 19L21.4 19C20.7 19 20.3 18.5 20.3 18 20.3 17.4 20.7 16.9 21.4 16.9L45.9 16.9C46.5 16.9 47 17.4 47 18 47 18.5 46.5 19 45.9 19"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 70 70">
<g fill="none">
<circle cx="35" cy="35" r="35" fill="#FFF"/>
<path fill="#8FB9EB" d="M30.2529263,17.5 L55.622723,17.5 C57.9282222,17.5 59.6590914,19.8416792 59.6590914,22.1857213 L59.6590914,39.7589485 C59.6590914,42.1006276 57.9282222,43.8562963 55.622723,43.8562963 L50.4347682,43.8562963 L50.4347682,52.0580808 L43.5159443,43.8562963 L30.2529263,43.8562963 C27.9474271,43.8562963 26.2165579,42.1006276 26.2165579,39.7589485 L26.2165579,22.1857213 C26.2165579,19.8416792 27.9474271,17.5 30.2529263,17.5"/>
<path fill="#CCC" d="M24.4226779,36.1183778 L24.4226779,41.4132602 C24.4226779,42.7369808 25.7007721,44.5019416 26.9805935,44.5019416 L27.8355349,44.5019416 L27.8355349,47.590623 C27.8355349,48.9143436 26.5539863,49.796824 25.2758922,49.796824 L18.4484511,49.796824 L14.6089871,53.7679858 L14.6089871,49.796824 L12.4759515,49.796824 C11.1961302,49.796824 9.91630881,48.9143436 9.91630881,47.590623 L9.91630881,38.3245788...