JSFiddle - React, Tailwind, and code Playground

by meridius

HTML

<div id="tracy-debug">
    <div class="yadup-controls">
        <div class="yadup-controls-buttons">
            <div>
                <input type="button" name="runUpdates" value="Run selected updates" data-link="/yadup.update/run" />
            </div>
            <div>
                <input type="button" name="createUpdate" value="Create new update" data-link="/yadup.update/create" />
            </div>
            <div>
                <input type="button" style="" name="cancel" value="Cancel" />
            </div>
            <div>
                <input type="button" style="" name="saveFile" value="Save file" />
            </div>
        </div>
    </div>
</div>

CSS

#tracy-debug * {
    border: medium none;
    font: inherit;
    list-style: inherit;
    margin: 0;
    opacity: 1;
}
#tracy-debug .yadup-controls {
    width: 26em;
}
#tracy-debug .yadup-controls .yadup-controls-buttons {
    background: none repeat scroll 0 0 pink;
    box-sizing: border-box;
    height: 35px;
    margin: 0;
    padding: 0;
    width: 100%;
}
#tracy-debug .yadup-controls .yadup-controls-buttons div {
    background: none repeat scroll 0 0 lightblue;
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    padding: 4px 2px 2px;
    width: 49%;
}
#tracy-debug .yadup-controls .yadup-controls-buttons input[type="button"] {
    background: none repeat scroll 0 0 #d99696;
    border-radius: 4px;
    box-shadow: 1px 1px lightgray;
    color: black;
    padding: 2px 4px;
    text-align: center;
    width: 100%;
}