JSFiddle - React, Tailwind, and code Playground

by rhudecaviar

HTML

<main>
		  <header>
		    <h1>Your Shopping Cart</h1>
		    <div id="cart-container">
		      <div id="cart">
		        <i class="fa fa-shopping-cart fa-2x openCloseCart" aria-hidden="true"></i>
		        <button id="emptyCart">Empty Cart</button>
		      </div>
		      <span id="itemCount"></span>
		    </div>
		  </header>

		  <div id="shoppingCart">
		    <div id="cartItemsContainer">
		      <h2>Items in your cart</h2>
		      <i class="fa fa-times-circle-o fa-3x openCloseCart" aria-hidden="true"></i>
		      <div id="cartItems"></div>
		      <span id="cartTotal"></span>
		  	</div>
		  </div>

		  <nav>
		  	<ul>
		  		<li><a href="index.html">Shopping Cart</a></li>
		  	</ul>
		  </nav>

		  <div class="item">
		    <div class="itemDetails">
		      <div class="itemImage">
		        <img src="http://lorempixel.com/300/300/sports" alt="" />
		      </div>
		      <div class="itemText">
		        <p class="price-container">Price: €<span class="price">10</span></p>
		        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam at optio nam asperiores ipsam voluptate eaque labore.</p>
		      </div>
		    </div>
		    <button class="add">Add to cart</button>
		  </div>

		  <div class="item">
		    <div class="itemDetails">
		      <div class="itemImage">
		        <img src="http://lorempixel.com/300/300/technics" alt="" />
		      </div>
		      <div class="itemText">
		        <p class="price-container">Price: €<span class="price">15</span></p>
		        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam at optio nam asperiores ipsam voluptate eaque labore.</p>
		      </div>
		    </div>
		    <button class="add">Add to cart</button>
		  </div>

		  <div class="item">
		    <div class="itemDetails">
		      <div class="itemImage">
		        <img src="http://lorempixel.com/300/300/fashion" alt="" />
		      </div>
		      <div class="itemText">
		        <p class="price-container">Price: €<span...