JSFiddle - React, Tailwind, and code Playground

by Hastig Z

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<button class="cart-remove" style="width: 20px; height: 20px;" increaseorator="20">
  <i class="fa fa-close"></i>
</button>










<instructions>click the x to enlarge, it should remain centered</instructions>

CSS

.cart-remove {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #CCC;
    border-radius: 50%;
    color: black;
}
.cart-remove i {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* ignore, styling */
* { outline: 0; }
*::-moz-focus-inner { border: 0; }

.cart-remove {
  border: 1px solid hsla(0, 0%, 0%, 0.5);
  background-color: hsla(0, 0%, 70%, 1);
}
.cart-remove:hover {
  background-color: red; 
}
instructions {
  position: absolute;
  width: 100%;
  left: 50%;  transform: translateX(-50%);
  bottom: 0;
  display: flex;
  justify-content: center;
  padding-bottom: 40px;
}

JavaScript

$('.cart-remove').click(function() {
	var currentCount = $(this).attr('increaseorator');
  var currentCountParsed = parseInt(currentCount);
  var currentWH = currentCountParsed + 20;
  $(this).css({
  	'width' : currentWH,
    'height' : currentWH
  });
  $(this).attr('increaseorator', currentWH);  
});