JSFiddle - React, Tailwind, and code Playground

by Michael Danilov

HTML

<ul class="dnlv-list">
    <li class="dnlv-list__elem">
        <i class="dnlv-delete"></i>
        Элемент 1
    </li>
    <li class="dnlv-list__elem">
        <i class="dnlv-delete"></i>
        Элемент 2
    </li>
    <li class="dnlv-list__elem">
        <i class="dnlv-delete"></i>
        Элемент 3
    </li>
    <li class="dnlv-list__elem">
        <i class="dnlv-delete"></i>
        Элемент 4
    </li>
    <li class="dnlv-list__elem">
        <i class="dnlv-delete"></i>
        Элемент 5
    </li>
</ul>

CSS

.dnlv-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dnlv-list__elem {
    border: 1px solid #DAE1E8;
    color: #67829E;
    cursor: pointer;
    display: block;
    height: 30px;
    margin-bottom: 5px;
    padding: 10px;
    position: relative;
    width: 200px;
}

.dnlv-list__elem:hover {
    background-color: #EDF1F5;
}

.dnlv-delete {
    background-image: url("https://vk.com/images/pics/statusx_op.gif");
    background-repeat: no-repeat;
    display: none;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    height: 11px;
    width: 11px;
}

.dnlv-list__elem:hover .dnlv-delete {
    display: block;
}