JSFiddle - React, Tailwind, and code Playground

by Matias Guijarro

HTML

<div class="synoptic">
    <div class="synoptic-element">
        <legend>Monochromator</legend>
        <ul>
            <li data-type="motor" data-name="monocal">monocal</li>
            <li data-type="motor" data-name="psvo">psvo</li>
        </ul>
        <center>
            <img src="bla.png"></img>
        </center>
        <ul>
            <li data-type="actuator" data-element-name="mbv1.diode">mbv1.diode</li>
            <li data-type="shutter" data-name="fshut">fshut</li>
        </ul>
    </div>
    <div class="synoptic-element">
        <legend>Diffractometer</legend>
        <ul>
            <li data-type="motor" data-name="monocal">monocal</li>
            <li data-type="motor" data-name="psvo">psvo</li>
        </ul>
        <center>
            <img src="bla.png"></img>
        </center>
        <ul>
            <li data-type="actuator" data-name="mbv1.diode">mbv1.diode</li>
            <li data-type="shutter" data-name="fshut">fshut</li>
        </ul>
    </div>
</div>

CSS

.synoptic {
    background: #3F3F46;
}
.synoptic-element {
    border: solid 1px #666666;
    border-radius: 5px;
    margin: 10px;
    display: inline-block;
}
.synoptic-element > ul {
    list-style-type: none;
    padding: 0px;
    margin: 10px;
}
.synoptic-element * li {
    background: #d1ff50;
    border-radius: 5px;
    font-family: monospace;
    border: 1px solid #999967;
}
.synoptic-element > legend {
    width: 100%;
    display: inline-block;
    background-color: #666666;
    font-variant: small-caps;
    text-align: center;
    color: #CCCC9A;
}