JSFiddle - React, Tailwind, and code Playground

by katalin_2003

HTML

<button data-counter="1000">TEST</button>

CSS

button {
/*  display: block;*/
  height: 64px;
  width: 64px;
  /*background-color: black;*/
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 2px 1px rgba(0,0,0,0.4);
  cursor: pointer;  
  position: relative;
  background-color: #28658B;
  box-sizing: border-box;
 /* padding-top: 64px;*/
  font-family: 'Helvetica';
  font-size: 12px;
  text-align: center;
  color: white;
/*  text-shadow: 1px 1px 0px rgba(0,0,0,0.6);*/
  
  /*display only*/
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -64px;
  margin-left: -64px;
}

button:before {
  content: "";
  width: 100%;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 8px;
	background: linear-gradient(top, rgba(250,250,250,0.6) 0%, rgba(40,101,139,0) 100%);
	background: -webkit-linear-gradient(top, rgba(250,250,250,0.6) 0%, rgba(40,101,139,0) 100%);
	background: -moz-linear-gradient(top, rgba(250,250,250,0.6) 0%, rgba(40,101,139,0) 100%);
}

[data-counter]:after {
  	content: attr(data-counter);
    position: absolute;
    top:-10px;
    right: -14px;
    padding: 3px 9px;
    border: 2px solid white;
    border-radius:100px;
    background: linear-gradient(top, #FF6969 0%,#ff0000 100%);
	background: -webkit-linear-gradient(top, #FF6969 0%,#ff0000 100%);
	background: -moz-linear-gradient(top, #FF6969 0%,#ff0000 100%);
    box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4), 0 0 1px 	rgba(0,0,0,.7) inset, 0 10px 0px rgba(255,255,255,.11) inset; 
    background-clip: padding-box;
    font:bold 12px/18px "Helvetica Neue", sans-serif; 
    color: white;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0,0,0,.6);
}