JSFiddle - React, Tailwind, and code Playground

by Shaojiang Cai

HTML

<svg className={styles.youVsCohort}> 
  <text x="83" y="115">2</text>
  <text x="163" y="35">48</text>
  <text x="6" y="75">AVG</text>
  <text x="220" y="75">42</text>
  <rect x="55" y="120" fill="#6435c9" width="64" height="20" />
  <rect x="139" y="40" fill="#a98fe1" width="64" height="100" />
  <line x1="45" y1="140" x2="210" y2="140" stroke-width="2" stroke="#333" />
  <line x1="48" y1="70" x2="210" y2="70" stroke-width="1" stroke="#333" stroke-dasharray="5,6" />
  <text x="73" y="160">You</text>
  <text x="150" y="160">Cohort</text>
</svg>

CSS

svg {
  width: 248px;
  height: 175px;
  background: white; 
}