JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.2.4/css/simple-line-icons.min.css">
<nav>
  <div class='cart icon-basket'>
    <span class='number'>1</span>
  </div>
</nav>
<div class='container'>
  <div class='product'>
    
   <div class='btn'>Add to cart</div>
    <div class='quickview'>Quickview</div>
  </div>
</div>

SCSS

@import url(https://fonts.googleapis.com/css?family=Nunito:400,300,700);

$body:#0b0b0b;
$nav:#ffffff;
$contrast:#00fefe;
$contrastopacity: rgba(0,254,254, .4);
$productbg:rgba(255,255,255,.45);
$quickViewBg:rgba(0,0,0,.90);
$overlay:rgba(0,0,0,1);

* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
}
nav{
	.cart{
		position: relative;
		float: right;
		margin-right: 50px;
		height:20px;
		line-height: 70px;
		font-size: 28px;
		height: 100%;
		cursor: pointer;
		span{
			
			&.updateQuantity{
				&:before{
					top: 0;
					bottom: 0;
					opacity: 1;
					width: 30px;
          height: 30px;
          border-radius: 30px;
          background: yellow;
					transition: all .2s ease, top .3s ease .4s, bottom .3s ease .4s;
				}
			} 
			
			&.update{
				transition: color .2s ease .6s;
        color: red;
				
				&:before{
					top: 0;
					width: 30px;
					opacity: 1;
					transition: all .2s ease, top .3s ease .4s, bottom .3s ease .4s;
          border-radius: 30px;
				}
				
			}
			&:before{
				content: "";
				position: absolute;
				width: 0px;
				height: 30px;
				background-color: $body;
				left: -10px;
				right:40px;
				bottom: 0;
				margin: auto;
			}
		}
	}
}

.container{
	padding: 20px;
	padding-top: 100px;
	text-align: center;
}

JavaScript

var cartCount = 0,
	 buy = $('.btn'),
	 span = $('.number'),
	 cart = $('.cart'),
	 minicart = [],
	 totalPrice = [],
	 miniCartPrice;

buy.on('click', addToCart);

function addToCart() {
	var self = $(this),
		 names = $('.names'),
		 price = $(this).parent().find('.price').text(),
		 priceInt = parseInt(price);
	
	
	cartCount++;
	span.text(cartCount);
	clearTimeout(time);
	if(span.hasClass('update')){
		span.removeClass('update');
		span.addClass('updateQuantity');
		var time = setTimeout(function(){
			span.removeClass('updateQuantity');
			span.addClass('update');
		}, 700);
	} else{
		span.addClass('update');
	}
	if (cartCount == 1){
		cart.toggleClass('icon-basket icon-basket-loaded');
	}
}