JSFiddle - React, Tailwind, and code Playground

by hydhaval

HTML

<div>
<svg height="24" viewBox="0 0 24 24" width="24" aria-busy="true" aria-valuemax="100" aria-valuemin="0" aria-valuetext="Loading..." role="progressbar" tabindex="0"><circle class="CometProgressRingIndeterminate__foregroundCircleptimized hqmy14yl CometProgressRingIndeterminate__hideOutline lzcic4wl CometProgressRingIndeterminate__rotationCircleAhead4 r7fvqmod ee40wjg4 s0nv7uk4 pf5603km" cx="12" cy="12" fill="none" r="11" stroke="var(--progress-ring-disabled-foreground)" stroke-dasharray="69.11503837897544" stroke-width="2"></circle><circle class="CometProgressRingIndeterminate__foregroundCircleptimized hqmy14yl CometProgressRingIndeterminate__hideOutline lzcic4wl CometProgressRingIndeterminate__rotationCircleAhead3 r7fvqmod ee40wjg4 srlwq3og pf5603km" cx="12" cy="12" fill="none" r="11" stroke="var(--progress-ring-disabled-foreground)" stroke-dasharray="69.11503837897544" stroke-width="2"></circle><circle class="CometProgressRingIndeterminate__foregroundCircleptimized hqmy14yl CometProgressRingIndeterminate__hideOutline lzcic4wl CometProgressRingIndeterminate__rotationCircleAhead2 r7fvqmod ee40wjg4 bodozcpl pf5603km" cx="12" cy="12" fill="none" r="11" stroke="var(--progress-ring-disabled-foreground)" stroke-dasharray="69.11503837897544" stroke-width="2"></circle><circle class="CometProgressRingIndeterminate__foregroundCircleptimized hqmy14yl CometProgressRingIndeterminate__hideOutline lzcic4wl CometProgressRingIndeterminate__rotationCircleAhead r7fvqmod ee40wjg4 jjfbaxhr pf5603km" cx="12" cy="12" fill="none" r="11" stroke="var(--progress-ring-disabled-foreground)" stroke-dasharray="69.11503837897544" stroke-width="2"></circle><circle class="CometProgressRingIndeterminate__foregroundCircleptimized hqmy14yl CometProgressRingIndeterminate__hideOutline lzcic4wl CometProgressRingIndeterminate__rotationCircleOptimized r7fvqmod ee40wjg4 jz64ell8 pf5603km" cx="12" cy="12" fill="none" r="11" stroke="var(--progress-ring-disabled-foreground)"...

CSS

--fds-active-icon: #3578E5;
--fds-attachment-footer-background: #F2F3F5;
--fds-black: #000000;
--fds-black-alpha-05: rgba(0, 0, 0, 0.05);
--fds-black-alpha-10: rgba(0, 0, 0, 0.1);
--fds-black-alpha-15: rgba(0, 0, 0, 0.15);
--fds-black-alpha-20: rgba(0, 0, 0, 0.2);
--fds-black-alpha-30: rgba(0, 0, 0, 0.3);
--fds-black-alpha-40: rgba(0, 0, 0, 0.4);
--fds-black-alpha-50: rgba(0, 0, 0, 0.5);
--fds-black-alpha-60: rgba(0, 0, 0, 0.6);
--fds-black-alpha-80: rgba(0, 0, 0, 0.8);
--fds-blue-05: #ECF3FF;
--fds-blue-30: #AAC9FF;
--fds-blue-40: #77A7FF;
--fds-blue-60: #1877F2;
--fds-blue-70: #2851A3;
--fds-blue-80: #1D3C78;
--fds-blue-95: #E7F3FF;
--fds-blue-badge: #1877F2;
--fds-blue-link: #1877F2;
--fds-button-icon: #444950;
--fds-button-text: #444950;
--fds-comment-background: #F2F3F5;
--fds-dark-mode-gray-35: #CCCCCC;
--fds-dark-mode-gray-50: #828282;
--fds-dark-mode-gray-70: #4A4A4A;
--fds-dark-mode-gray-80: #373737;
--fds-dark-mode-gray-90: #282828;
--fds-dark-mode-gray-100: #1C1C1C;
--fds-dark-ui-card-border: #282828;
--fds-dark-ui-cards: #1C1C1C;
--fds-dark-ui-disabled-icon: #373737;
--fds-dark-ui-divider: #282828;
--fds-dark-ui-medium-text: #828282;
--fds-dark-ui-nav-bar: #1C1C1C;
--fds-dark-ui-primary-icon: #828282;
--fds-dark-ui-primary-text: #CCCCCC;
--fds-dark-ui-secondary-icon: #4A4A4A;
--fds-dark-ui-secondary-text: #4A4A4A;
--fds-dark-ui-tab-bar: #1C1C1C;
--fds-dark-ui-wash: #000000;
--fds-data-mango: #f5bb41;
--fds-disabled-icon: #BEC3C9;
--fds-disabled-text: #BEC3C9;
--fds-divider-on-wash: #CCD0D5;
--fds-divider-on-white: #DADDE1;
--fds-fast: 200ms;
--fds-fb-blue-70: #4267B2;
--fds-fb-blue-75: #385898;
--fds-gray-00: #F5F6F7;
--fds-gray-05: #F2F3F5;
--fds-gray-10: #EBEDF0;
--fds-gray-20: #DADDE1;
--fds-gray-25: #CCD0D5;
--fds-gray-30: #BEC3C9;
--fds-gray-45: #8D949E;
--fds-gray-70: #606770;
--fds-gray-80: #444950;
--fds-gray-90: #303338;
--fds-gray-100: #1C1E21;
--fds-green-30: #86DF81;
--fds-green-55: #00A400;
--fds-green-60: #008C00;
--fds-green-70:...