JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row no-gutters" id="m-r1">

<div class="col">
<div class="mimic-tile" id="m-r1-c0">
<div class="tile-layer water downstream">
<app-water-full><!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" id="svg4">
  <metadata id="metadata10">
    <rdf:rdf>
      <cc:work rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type>
        <dc:title></dc:title>
      </cc:work>
    </rdf:rdf>
  </metadata>
  <defs id="defs-water">
    <linearGradient id="stream-ds-us">
      <stop offset="5%" stop-color="#83AFE2"></stop>
      <stop offset="95%" stop-color="#2863a8"></stop>
    </linearGradient>
	<linearGradient id="ripple-ds-us">
      <stop offset="5%" stop-color="#5A95D8"></stop>
      <stop offset="95%" stop-color="#0054a6"></stop>
    </linearGradient>
  </defs>
  <rect width="100" height="100" id="water-base" x="0" y="0"></rect>
  <path d="m 100,1.6738281 c -0.193747,0.00276 -0.368843,0.00704 -0.626953,0.00586 -2.46841,2.276385 -6.625759,1.4682153 -10.027344,2.4570313 -1.69447,0.2341008 -4.08708,3.2353597 -1.625,3.1210937 5.901695,0.283667 0.217399,0.2832031 5.902344,0.2832031 C 96.797654,8.3141367 97.980584,8.0867076 100,7.8886719 Z M 1.09375,1.71875 C 0.67241524,1.7194589 0.34203754,1.7315121 0,1.7421875 V 7.703125 C 6.0164361,7.6271106 11.011624,7.3224702 17.414062,6.40625 L 26.984375,6.1230469 39.439453,5.2714844 C 43.629387,5.3857504 44.147282,2.859101 41.263672,2.625 30.204283,2.203517 21.314458,2.0641545 9.6660156,1.7734375 5.7799021,1.7839375 3.0342428,1.71536 1.09375,1.71875 Z M 82.304688,8.3417969 C 61.525331,8.1820608 37.884127,12.867255 23.984375,13.535156 9.1579739,14.247583 7.625297,11.008803...

CSS

.water {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 2px;
  
  background-color: blue;
  /* default - in case something goes wrong*/ }
  .water.downstream #water-base {
    fill: #83AFE2 !important; }
  .water.downstream #water-ripple {
    fill: #5A95D8 !important; }
  .water.upstream #water-base {
    fill: #2863a8 !important; }
  .water.upstream #water-ripple {
    fill: #0054a6 !important; }
  .water.downstream-upstream #water-base {
    fill: url(#stream-ds-us) !important; }
  .water.downstream-upstream #water-ripple {
    fill: url(#ripple-ds-us) !important; }
  .water.upstream-downstream #water-base {
    fill: #2863a8 !important; }
  .water.upstream-downstream #water-ripple {
    fill: #0054a6 !important; }