JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="gokerslrynub">
  <a href="zornet.ru" class="tukolesan qulotuga"></a>
  <a href="#" class="tukolesan wsatukins"></a>
  <a href="#" class="tukolesan ersaftuna"></a>
  <a href="#" class="tukolesan lantumsaz"></a>
</div>

CSS

html, body{
  min-height:100%;
}

body{
  		background-image: -webkit-linear-gradient(top, #edecec, #cecbc9);
			background-image: linear-gradient(top, #edecec, #cecbc9);
}

.gokerslrynub {
    margin: 73px auto;
    width: 395px;
}


.tukolesan {
    background-image: -webkit-linear-gradient(top, #f3ebe4, #f7f7f7);
    background-image: linear-gradient(top, #f4f1ee, #fff);
    border-radius: 83%;
    box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.33), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(109, 103, 102, 0.47);
    float: left;
    height: 69.8px;
    margin: 0 27px 27px 0;
    position: relative;
    width: 70px;
    -webkit-transition: all .1s linear;
    transition: all .1s cubic-bezier(0, 0, 0.88, 1.01);
}

.tukolesan:after {
    color: #c5c5c5;
    content: "";
    display: block;
    font-size: 28px;
    height: 28px;
    text-decoration: none;
    text-shadow: 0px -1px 1px #5a5757, 1px 1px 1px white;
    position: absolute;
    width: 29px;
}


		.ersaftuna:after{
			content: "❤";
			left: 23px;
			top: 17px;
		}

		.lantumsaz:after{
			content: "✿";
			left: 23px;
			top: 17px;
		}

.qulotuga:after {
    content: "✔";
    left: 23px;
    top: 17px;
}

		.wsatukins:after{
			content: "✖";
			left: 23px;
			top: 17px;
		}

		.tukolesan:hover{
			background-image: -webkit-linear-gradient(top, #f9f9f9, #e8e6e4);
			background-image: linear-gradient(top, #f9f9f9, #e8e6e4);
			color:#097ab3;
		}

		.ersaftuna:hover:after{
			color:#ef3e57;
			text-shadow:0px 0px 5px #e2455b;
		}

		.lantumsaz:hover:after{
			color:#d87723;
			text-shadow:0px 0px 5px #ff8f2d;
		}

		.qulotuga:hover:after{
			color:#6eb932;
			text-shadow:0px 0px 5px #76ca33;
		}

.wsatukins:hover:after {
    color: #c52525;
    text-shadow: 0px 0px 5px #981a1a;
}

		

		.tukolesan:active{
			background-image: -webkit-linear-gradient(top, #efedec, #f7f4f4);
			background-image: linear-gradient(top, #efedec, #f7f4f4);
			box-shadow: 0 3px 5px 0 rgba(0,0,0,.4), inset 0px -3px 1px...