JSFiddle - React, Tailwind, and code Playground

by kapantzak

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect -->

<svg viewBox="0 0 100 230" xmlns="http://www.w3.org/2000/svg">
  
  <g>
    <rect class="pv-item" x="0" y="0" width="100" height="5" rx="1" ry="1" />
    <text x="2" y="3.5" font-size="3" font-family="sans-serif" fill="#fff">Title</text>
  </g>
  <g>
    <rect class="pv-item" x="0" y="6" width="100" height="5" rx="1" ry="1" />
    <text x="2" y="9.5" font-size="3" font-family="sans-serif" fill="#fff">Status</text>
  </g>
  <g>
    <rect class="pv-item" x="0" y="12" width="49" height="5" rx="1" ry="1" />
    <text x="2" y="15.5" font-size="3" font-family="sans-serif" fill="#fff">Instructions</text>
  </g>
  <g>
    <rect class="pv-item" x="51" y="12" width="49" height="5" rx="1" ry="1" />
    <text x="53" y="15.5" font-size="3" font-family="sans-serif" fill="#fff">Legend</text>
  </g>
  <g>
    <rect class="pv-wrapper" x="0" y="19" width="100" height="13" rx="1" ry="1" />
    <text x="2" y="22.5" font-size="3" font-family="sans-serif" fill="#555">Total header</text>
    <g>
      <rect class="pv-item" x="2" y="25" width="30" height="5" rx="1" ry="1" />
      <text x="4" y="28.5" font-size="3" font-family="sans-serif" fill="#fff">General</text>
    </g>
    <g>
      <rect class="pv-item" x="68" y="25" width="30" height="5" rx="1" ry="1" />
      <text x="70" y="28.5" font-size="3" font-family="sans-serif" fill="#fff">Score info</text>
    </g>
  </g>
  
  <g>
    <rect class="pv-wrapper" x="0" y="34" width="100" height="51" rx="1" ry="1" />
    <text x="2" y="37.5" font-size="3" font-family="sans-serif" fill="#555">Criterion</text>
    <g>
      <rect class="pv-item" x="2" y="39" width="96" height="5" rx="1" ry="1" />
      <text x="4" y="42.5" font-size="3" font-family="sans-serif" fill="#fff">Criterion header</text>
    </g>
    <g>
      <rect class="pv-wrapper" x="2" y="46" width="96" height="37" rx="1" ry="1" />
      <text x="4" y="49.5" font-size="3"...

CSS

.pv-item {
  fill:#3498db;
}
.pv-wrapper {
  fill:#fafafa;
  stroke-width:0.5;
  stroke:#f0ad4e;
}