JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<div class="cart-preview">
  <span>cart preview <br> (hover me)</span>
  <div class="body">
      <ul>
              </ul>
      <div class="cart-subtotals">
                  <div class="products">
            <span class="label">Subtotal</span>
            <span class="value">0</span>
          </div>
                  <div class="">
            <span class="label"></span>
            <span class="value"></span>
          </div>
                  <div class="shipping">
            <span class="label">Shipping</span>
            <span class="value">0</span>
          </div>
                  <div class="">
            <span class="label"></span>
            <span class="value"></span>
          </div>
              </div>
      <div class="cart-total">
        <span class="label">Total sum</span>
        <span class="value">0</span>
      </div>
    </div>
</div>

CSS

.cart-preview {
  position:relative;
}

.cart-preview .body {
    visibility: hidden;
    position: fixed;
    width: 400px;
    height: 100%;
    z-index: 99;
    background-color: #dbd4d4;
    right: -20px;
    top: 0;
}
.cart-preview:hover .body {
  visibility: visible;
  position: fixed;
  transition: right 1s linear;
  right: 0;
}