JSFiddle - React, Tailwind, and code Playground

by brombomb

HTML

<script src="https://monitor.returnpath.net/im-web/images/im-great.png"></script>
<script src="https://monitor.returnpath.net/im-web/images/im-good.png"></script>
<script src="https://monitor.returnpath.net/im-web/images/im-neutral.png"></script>
<script src="https://monitor.returnpath.net/im-web/images/im-bad.png"></script>
<script src="https://monitor.returnpath.net/im-web/images/im-worst.png"></script>
<div id="benchmark-legend"> <b>Benchmark Definition</b>

    <p>The benchmark represents campaign engagement. It's generated by comparing your campaign against hundreds of thousands of others, across multiple industries and categories.</p>
    <center>
        <div class="benchmark-legend-icons">
            <center>
                <img src="https://monitor.returnpath.net/im-web/images/im-great.png" class="help-tooltip benchmark-icon-spacing">
                <br>Excellent</center>
        </div>
        <div class="benchmark-legend-icons">
            <center>
                <img src="https://monitor.returnpath.net/im-web/images/im-good.png" class="help-tooltip benchmark-icon-spacing">
                <br>Above&nbsp;Avg.</center>
        </div>
        <div class="benchmark-legend-icons">
            <center>
                <img src="https://monitor.returnpath.net/im-web/images/im-neutral.png" class="help-tooltip benchmark-icon-spacing">
                <br>Average</center>
        </div>
        <div class="benchmark-legend-icons">
            <center>
                <img src="https://monitor.returnpath.net/im-web/images/im-bad.png" class="help-tooltip benchmark-icon-spacing">
                <br>Below&nbsp;Avg.</center>
        </div>
        <div class="benchmark-legend-icons">
            <center>
                <img src="https://monitor.returnpath.net/im-web/images/im-worst.png" class="help-tooltip benchmark-icon-spacing">
                <br>Poor</center>
        </div>
    </center>
    <div style="clear:both;padding-bottom:5px"></div>
</div>
<hr...

CSS

.benchmark-legend-icons {
    float: left;
    font-style: italic;
    padding-left: 8px;
    padding-right: 8px;
    width: 72px;
}
.benchmark-icon-spacing {
    margin: 0 5px 5px;
}
.benchmark-legend-icons {
    font-style: italic;
}