JSFiddle - React, Tailwind, and code Playground

by shtrih

HTML

<script src="meterial"></script>
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/3.6.95/css/materialdesignicons.min.css">
<!-- https://dev.materialdesignicons.com/getting-started/webfont -->
<div class="tools">
  <h5>Инструменты</h5>
  
  <a title="Описание кнопки"><span class="mdi mdi-nintendo-switch"></span></a>  
  <a><span class="mdi mdi-steam"></span></a>
  <a><span class="mdi mdi-blender-software"></span></a>
  <a><span class="mdi mdi-react"></span></a>
</div>

CSS

.tools {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

h5 {
	margin: 10px 4px;
}

a {
  display: inline-block;
  width: 26px;
  border: 1px solid #aaa;
  border-radius: 2px;
  line-height: 24px;
	text-align: center;
	
	color: #aaa;
}

a:hover {
	color: #555;
	border-color: #778;
	background-color: #eef;
}

a:active {
	background-color: #dde;
	box-shadow: inset 1px 1px 0 0 #889;
}

.mdi {
	vertical-align: middle;
}