JSFiddle - React, Tailwind, and code Playground

by teknohippy

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Experience Page</title>
    <style>
      body {
        font-family: "Inter", sans-serif;
        background-color: white;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        margin: 0;
        padding: 20px;
      }

      .barchart {
        display: flex;
        flex-direction: row;
        gap: 20px;
        width: 800px;
      }

      .labels {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 17px;
      }

      .bars {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 17px;
        flex: 1 0 0;
      }

      .label {
        display: flex;
        height: 32px;
        min-height: 32px;
        max-height: 32px;
        padding: var(--spacing-none, 0px) 10px;
        justify-content: center;
        align-items: center;
        background-color: #edeef0;
        border-radius: 12px;
        color: #475467;
        font-size: 16px;
        font-weight: 600;
        word-wrap: break-word;
      }

      .bar-block {
        height: 32px;
        display: flex;
        min-height: 32px;
        max-height: 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        align-self: stretch;
      }

      .bar {
        height: 14px;
        border-radius: 12px;
      }

      .barchart-axis {
        position: absolute;
        width: 100%;
        height: 110%;
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
      }

      .axis-container {
        flex: 1 1 0;
        align-self: stretch;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }

      .axis {
        flex:...