JSFiddle - React, Tailwind, and code Playground

by IPWright83

HTML

<div class="legend" style="background: rgba(255, 255, 255, 0.9); border: 1px solid rgb(220, 225, 230);">
    <div class="legend-entry">
        <div class="legend-key" title="Gross Profit">
            <i class="fa fa-circle" style="color: rgb(0, 167, 205)"></i>
            <div class="label" style="color: #646464">Gross Profit</div>
        </div>
    </div>
    <div class="legend-entry">
        <div class="legend-size-group">
            <div style="width: 100px; height: 100px; float: left;"></div>
            <div class="circle" style="width: 100px; height: 100px;">100k</div>
            <div class="circle" style="width: 50px; height: 50px; left: 25px; top: 60px;">50k</div>
            <div class="circle" style="width: 25px; height: 25px; left: 38px; top: 85px;">25k</div>
        </div>
    </div>
</div>

<svg width="200" height="200">
    <circle stroke="red" r="50" cx="100" cy="100" />
    <circle r="25" cx="100" cy="125" />
    <circle r="12.5" cx="100" cy="137.5" />
</svg>

CSS

.legend {
    display: inline-flex;
    flex-direction: column;
    padding: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.legend-size-group {
    margin-top: 5px;
    padding-top: 10px;
    border-top: thin solid red;
    /*overflow: hidden;*/
    position: relative;
}

svg circle {
    stroke: #757575;
    fill: none;
    stroke-dasharray: 2 2;
}

.legend .legend-entry {
    display: inline-flex;
}

.circle {
    border: thin dashed red;
    border-radius: 50%;
    position: absolute;
    text-align: center;
}