JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="20.914" height="20.914" viewBox="0 0 20.914 20.914">
  <g id="Group_119" data-name="Group 119" transform="translate(-652 -8)">
    <g id="Ellipse_18" data-name="Ellipse 18" transform="translate(652 8)" fill="none" stroke="#fff" stroke-width="2">
      <circle cx="10" cy="10" r="10" stroke="none"/>
      <circle cx="10" cy="10" r="9" fill="none"/>
    </g>
    <line id="Line_34" data-name="Line 34" x1="3" y1="3" transform="translate(668.5 24.5)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="2"/>
  </g>
</svg>

CSS

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    background: red;
}
div {
    width: 50vw;
    height: 50vh;
    background: red;         
    margin: auto;            
    position: fixed;
    z-index: 3;
}

p {
    width: 100%;
    height: 500vh;
    background: blue;
    position: absolute;
    top: 100%;
}

JavaScript

window.addEventListener('scroll',function(e){
 	console.log(e)
 })