JSFiddle - React, Tailwind, and code Playground

by Andrey Izman

HTML

<div data-color-mode="dark">

<div class="profile-color-modes js-promo-color-modes-banner-profile isInitialToggle" >


<svg aria-hidden="true" width="106" height="60" viewBox="0 0 106 60" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
    <g class="profile-color-modes-illu-group profile-color-modes-illu-red">
      <path d="M37.5 58.5V57.5C37.5 49.768 43.768 43.5 51.5 43.5V43.5C59.232 43.5 65.5 49.768 65.5 57.5V58.5"></path>
    </g>
    <g class="profile-color-modes-illu-group profile-color-modes-illu-orange">
      <path d="M104.07 58.5C103.401 55.092 97.7635 54.3869 95.5375 57.489C97.4039 54.6411 99.7685 48.8845 94.6889 46.6592C89.4817 44.378 86.1428 50.1604 85.3786 54.1158C85.9519 50.4768 83.7226 43.294 78.219 44.6737C72.7154 46.0534 72.7793 51.3754 74.4992 55.489C74.169 54.7601 72.4917 53.3567 70.5 52.8196"></path>
    </g>
    <g class="profile-color-modes-illu-group profile-color-modes-illu-purple">
      <path d="M5.51109 58.5V52.5C5.51109 41.4543 14.4654 32.5 25.5111 32.5C31.4845 32.5 36.8464 35.1188 40.5111 39.2709C40.7212 39.5089 40.9258 39.7521 41.1245 40"></path>
      <path d="M27.511 49.5C29.6777 49.5 28.911 49.5 32.511 49.5"></path>
      <path d="M27.511 56.5C29.6776 56.5 26.911 56.5 30.511 56.5"></path>
    </g>
    <g class="profile-color-modes-illu-group profile-color-modes-illu-green">
      <circle cx="5.5" cy="12.5" r="4"></circle>
      <circle cx="18.5" cy="5.5" r="4"></circle>
      <path d="M18.5 9.5L18.5 27.5"></path>
      <path d="M18.5 23.5C6 23.5 5.5 23.6064 5.5 16.5"></path>
    </g>
    <g class="profile-color-modes-illu-group profile-color-modes-illu-blue">
      <g class="profile-color-modes-illu-frame">
        <path d="M40.6983 31.5C40.5387 29.6246 40.6456 28.0199 41.1762 27.2317C42.9939 24.5312 49.7417 26.6027 52.5428 30.2409C54.2551 29.8552 56.0796 29.6619 57.9731 29.6619C59.8169 29.6619 61.5953 29.8452 63.2682 30.211C66.0833 26.5913 72.799 24.5386 74.6117...

CSS

[data-color-mode="light"] {
  --color-bg: #0d1117;
  --color-scale-black: #1b1f23;
  --color-scale-white: #fff;
  --color-scale-gray-0: #fafbfc;
  --color-scale-gray-1: #f6f8fa;
  --color-scale-gray-2: #e1e4e8;
  --color-scale-gray-3: #d1d5da;
  --color-scale-gray-4: #959da5;
  --color-scale-gray-5: #6a737d;
  --color-scale-gray-6: #586069;
  --color-scale-gray-7: #444d56;
  --color-scale-gray-8: #2f363d;
  --color-scale-gray-9: #24292e;
  --color-scale-blue-0: #f1f8ff;
  --color-scale-blue-1: #dbedff;
  --color-scale-blue-2: #c8e1ff;
  --color-scale-blue-3: #79b8ff;
  --color-scale-blue-4: #2188ff;
  --color-scale-blue-5: #0366d6;
  --color-scale-blue-6: #005cc5;
  --color-scale-blue-7: #044289;
  --color-scale-blue-8: #032f62;
  --color-scale-blue-9: #05264c;
  --color-scale-green-0: #f0fff4;
  --color-scale-green-1: #dcffe4;
  --color-scale-green-2: #bef5cb;
  --color-scale-green-3: #85e89d;
  --color-scale-green-4: #34d058;
  --color-scale-green-5: #28a745;
  --color-scale-green-6: #22863a;
  --color-scale-green-7: #176f2c;
  --color-scale-green-8: #165c26;
  --color-scale-green-9: #144620;
  --color-scale-yellow-0: #fffdef;
  --color-scale-yellow-1: #fffbdd;
  --color-scale-yellow-2: #fff5b1;
  --color-scale-yellow-3: #ffea7f;
  --color-scale-yellow-4: #ffdf5d;
  --color-scale-yellow-5: #ffd33d;
  --color-scale-yellow-6: #f9c513;
  --color-scale-yellow-7: #dbab09;
  --color-scale-yellow-8: #b08800;
  --color-scale-yellow-9: #735c0f;
  --color-scale-orange-0: #fff8f2;
  --color-scale-orange-1: #ffebda;
  --color-scale-orange-2: #ffd1ac;
  --color-scale-orange-3: #ffab70;
  --color-scale-orange-4: #fb8532;
  --color-scale-orange-5: #f66a0a;
  --color-scale-orange-6: #e36209;
  --color-scale-orange-7: #d15704;
  --color-scale-orange-8: #c24e00;
  --color-scale-orange-9: #a04100;
  --color-scale-red-0: #ffeef0;
  --color-scale-red-1: #ffdce0;
  --color-scale-red-2: #fdaeb7;
  --color-scale-red-3: #f97583;
  --color-scale-red-4: #ea4a5a;
  --color-scale-red-5:...