JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<nav>
  <div class="wrapper">
    <div class="cart">
      <div class="cart__price">
        <p class="text">Cart Total</p>
        <p class="total">0.00</p>
      </div>
      <div class="cart__items">
        <p class="text">Items</p>
        <p class="total">0</p>
      </div>
    </div>
  </div>
</nav>
<ul class="products">
  <li class="product"> 
    <div class="product__content">
      <h2>Piece of Chain Link Fence</h2>
      <p class="price">$3.99</p>
      <p>A great description that explains what this product is all about. Here's what you get!</p>
      <ul class="features">
        <li>This thing</li>
        <li>That thing</li>
        <li>And of course the other thing that's really essential</li>
      </ul>
      <button value="3.99">Add This Product</button>
      <div class="icon__check"></div>
    </div>
  </li>
 </ul>

SCSS

$color-body-bg: #435158;
$color-product-bg: white;
$color-price-bg: lighten($color-body-bg, 30%);
$color-price-text: white;
$color-button-bg: #E5467E;
$color-button-text: white;
$color-nav-bg: darken($color-body-bg, 20%);

$wrapper: 1000px;
$margin-region: 48px;
$pad: 24px;

@mixin pos-center {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
}

@mixin clearfix {
  &:before,
  &:after {
    content: "";
    display: table;
  }

  &:after {
    clear: both;
  }
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background-color: $color-body-bg;
  font-family: 'Open Sans', sans-serif;
}

.wrapper {
  max-width: $wrapper;
  margin: 0 auto $margin-region;
  padding: 0 12px;
  @include clearfix;
}

// Navigation
nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: auto;
  background: $color-nav-bg;
  transform: translateZ(0);
  z-index: 2;
  .wrapper {
    margin-bottom: 0;
  }
}

.menu {
  position: relative;
  width: 60px;
  height: 48px;
  float: left;
  border-left: 1px solid lighten($color-nav-bg, 6%);
  border-right: 1px solid lighten($color-nav-bg, 6%);
  &__icon,
  &__icon:before,
  &__icon:after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
    width: 24px;
    height: 2px;
    background-color: white;
  }
  &__icon:before {
    top: -14px;
  }
  &__icon:after {
    bottom: -14px;
  }
}

// Cart
.cart {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  p {
    display: inline-block;
    position: relative;
    margin-bottom: 0;
    color: white;
    padding: 12px;
  }
  &__price,
  &__items {
    display: flex;
    .text {
      font-size: 12px;
      line-height: 24px;
      text-transform: uppercase;
      padding-right: 0;
    }
    .total {
      font-size: 20px;
      font-weight: 700;
    }
  }
  &__price {
    .total {
      padding-left: 10px;
      margin-left: 6px;
     ...

JavaScript

var cartItems = $(".cart__items .total");
var cartItemsTotal = 0;
var cartPrice = $(".cart__price .total");
var cartPriceTotal = cartPrice.text();
var price;

$('button').on('click', function() {
  price = $(this).val();
  if($(this).parent().hasClass('is-purchased')) {
    cartPriceTotal = parseFloat(cartPriceTotal) - parseFloat(price);
    cartItemsTotal--;
  } else {
    cartPriceTotal = parseFloat(cartPriceTotal) - parseFloat(price);
    cartItemsTotal--;
  }
  cartPrice.text(Math.abs(cartPriceTotal).toFixed(2));
  cartItems.text(cartItemsTotal);
});