JSFiddle - React, Tailwind, and code Playground

by babich_ss

HTML

<!doctype html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="graph.css">
    </head>

    <body>
        <section class="graph">
            <div class="scales">
                <div class="vertical">
                    <h6>Header for vertical scale</h6>
                    <ol>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                    </ol>
                </div>
                <div class="horizontal" hidden>
                    <h6>Header for horizontal scale</h6>
                    <ol>
                        <li>0.1</li>
                        <li>0.2</li>
                        <li>0.3</li>
                        <li>0.4</li>
                        <li>0.5</li>
                        <li>0.6</li>
                        <li>0.7</li>
                        <li>0.8</li>
                        <li>0.9</li>
                        <li>1.0</li>
                    </ol>
                </div>
            </div>
            <div class="bar-container">
                <div class="bar-group">
                    <p class="group-label">Group label</p>
                    <div class="bar">
                        <p class="value">10%</p>
                    </div>
                    <div class="bar">
                        <p class="value">20%</p>
                    </div>
                    <div class="bar">
                        <p class="value">30%</p>
                    </div>
                </div>
                <div class="bar-group">
                    <p class="group-label">Group label</p>
                    <div class="bar">
                        <p class="value">40%</p>
                    </div>
                    <div class="bar">
              ...