JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<html><head>
   <title>!DOCTYPE</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="/style.css"> 
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 </head>
    <body>
        <div class="container">

            <div class="header">
               <div class="row">
                   <div class="col-12 button__bucket">
                       <div class="row">
                           <div class="col-12">
                                <button id="show__bucket" type="button" class="btn btn-outline-secondary">Корзина</button>
                           </div>
                           <div class="col-12">
                               <div class="position-absolute">
                                    <div id="bucket" class="bucket">
                                        <div class="text-center">
                                            <div id="client__order">
                                               
                                            </div>
                                        </div>
                                    </div>
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
            </div>

            <div class="main">
        ...

CSS

.bucket {
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    margin-top: 10px;
    display: none;
}

JavaScript

var order = document.getElementById('client__order');
var cart = localStorage.getItem('cart') ? JSON.parse(localStorage.getItem('cart')) : [] 

if (cart.length) {
  cart.forEach(function(product) {
    addToOrder(product, true)
  })
}

var showBucket = document.getElementById('show__bucket');
showBucket.addEventListener('click', show);

function show() {
    var bucket = document.getElementById ('bucket');
    if (bucket.style.display !== 'block'){
        bucket.style.display="block";
    }else{
        bucket.style.display="none";
    }
  };

function addToOrder(product, noNeedToStore) {
    var newProduct = document.createElement('div');
    newProduct.textContent = product;
    order.append(newProduct);
    if(!noNeedToStore) {
     cart.push(product)
     localStorage.setItem('cart', JSON.stringify(cart))
    }
}