JSFiddle - React, Tailwind, and code Playground

by Dan Schultz

HTML

<div class="left">
    <button class="add-text">Add Text</button>
    <div class="undo-redo-button undo">
        <div class="icon"></div>
        <div class="message">Undo</div>
    </div>
    
    <div class="undo-redo-button redo">
        <div class="icon"></div>
        <div class="message">Redo</div>
    </div>
</div>

CSS

.left {
    margin: 50px;
    font-family: Arial, san-serif;
    font-size: 14px;
}

.add-text {
    width: 150px;
    height: 32px;
    vertical-align: middle;
}

.undo-redo-button {
    border: 1px solid;
    border-color: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    display: inline-block;
    height: 32px;
    line-height: 32px;
    white-space: nowrap;
    padding: 0 4px;
    overflow: hidden;
    color: rgba(0, 0, 0, 0);
    
    max-width: 24px;
    
    -moz-transition: all 1000ms ease;
    -webkit-transition: all 1000ms ease;
    transition: all 1000ms ease;
    
    vertical-align: top;
}

.undo-redo-button:hover {
    max-width: 1000px;
    color: rgba(0, 0, 0, 1);
}

.icon {
    background-image: url(http://www.iconsdb.com/icons/preview/black/undo-2-s.png);
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    margin-top: 4px;
}

.message {
    margin-left: 4px;
    display: inline;
    vertical-align: middle;
}

.undo .icon {
    float: left;
}

.redo .icon {
    float: right;
}