<div style="
    position: fixed;
    bottom: 50px; left: 10px; width: 120px; height: 66px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5); z-index:9999; font-size:10px;
    border:1px solid white;
    border-radius: 5px;
    padding: 2px 3px;
">
    <h6>Speed (knots)</h6>
    <div style="background: linear-gradient(to right, red, yellow, green);
                height: 15px;border:1px solid white;"></div>
    <div style="display: flex; justify-content: space-between;font-size:10px">
        <span>0</span>
        <span>{{ '{:.1f}'.format(max_speed / 2) }}</span>
        <span>{{ '{:.1f}'.format(max_speed) }}</span>
    </div>
</div>
