JSFiddle - React, Tailwind, and code Playground

by dru_zod

HTML

<svg xmlns="http://www.w3.org/2000/svg" 
     viewBox="0 0 100 100" style="border: solid 1px green"
     preserveAspectRatio="xMaxYMin">
  
  <text x="1" y="37" 
        font-family="Verdana" 
        font-size="4"
        fill="#2583C8">
    Conservative and Unionist Party
  </text>

  <rect width="65" height="10" x="0" y="0" fill="#7DB64F" />
  <rect width="64" height="10" x="0" y="10" fill="#E52D39" />
  <rect width="74" height="10" x="0" y="20" fill="#FFC643" />
  <rect width="51" height="10" x="0" y="30" fill="#2583C8" />
  
  <text x="1" y="7" 
        font-family="Verdana" 
        font-size="4"
        fill="#ffffff">
    Green Party
  </text>  
  <text x="1" y="17" 
        font-family="Verdana" 
        font-size="4"
        fill="#ffffff">
    Labour Party
  </text>  
  <text x="1" y="27" 
        font-family="Verdana" 
        font-size="4"
        fill="#333333">
    Liberal Democrats
  </text> 
  <clipPath id="myClip">
    <text x="1" y="37" 
          font-family="Verdana" 
          font-size="4">
      Conservative and Unionist Party
    </text>
  </clipPath>
  <rect width="51" height="10" x="0" y="30" clip-path="url(#myClip)" fill="#ffffff" />
</svg>