JSFiddle - React, Tailwind, and code Playground

by mankhanr

HTML

<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Bilal el Badaoui">
  <meta name="description" content="The best clothes for the best price">
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>S&amp;B Clothes</title>
    <link rel="icon" type="image/x-icon" href="logo/icon.png">
  </head>

  <body id="body">

    >
    <!--faq and language-->
    
     <!-- Adjustment -->
    <div id="reference-line">Reference Line</div>

    <div class="topnav">
      <button class="faq_items">About</button>
      <button class="faq_items">Contact</button>
      <button class="faq_items">F.A.Qs</button>
      <button class="faq_items">Help</button>
      <div class="topnav-right">
        <button type="button" class="btn dropdown-toggle" id="lang" data-bs-toggle="dropdown">
          eng
        </button>
        <ul class="dropdown-menu">
          <li>
            <a class="dropdown-item" href="index.html">English</a>
          </li>
          <li>
            <a class="dropdown-item" href="index_frc.html">French</a>
          </li>
          <li>
            <a class="dropdown-item" href="index_arb.html">Arabic</a>
          </li>
        </ul>
      </div>
    </div>

    <!--Navbar-->

    <nav class="navbar navbar-expand-sm sticky-top" id="navbar1">
      <div class="container-fluid">
        <a class="navbar-brand" href="index.html">
          <img src="logo/logo_img.png" class="rounded" id="navbar_logo">
        </a>
        <button...

CSS

#body
{
    background-color: #e3dcd2;
    scroll-behavior: smooth;
    
    /* Adjustment */
    /* Set Body Position to relative in order for
    absolute positioned reference line
    to work over the body */
    
    position: relative; 
}


/* Navbar */

#navbar1
{
    background-color: #013328;
    z-index: 3;
}

#navbar_logo
{
    height: 60px;
    width: 60px;
    border: 20;
}

#src_btn
{
    border-color: #e3dcd2;
    color: #e3dcd2;
}

#src_btn:hover
{
    background-color: #e3dcd2;
    color: #013328;
}

#navbar_men, #navbar_women, #navbar_children
{
    color: #e3dcd2;
    width: 90px;
}

#navbar_men:hover, #navbar_women:hover, #navbar_children:hover
{
    background-color: #e3dcd2;
    color: #013328;
}

#favorite_btn:hover, #user_btn:hover, #shop_cart_btn:hover
{
    background-color: #e3dcd2;
}

.container_menu 
{
    display: inline-block;
    cursor: pointer;
}
  
.bar1, .bar2, .bar3 
{
    width: 35px;
    height: 5px;
    background-color: #e3dcd2;
    margin: 6px 0;
    transition: 0.4s;
}
  
.change .bar1 
{
    transform: translate(0, 11px) rotate(-45deg);
}
  
.change .bar2 
{
    opacity: 0;
}
  
.change .bar3 
{
    transform: translate(0, -11px) rotate(45deg);
}

/* Caroussel */

#car_text
{
    background-color: #e3dcd2;
    color: #013328;
}

#car_men_btn, #car_women_btn, #car_child_btn
{
    background-color: #013328;
    color: #e3dcd2;
    width: 100px;
}

#car_child_btn
{
    margin-top: 5px;
}

#car_men_btn:hover, #car_women_btn:hover, #car_child_btn:hover
{
    background-color: #cc8b65;
    color: #e3dcd2;
    width: 100px;
}

#car_pic1, #car_pic2, #car_pic3, #car_pic4
{
    border-radius: 5px;
    width: 100%;
}

.carousel-caption
{
    position: sticky;
    bottom: 10%;
    left: 5%;
    z-index: 2;
}

/* Back to top button */

/* Adjustment */


#reference-line {
  position: absolute;
  width: 100%;
  top: 20%;  /* Adjust This to your desired value */
  left: 0;
  
  /* To Remove */
  z-index: 9999;
  background: red;
 ...

JavaScript

/* Send to index*/

function men_index_fn() 
{
    location.href='index_men.html';
}

function women_index_fn() 
{
    location.href='index_women.html';
}

function children_index_fn() 
{
    location.href='index_children.html';
}

/* Change navbar icon */

function change_img_cart()
{
    document.getElementById("shop_cart_ico").src = "Icons/shopping-cart.png";
}

function change_img_cart_2()
{
    document.getElementById("shop_cart_ico").src = "Icons/shopping-cart-white.png";
}

function change_img_fav()
{
    document.getElementById("favorite_btn_ico").src = "Icons/favorite-black.png";
}

function change_img_fav_2()
{
    document.getElementById("favorite_btn_ico").src = "Icons/favorite-white.png";
}

function change_img_user()
{
    document.getElementById("user_btn_ico").src = "Icons/user-black.png";
}

function change_img_user_2()
{
    document.getElementById("user_btn_ico").src = "Icons/user-white.png";
}

/* Back to top button */

/* Adjustment */

 if (
  "IntersectionObserver" in window &&
  "IntersectionObserverEntry" in window &&
  "intersectionRatio" in window.IntersectionObserverEntry.prototype
) {

let observer = new IntersectionObserver(entries => {

  if (entries[0].boundingClientRect.y < 0) {
    document.querySelector('.top_btn').className="top_btn show-button";
  } else {
    document.querySelector('.top_btn').className="top_btn";
  }
});
observer.observe(document.querySelector("#reference-line"));
}

function to_top() 
{
    document.documentElement.scrollTop = 0; 
    document.body.scrollTop = 0;
}

/* Navbar X menu */

function menu(x) 
{
    x.classList.toggle("change");
}