JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<figure class="chart">
    <dl data-total="42" class="bar horizontal">
        <dt>First Answer</dt>
        <dd data-total="20" data-pct="48" style="width:48%;">Explanation text</dd>
        <dt class="correct">Second Answer</dt>
        <dd data-total="5" data-pct="12" style="width:12%;">Explanation text</dd>
        <dt class="respondant">Third Answer</dt>
        <dd data-total="12" data-pct="28" style="width:28%;">Explanation text</dd>
        <dt>Fourth Answer</dt>
        <dd data-total="5" data-pct="12" style="width:12%;">Explanation text</dd>
    </dl>
    <figcaption class="axis-x">x axis label</figcaption>
    <figcaption class="axis-y">y axis label</figcaption>
</figure>

SCSS

.chart {
    border: 1px inset #333;
    width: 500px;
    height: 200px;
    position:relative;
    background: #ccc;
    font: 12px Arial;
    
    figcaption {
        position:absolute;
        
        &.axis-x {
            bottom:5px;
            width:100%;
            text-align:center;
            padding-top:5px;
            border-top: 1px solid #000;
        }
        &.axis-y {
            top: 90px;
            -webkit-transform: rotate(-90deg);
            width: 200px;
            text-align: center;
            background: rgba(120,45,12,.5);
            left: -90px;
            padding-bottom: 5px;
            border-bottom: 1px solid #000;
        }
    }
    .bar {
        margin: 0 0 14px 20px;
        background: #aef;
        height: 77%;
        padding: 10px 0;
        
        dt {
            margin:.5em 0 0 1em;
            
            &.correct {
                color: green;
                font-weight:bold;
                
                & + dd {
                    background-color: green;
                }
            }
            
            &.respondant {
                color: red;
                font-style: italic;
                
                & + dd {
                    background-color: red;
                }
            }
        }
        dd {
            background: rgba(20,20,89,.85);
            margin:0;
            text-indent:-9999px;
            border-radius: 0 3px 3px 0;
        }
    }
}