JSFiddle - React, Tailwind, and code Playground

by kuonyuu

HTML

<div class="item">
    <div class="leftIcon"></div>
    <div class="actionBar">
        <div class="btn edit">Edit</div>
        <div class="btn del">Del</div>
    </div>
    <div class="textArea"><span>frgre gre gre ewfrewgreskgjr kesgrke gr esgr egre rwaegre agrwejkagkraw gkwa jkgrewkagrka gkraegrwa grwa</span></div>
</div>

SCSS

* {
    vertical-align: top;
    font-family: Arial;
}

.item { 
    -webkit-box-shadow: 0 0 4px 0px rgba(0,0,0,.5);
    box-shadow: 0 0 4px 0px rgba(0,0,0,.5);
    position: relative; 
    padding: 20px 16px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    &:hover { .actionBar { display: block; } }
}
.actionBar { 
    display: none;
    float: right;
    line-height: 28px;
}

.leftIcon {
    margin: -5px 0;
    float: left;
    height: 28px;
    width: 28px;
    margin-right: 10px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;; 
    border-radius: 50%;;
    background-color: #cecece;
}

.textArea {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
}

.btn {
    margin: -5px 4px;
    font-size: 13px;
    text-align: center;
    width: 28px;
    height: 28px;
    padding: 0 6px;
    display: inline-block;
    cursor: pointer;
    
    &:hover { background-color: #f2f2f2; }
    
    &.del { color: red; }
}