JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mat-spisok">
						<ul>
							<li><a href="#"><span class="activ"><span>керамическая плитка</span></span></a></li>
							<li><a href="#"><span class="no-activ">керамогранит</span></a></li>
							<li><a href="#"><span class="no-activ">мозаика</span></a></li>
							<li><a href="#"><span class="no-activ">клинкер</span></a></li>
							<li><a href="#"><span class="no-activ">клей</span></a></li>
							<li><a href="#"><span class="no-activ">затирка</span></a></li>
						<ul>
						<div class="clear"></div>
					</div>

CSS

.mat-spisok {width: 305px; margin: 0 0 0 115px; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: normal; color: #333; cursor: pointer;}
.mat-spisok li {list-style-type: none; margin: 0 0 7px 0; float: left;}
.mat-spisok a {color: #333; padding: 2px 8px 5px 8px; text-decoration: none;}
.mat-spisok .no-activ {border-bottom: 1px dashed #b4b2ad;}
.mat-spisok .activ {padding: 2px 8px 5px 8px; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; background: #e5e1d2;}
.mat-spisok .activ span {line-height: 14px; border-bottom: 1px dashed #b4b2ad;}