JSFiddle - React, Tailwind, and code Playground

HTML

<a href="http://site1.com"><div class="item_mm_blc_login">
<div class="item_mm_img"><img src="http://htmlforum.ru/public/style_images/master/icon_users.png"></div>
<div class="item_mm_txt_login">link 1</div>
</div></a>

<a href="http://site2.com"><div class="item_mm_blc_login">
<div class="item_mm_img"><img src="http://htmlforum.ru/public/style_images/master/icon_users.png"></div>
<div class="item_mm_txt_login">link 2</div>
</div></a>

<a href="/"><div class="tab_mm_title">link 3</div></a>

CSS

a {
    display: block;
    width: 160px;
}
.item_mm_blc_login { padding:0; margin:0; width:160px; height:28px; border:0px solid green; display: inline-block;}
.item_mm_blc_login:hover { background-color:#4e9de7; 
	-o-border-radius:3px;
	-moz-border-radius:3px;
	-khtml-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px; }

.item_mm_img, .item_mm_txt_login {display: inline-block; padding:0; margin:0; float:left; height:18px; vertical-align:middle; text-align:left; }
.item_mm_img { width:20px; padding:5px 0 5px 5px; border-right:1px solid #f1f1f1; }
.item_mm_img img { padding:0; margin:0; }

.item_mm_txt_login { padding:0; margin:0; float:left; height:18px; vertical-align:middle; text-align:left; }
.item_mm_txt_login { width:120px; padding:5px 0 5px 5px; }
a:hover .item_mm_txt_login { width:120px; color:yellow; }

.tab_mm_title { padding:5px; margin-top:1px; text-decoration:underline; text-align:right; border-top:1px solid #dfdddd; }
a:hover .tab_mm_title { text-decoration:none; color:yellow; }