JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<link rel="stylesheet" href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css">
<script src="https://unpkg.com/vue@2.2.4/dist/vue.js"></script>

<div id="app">
   <div id="shopcartpreview"  v-if="carthover" v-clickoutside="hide">
        <div class="cartitem" v-for="item in cartitems">
            <div class="cartitempic"><img class="productImg" width="80px" height="80px" v-bind:src="item.image"></div>
            <div class="cartitemdetails">
                <div class="cartitemname">{{item.name}}</div>
                <div class="cartitemqty">1 X </div>
                <div class="cartitemprice">€{{item.unit_price}}</div>
            </div>
            <div class="cartitemdelete">
                <img src="assets/images/icon-bin.png" width="15px" height="15px">
            </div>
        </div>

        <div class="carttotal">
            <div class="carttotaltext">TOTAL:</div>
            <div class="carttotalprice">€2,860.00</div>
        </div>
        <div class="cartcheckouttbn">PROCEED TO CHECKOUT</div>
        <div class="viewcart">VIEW CART</div>



    </div>    
    
    <div   v-if="!carthover" @click.prevent="show" class="show">SHOW PREVIEW</div>
</div>

CSS

#app{
  background:blue;
  height:100vh;
}
.show{
  width:200px;
  height:40px;
  background:white;
}
#shopcartpreview{
  background:gold;
  height:300px;
   width:200px;
}

JavaScript

// App
new Vue({
  el: '#app',
  data: {
   cartitems: [{name:'apple iphone', unit_price: '124444', image:'https://www.boostmobile.com/content/dam/boostmobile/en/products/phones/apple/iphone-7/silver/device-front.png.transform/pdpCarousel/image.jpg'} ],
   carthover: true,
  },
  methods:{
  	hide(){
    this.carthover = false
    },
    show(){
     this.carthover = true
    }
  },
  directives: {
  clickoutside: {
  bind: function (el, binding, vnode) {
    el.clickOutsideEvent = function (event) {
      // here I check that click was outside the el and his childrens
      if (!(el == event.target || el.contains(event.target))) {
        // and if it did, call method provided in attribute value
        vnode.context[binding.expression](event);
      }
    };
    document.body.addEventListener('click', el.clickOutsideEvent)
   },
  unbind: function (el) {
    document.body.removeEventListener('click', el.clickOutsideEvent)
   },
  stopProp(event) { event.stopPropagation() }
  }
  }
});