JSFiddle - React, Tailwind, and code Playground

by tomik23

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <style>
    .wst_chart {
      text-align: center;
      background-color: white;
      border: 1px solid darkgray;

      margin: 2% auto 2% auto;
      padding-bottom: 0%;
    }

    .grstd {
      height: auto;
      width: 100%;
      max-width: 880px;
    }

    graph {
      font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
      padding: 1% 0 1% 0;
    }

    .graph .grid {
      stroke: #cccccc;
      stroke-dasharray: 0;
      stroke-width: 1;
    }

    .graph .x-grid,
    .graph .y-grid {
      stroke: black;
      stroke-width: 2;
    }

    .labels {
      font-size: 13px;
    }

    .label-title {
      font-weight: bold;
      font-size: 12px;
      fill: black;
    }

    .graph .labels.x-labels {
      text-anchor: middle;
    }

    .graph .labels.y-labels {
      text-anchor: end;
    }

    .graph .y-label1 {
      text-anchor: middle;
    }

    .graph .line {
      fill: none;
      stroke-width: 3;

      transition: 0.5s;
    }

    .graph .line2 {
      fill: none;
      stroke-width: 3;
      stroke-dasharray: 5;
    }

    .graph .bar {
      fill: darkred;
    }

    .graph .bar:hover,
    .graph .bar:focus,
    .graph .bar:hover text,
    .graph.bar:focus text {
      fill: #29497a;
    }

    .graph .bar text {
      visibility: hidden;
    }

    .graph .bar:hover text,
    .graph .bar:focus text {
      visibility: visible;
    }
  </style>

</head>

<body>
  <div class="wst_chart grstd">

    <svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graph grstd"
      aria-labelledby="Total US Yearling Sales" role="img" viewBox="0 0 880 470">

      <g class="grid x-grid">

        <line x1="80" x2="80" y1="5"...