JSFiddle - React, Tailwind, and code Playground

by AlexandrAbakumov

HTML

<svg width="26" height="26" class="svg-tab-triangle" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <polygon class="tab-triangle " points="26,0 0,26 26,26" />
      <defs>
        <linearGradient id="gradient-active" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop stop-color="#c8d7dc" />
          <stop stop-color="#eeeeee" offset="60%" />
        </linearGradient>
  </defs>
</svg>

CSS

.tab-triangle.active {
    fill: url(#gradient-active);
  }

  .tab-triangle {
    fill: #4a859b;
  }