JSFiddle - React, Tailwind, and code Playground

HTML

<body>


<div class="js-tools mo-tag-height-from-icon">
<img class="js-tools-icon-show-hide js-copy-me-page mo-tool-icon mo-icons-icon mo-icons-copy" src="http://lorempixel.com/24/24/" alt="new_page" hspace="0" vspace="0">
<img class="js-tools-icon-show-hide js-edit-page mo-tool-icon mo-icons-icon mo-icons-page-edit" src="http://lorempixel.com/24/24/" alt="page-edit" hspace="0" vspace="0">
<img class="js-tools-icon-show-hide js-edit-rename mo-tool-icon mo-icons-icon mo-icons-work" src="http://lorempixel.com/24/24/" alt="work" hspace="0" vspace="0">
<img class="js-tools-icon-show-hide js-edit-delete mo-tool-icon mo-icons-icon mo-icons-delete" src="http://lorempixel.com/24/24/" alt="delete" hspace="0" vspace="0">
</div>

</body>

CSS

.js-move-me-page, .js-move-me-cat, .mo-icons-copy {
    cursor:move;
}
.mo-icons-icon {
    width:24px;
    height:24px;
    background-image: url(gfx/mo_icons.png);
    background-repeat:no-repeat;
	margin:5px;
}

.mo-icons-copy          {background-color: red}
.mo-icons-page-edit     {background-color: green}
.mo-icons-work          {background-color: yellow}
.mo-icons-delete        {background-color: blue}

.mo-icons-delete::after        {content: "loeschen";}