JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollama/3.2.0/scrollama.min.js"></script>
<html>
<body>
  <div id='root'>
    <div id='header' class="scroll-step">
      <div class="btn btn-icon burger-menu"></div>
      <div class='github-logo'>logo</div>
      <button class='btn sign-in'>
        Sign in
      </button>
    </div>

    <div id='wrapper'>
      <section id='intro-block' class="scroll-step">
        <div class="intro-text header">The future of building happens together</div>
        <div class="intro-subtitle">Tools and trends evolve, but collaboration endures. With GitHub, developers, agents, and code come together on one platform.</div>
        <div id="intro-controls">
          <div id="intro-signup-field">
            <input class="signup-input" name="signup-email" type="email" placeholder="Enter your email"/>
            <button class='btn sign-up'>Sign yp for GitHub</button>
          </div>
          <button class='btn download-copilot'>Download GitHub Copilot App</button>
        </div>
      </section>

      <section id="video-toggle-block-1" class="scroll-step"></section>
      
      <section id="image-block-1" class="scroll-step"></section>

      <p>bla1</p>
      <p>bla2</p>
      <p>bla2</p>
      <p>bla2</p>
      <p>bla2</p>
      <p>bla2</p>
      <p>bla2</p>
      <p>bla2</p>
      <p>bla2</p>
      <p>bla2</p>
      <p>bla2</p>
      <p>bla2</p>
      <p>bla2</p>
    </div>
  </div>
</body>
</html>

CSS

* {
  box-sizing: border-box;
  color: white;
  padding: 0;
  margin: 0;
}

body {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #040640;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#header {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 10px 20px;
  position: sticky;
  top: 20px;
}

#wrapper {

}

.btn {
  border: 1px solid rgba(255, 255, 255, 0.171);
  background-color: transparent;
  color: white;
  padding: 6px;
  border-radius: 6px;
  transition: all 0.5s;
  cursor: pointer;
}

.btn:hover {
  background-color: #ffffff42;
}

.btn-icon {
  border-radius: 0;
  border: 0;
}
.btn-icon:hover {
  background-color: transparent;
}

.burger-menu {
  width: 24px;
  height: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M4 18L20 18' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M4 12L20 12' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M4 6L20 6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

.github-logo {
  cursor: pointer;
}

#intro-block {
  min-height: 500px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
  margin: auto;
}

.intro-text.header {
  font-size: 3rem;
  line-height: 3.2rem;
}

.intro-subtitle {
  font-size: 1.1rem;
  line-height: 1.3;
}

/* signup & download */
#intro-controls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#intro-controls .btn {
 ...

JavaScript

(async () => {
  const scroller = scrollama();
})();