JSFiddle - React, Tailwind, and code Playground

by Mike Gifford

HTML

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 648 319" style="enable-background:new 0 0 648 319;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#0F0FDB;}
    .st1{fill:#66CC33;}
    .st2{font-family:'DINCondensed-Bold';}
    .st3{font-size:35px;}
    .st4{fill:#FFFFFF;}
    .st5{font-size:32px;}
</style>
<title>WHAT IS THIS GRAPHIC ABOUT</title>
<desc>WHAT MROE CONTEXT IS REQUIRED</desc>
<g id="home_quote">
    <polygon id="Fill-1" class="st0" points="0,0 0,319 89,319 89,285 39.7,285 39.7,34 89,34 89,0     "/>
    <polygon id="Fill-2" class="st0" points="559,0 559,34 608.3,34 608.3,285 559,285 559,319 648,319 648,0     "/>
    <text transform="matrix(1 0 0 1 74 69)" class="st1 st2 st3">EXAMPLE A</text>
    <text transform="matrix(1 0 0 1 368.105 69)" class="st4 st2 st3">EXAMPLE B</text>
    <text transform="matrix(1 0 0 1 74 114)" class="st4 st2 st3">EXAMPLE C</text>
    <text transform="matrix(1 0 0 1 74 159)" class="st4 st2 st3">EXAMPLE D</text>
    <text transform="matrix(1 0 0 1 196.17 159)" class="st1 st2 st3">EXAMPLE E</text>
    <text transform="matrix(1 0 0 1 265.03 159)" class="st4 st2 st3">EXAMPLE F </text>
    <text transform="matrix(1 0 0 1 378.795 159)" class="st1 st2 st3">EXAMPLE G </text>
    <text transform="matrix(1 0 0 1 74 204)" class="st4 st2 st3">EXAMPLE H</text>
    <text transform="matrix(1 0 0 1 275.53 204)" class="st1 st2 st3">EXAMPLE I </text>
    <text transform="matrix(1 0 0 1 74 249)" class="st1 st2 st3">EXAMPLE J</text>
    <text transform="matrix(1 0 0 1 355.31 249)" class="st4 st2 st3">EXAMPLE K.</text>
    <text transform="matrix(1 0 0 1 111 305)" class="st4 st2 st5">EXAMPLE L</text>
</g>
</svg>