JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<div class="container">
    <div class="date">
        January 1, 2017
    </div>
    <div class="trashcan">
    
    </div>
    <div class="confirmation">
        Are you sure?
    </div>
</div>
<p>
   hover above ^^^
</p>

CSS

.container {
    width: 324px;
    height: 40px;
    position: relative;
    outline: 1px dashed gray;
}

.date {
    position: absolute;
    left: 5px;
    top: 10px;
    
    opacity: 1;
    transition: opacity 0.2s;
    transition-delay: 0.2s;
}

.container:hover .date {
    opacity: 0;
    transition-delay: 0s;
}

.trashcan {
    width: 24px;
    height: 40px;
    background: green;
    position: absolute;
    left: 300px;
    
    transition: left 0.4s, background-color 0.1s;
}

.container:hover .trashcan {
    background-color: darkred;
    left: 0px;
}

.confirmation {
    opacity: 0;
    color: darkred;
    
    position: absolute;
    left: 40px;
    top: 10px;
    
    transition: opacity 0.2s;
    transition-delay: 0;
}

.container:hover .confirmation {
    opacity: 1;

    transition: opacity 0.2s;
    transition-delay: 0.2s;
}