JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cart</title>
    <link rel="stylesheet" href="css/style.css">
    <!-- Box Icons -->
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>

<body>
    <header>
        <div class="nav container">
            <i class="bx bx-menu" id="menu-icon"></i>
            <a href="index.html" class="logo">Quick Sale</a>
            <div class="navbar">
                <a href="#" class="nav-link">Woman</a>
                <a href="#" class="nav-link">Man</a>
                <a href="#" class="nav-link">Kids</a>
                <a href="#" class="nav-link">Accessories</a>
            </div>
            <a href="cart.html">
                <i class='bx bx-shopping-bag' id="cart-icon" data-quantity="0"></i>
            </a>
        </div>
    </header>
    <!-- Cart -->
    <section class="cart-container container">
        <a href="index.html" class="back-homepage">
            <i class='bx bx-chevron-left'></i>
            <span>Back To Home</span>
        </a>
        <h2 class="cart-s-title">Shopping Cart</h2>
        <div class="cart-box">
            <div class="cart-data">
                <div id="cartItems"></div>
            </div>
            <div class="cart-t">
                <div id="cartTotal"></div>
                <a href="#" class="checkout-btn">Checkout</a>
            </div>
        </div>
    </section>
    <!-- Link To JS -->
    <script src="js/main.js"></script>
</body>

</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Text:wght@400;500;600;700;800;900&display=swap");

* {
    font-family: "Big Shoulders Text", sans-serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-padding-top: 2rem;
    text-decoration: none;
    list-style: none;
}

:root {
    --main-color: #273fa1;
    --text-color: #000;
    --bg-color: #fff;
    --contenair-color: #1e1e2a;
}

body {
    color: var(--text-color);
    background: var(--bg-color);
}

img {
    width: 100%;
}

section {
    padding: 4rem 0 2rem;
}

.container {
    max-width: 1070px;
    margin: auto;
    width: 100%;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 0;
}

#menu-icon {
    font-size: 28px;
    cursor: pointer;
    color: var(--main-color);
    display: none;
}

.logo {
    font-size: 1.5rem;
    color: var(--main-color);
    text-transform: uppercase;
    font-weight: 700;
}

.navbar {
    display: flex;
    align-items: center;
    column-gap: 1rem;
}

.nav-link {
    font-size: 1.025rem;
    color: var(--main-color);
    font-weight: 700;
}

#cart-icon {
    position: relative;
    font-size: 1.8rem;
    color: var(--main-color);
    cursor: pointer;
}

#cart-icon[data-quantity="0"]::after {
    content: "";
}

#cart-icon[data-quantity="0"]::after {
    content: attr(data-quantity);
    position: absolute;
    top: 0;
    right: -11px;
    width: 20px;
    height: 20px;
    background: var(--main-color);
    border-radius: 50%;
    color: var(--bg-color);
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home {
    position: relative;
    background: #f2f0f1;
    min-height: 700px;
}

.home-img {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform:...

JavaScript

// Products Array
const products = [
  {
    id: 1,
    title: "Autumn Hoodie",
    price: 264.9,
    image:
      "https://pangaia.com/cdn/shop/products/Recycled-Nylon-NW-Flwrdwn-Quilted-Collarless-Jacket-Cerulean-Blue-Female-1_bf4b2a54-8a7f-4174-bc49-8ef22b24bfdd.jpg?v=1666708230&width=1426",
  },
  {
    id: 2,
    title: "FUSION HOODIE",
    price: 295,
    image:
      "https://images.undiz.com/on/demandware.static/-/Sites-ZLIN-master/default/dw2264d914/merch/BTS/654206666_x.jpg?sw=1250",
  },
  {
    id: 3,
    title: "Chestnut Brown",
    price: 74.9,
    image:
      "https://pangaia.com/cdn/shop/products/Recycled-Cashmere-Core-Hoodie-Chestnut-Brown-Male-1.jpg?v=1663947464&width=1426",
  },
  {
    id: 4,
    title: "Nike Sportswear",
    price: 80,
    image:
      "https://static.nike.com/a/images/t_PDP_1728_v1/f_auto,q_auto:eco/61734ec7-dad8-40f3-9b95-c7500939150a/sportswear-club-mens-french-terry-crew-neck-sweatshirt-tdFDRc.png",
  },
  {
    id: 5,
    title: "Champion BASIC",
    price: 48.99,
    image:
      "https://img01.ztat.net/article/spp-media-p1/7067458719b744fe81ffee62d3d0b912/abad421e7d8e47f08a2abc1c6ffe07dc.jpg?imwidth=1800",
  },
  {
    id: 6,
    title: "Cotton Hoodie",
    price: 395,
    image:
      "https://pangaia.com/cdn/shop/files/Reclaim-3.0-Hoodie-Reclaim-Jade-Womens-3.jpg?v=1693398673&width=1426",
  },
  {
    id: 7,
    title: "CLASSIC CREWNECK",
    price: 48.99,
    image:
      "https://img01.ztat.net/article/spp-media-p1/10cea44041564f81ac585fc6c8978907/c4c32dbc45dd4dbc9d15087c846538f2.jpg?imwidth=1800",
  },
  {
    id: 8,
    title: "TAPE HOODED",
    price: 79.99,
    image:
      "https://img01.ztat.net/article/spp-media-p1/d391f90be278469ebfdff731800cfccc/6d2101bd672f4e059501f01fe726f315.jpg?imwidth=1800",
  },
];


// Get the products list and elements
const productList = document.getElementById('productList');
const cartItemsElement = document.getElementById('cartItems');
const cartTotalElement =...