JSFiddle - React, Tailwind, and code Playground

by Amens

HTML

<div class="container" djjoeoq="">
  <div class="ldnp4ta" ldnp4ta="">
    <div class="ldnp4ta" ldnp4ta=""></div>
  </div>
  <div class="holder" czpdhce="">
    <div class="cartToggle" dheyayo="">
      <svg width="26" height="20" viewBox="0 0 26 20" xmlns="http://www.w3.org/2000/svg" stroke="#333" class="bu351sa" bu351sa="">
        <path fill="none" stroke-width="1.1" d="M10.725 15.018a2.194 2.194 0 1 1-.002 4.389 2.194 2.194 0 0 1 .002-4.389zM19.164 15.018a2.194 2.194 0 1 1-.001 4.388 2.194 2.194 0 0 1 .001-4.388zM.743.743H5.2L8.56 11.149h13.83"></path>
        <path d="M7.777 7h16.065M6.713 3h18.043"></path>
      </svg>
      <div class="cartBar">
        <div class="cartBarProducts">
          <a href="https://google.pl" class="cartBarProduct">
            <div class="cartBarProductImage image_1">
              <div class="cartBarProductDiscount">-50%</div>
            </div>
            <div class="cartBarProductDetails">
              <div class="cartBarProductName">Reserved - Płaszcz z naturalnym puchem - Czarny</div>
              <div class="cartBarProductPrices">
                <div class="cartBarProductRegularPrice">149.99 zł</div>
                <div class="cartBarProductDiscountPrice">74.99 zł</div>
              </div>
              <div class="cartBarProductShopLabel">
                <img class="symwsn1" symwsn1="" src="https://v.wpimg.pl/aG9wX2xvTiZYFS4BVw1DMxtNelEIHj4jQBk5UQoTDDQUGzdVFwVDaxsCeghaWVRzClgrWhcGPitWEDcQBQ==">
              </div>
            </div>
          </a>

          <a href="https://google.pl" class="cartBarProduct">
            <div class="cartBarProductImage image_1">
              <div class="cartBarProductDiscount">-50%</div>
            </div>
            <div class="cartBarProductDetails">
              <div class="cartBarProductName">Reserved - Płaszcz z naturalnym puchem - Czarny</div>
              <div class="cartBarProductPrices">
                <div class="cartBarProductRegularPrice">149.99 zł</div>
         ...

CSS

* {
  box-sizing: border-box;
}

.container {
  display: block !important;
  text-align: center;
  align-items: center;
  clear: both;
  margin: auto;
  position: relative;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.holder {
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-color: transparent;
  border: 0 none;
}

.cartToggle {
  left: 0px;
  position: fixed;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
  z-index: 450;
  background: #FFF;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 4px 0px;
}

.cartToggle svg {
  width: 80px;
  height: 80px;
  padding: 25px;
  background: #FFF;
  z-index: 5;
}

.cartBarProducts {
  height: 80px;
  width: 0;
  overflow: hidden;
  transition: width 1s;
  display: flex;
  align-items: center;
}

.cartBarProduct {
  width: 220px;
  display: flex;
  /* flex-wrap: wrap; */
  padding: 5px;
  box-sizing: border-box;
  color: #000;
  text-decoration: none;
  text-align: left;
}

.cartBarProduct:first-child {
  padding-left: 10px;
}

.cartBarProduct .cartBarProductImage {
  width: 70px;
  height: 70px;
  position: relative;
  background-size: contain;
}

.cartBarProduct .cartBarProductImage .cartBarProductDiscount {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 10px;
  background: #ed1c24;
  color: #FFF;
  font-weight: 900;
  padding: 2px;
}

.cartBarProduct .image_1 {
  background-image: url("https://v.wpimg.pl/STM4N18wfDUsVjgCFwxxIG8ObFhRVX92OBZ0ExcPZWR9GypIVhYwJihZPRwJT30jPVcqXxYHP3t6DHgebz5gbHprfglgVS4=")
}

.cartBarProductDetails {
  display: flex;
  flex-wrap: wrap;
  width: 140px;
  font-size: 12px;
  padding-left: 5px;
  position: relative;
}

.cartBarProductDetails .cartBarProductName {
  width: 140px;
  height: 28px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.cartBarProductDetails .cartBarProductPrices {
  height: 26px;
  overflow: hidden;
}

.cartBarProductPrices .cartBarProductRegularPrice...

JavaScript

const cartToggle = document.querySelector('.cartToggle');
const cartBarProducts = document.querySelector('.cartBarProducts');
const barTitleOrClose = document.querySelector('.barTitleOrClose');

cartToggle.addEventListener('click', () => {
  cartToggle.classList.toggle('opened');
})