JSFiddle - React, Tailwind, and code Playground

by mfen723

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
        <nav class="navbar navbar-collapse-xl navbar-dark fixed-top">
            <div class="container">
                <a class="navbar-brand img fixed-top" href="#"><img src="" style="height: 100px;" class="d-block img-fluid mx-auto" alt=""></a>
                <div class="cta-btn">
                    <a href="#" class="btn btn-danger">Get Started</a>
                </div>
                <button class="navbar-toggler ms-auto collapsed d-flex flex-column justify-content-around" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNavbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="icon-bar bar-top"></span>
                    <span class="icon-bar bar-middle"></span>
                    <span class="icon-bar bar-bottom"></span>
                </button>
                <div class="navbar-collapse collapse" id="collapseNavbar">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="index.html" data-bs-toggle="collapseNavbar" data-bs-target=".navbar-collapse.show">Link</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-bs-toggle="collapseNavbar" data-bs-target=".navbar-collapse.show">Link</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./our-work/index.html" data-bs-toggle="collapseNavbar" data-bs-target=".navbar-collapse.show">Link</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./our-work/index.html"...

CSS

html,
body {
  font-size: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 250px;
}

/* Custom Properties*/
:root {
  --bg-light: #ffffff;
  --bg-dark: #1d1f3c;
  --bg-gradient: linear-gradient(55deg, rgba(21, 90, 166, 1) 33%, rgba(14, 15, 26, 1) 100%);
  --gradient-dark: linear-gradient(55deg, rgba(21, 81, 147, 1) 19%, rgba(14, 15, 26, 1) 67%);
  --gradient-dark-alt: linear-gradient(193deg, rgba(29, 31, 60, 1) 50%, rgba(15, 90, 161, 1) 90%);
  --footer-bg: #000000;
  --footer-text: #bfbfbf;
  --nav-bg: #343653;
  --text-dark: #000;
  --text-grey: #6b6b6b;
  --text-light: #fff;
  --accent-red: #ed0a3f;
  --blue-light: #29abe2;
  --accent-blue: #9ce1ff;
  --blue-dark: #0f5aa1;
  --blue-accent-light: #9be1ff;
  --accent-underline: RGB(204, 255, 21, 1);
  --folio-card-overlay: rgba(0, 0, 0, 0.4);
  --folio-card-hover: rgba(11, 65, 117, 0.7);
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  line-height: 1.6;
  font-weight: 400;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Oswald", sans-serif;
}

/* Nav */
.navbar-dark {
  background: var(--bg-light);
  padding: 2rem 0;
}
.navbar-scroll {
  background-color: var(--bg-dark);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  transition-delay: 0.5s;
  transition: 0.75s ease;
}
.navbar-nav {
  min-height: 100vh !important;
}
.navbar-brand.img {
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.navbar-toggler {
  width: 50px;
  height: 20px;
  position: relative;
  transition: 0.5s ease-in-out;
  outline: none;
  box-shadow: none;
  border: 0;
}
.navbar-toggler:focus,
.navbar-toggler :active, .navbar-toggler.icon-bar:focus {
  outline: none;
  box-shadow: none;
  border: 0;
}
.navbar-toggler span {
  margin: 0;
  padding: 0;
}
.navbar-toggler .bar-top {
  margin-top: 0px;
  transform: rotate(135deg);
}
.navbar-toggler .bar-middle {
  opacity: 0;
  filter: alpha(opacity=0);
}
.navbar-toggler .bar-bottom...

JavaScript

// Nav background

  const navScroll = document.querySelector('.navbar');

            window.addEventListener('scroll', () => {
                if (window.scrollY >= 46) {
                    navScroll.classList.add('navbar-scroll');
                    heroScroll.classList.add('hero-scroll');
                } else if (window.scrollY < 56)
                    navScroll.classList.remove('navbar-scroll');
            });
           
           
 // Hero background
 
    const heroScroll = document.querySelector('.hero');

            window.addEventListener('scroll', () => {
                if (window.scrollY >= 46) {
                    heroScroll.classList.add('hero-scroll');
                } else if (window.scrollY < 56)
                    heroScroll.classList.remove('hero-scroll');
            });
            
  // Hero text
  
  const heroTextScroll = document.querySelector('h1.hero-text');

            window.addEventListener('scroll', () => {
                if (window.scrollY >= 46) {
                    heroTextScroll.classList.add('hero-text-scroll');
                } else if (window.scrollY < 56)
                    heroTextScroll.classList.remove('hero-text-scroll');
            });
  
   // Toggler Bars
   
     const heroIconBarScroll = document.querySelector('.icon-bar.bar-top', '.icon-bar-bar-middle', '.icon.bar-bottom');

            window.addEventListener('scroll', () => {
                if (window.scrollY >= 46) {
                    heroIconBarScroll.classList.add('hero-icon-bar-scroll');
                } else if (window.scrollY < 56)
                    heroIconBarScroll.classList.remove('hero-icon-bar-scroll');
            });