JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<div id="mini-basket">
									<a href="#" class="cart">
		<span class="quantity">0 item</span>
		<span> = </span>
		<span class="price">&#163;0.00</span>
	</a>
  
	<ul>
		<li class="first last no-items">
			<p>You currently have no items in your basket.</p>
		</li>
	</ul>
							</div>

CSS

.cart {
  background: #4E5558;
    padding: 5px 10px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    color: #F9FADC;
    text-decoration: none;
}

#mini-basket ul {
    position: absolute;
    width: 150px;
    padding: 5px 10px;
    margin: -16px 0 0;
    background: #464c4f;
    border-radius: 2px 0 2px 2px;
    -webkit-border-radius: 2px 0 2px 2px;
    -moz-border-radius: 2px 0 2px 2px;
    -o-border-radius: 2px 0 2px 2px;
    -ms-border-radius: 2px 0 2px 2px;
    z-index: 9999;
    display: none;
}

#mini-basket ul li {
    display: block;
    float: none;
    width: 150px;
    margin: 0;
    padding: 5px 0;
    line-height: 1.1em;
    border-top: 1px dashed #b4c2c4;
}

#mini-basket.open ul {
  display: block;
}

JavaScript

$('#mini-basket .cart').click(function() {
					if($('#mini-basket').hasClass('open')) {
						$('#mini-basket').removeClass('open');
					} else {
						$('#mini-basket').addClass('open');
					}
					return false;
				});

				$(document).mouseup(function(event) {
					if($(event.target).parents('#mini-basket').length == 0){
						$('#mini-basket').removeClass('open');
					}
				});