JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<button id="mode">change mode</button>
<div class="container">
    <div class="heading">Good Morning</div>
    <div id="test" class="name-heading">
        <div class="name">Luka.</div>
        <div class="luck">Good Luck!</div>
    </div>
    <div style="height: 400vh; margin-top: 60px">
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quia odit odio laborum sit earum, in officia nihil placeat consectetur nisi iste voluptatibus beatae, eaque. Voluptates recusandae dignissimos accusantium quaerat!</div>
        <div>Eum dolores id ad magnam dolore eligendi veniam, dignissimos corrupti ipsum recusandae placeat officiis dolor quibusdam eius reiciendis ratione vitae adipisci unde voluptates rem beatae deleniti soluta ducimus quisquam. Molestias.</div>
        <div>Enim dolorem nam eveniet, officia architecto debitis culpa expedita quia repellat! Corrupti amet culpa odit, accusantium, debitis repellat, enim delectus, asperiores cum mollitia animi quas nisi minus dolor sapiente ad.</div>
        <div>Repellat expedita ipsam ullam temporibus quae aliquid atque hic veniam quod, qui. Maiores earum iusto, quos ab dolor. Quis eveniet dignissimos magnam deserunt. Quidem esse quaerat, aliquid quo quos enim.</div>
        <div>Hic nihil quas modi veniam, tempore atque ullam mollitia vitae, fuga, pariatur eius! Accusantium, doloribus perferendis iste veniam odio doloremque sunt iure nobis rem architecto natus eligendi excepturi impedit voluptas?</div>
        <div>Voluptatum ipsum saepe, maxime libero obcaecati! Non aperiam similique sequi commodi laudantium doloremque in molestiae autem porro perferendis. Similique quaerat, ratione quam nostrum voluptates voluptate nam modi a vero repellat.</div>
        <div>Eum unde enim quae quos esse tempore deserunt, veritatis excepturi quibusdam rem suscipit, aliquam delectus distinctio quidem aperiam, adipisci vero! Mollitia corporis eligendi rerum commodi dolores alias, dicta obcaecati tenetur.</div>
      ...

CSS

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap');
#mode {
    position: fixed;
    top: 0;
    left: 0;
}
body {
    font-family: 'Noto Sans JP', sans-serif;
    background: #181818;
    color: #FEFEFE;
}
body.dark {
    background: #FEFEFE;
    color: #181818;
}
.container {
    padding: 0 100px;
}
.heading {
    font-size: 89px;
    margin-top: 60px;
}
.name-heading {
    display: flex;
    align-items: baseline;
    position: sticky;
    top: 0;
    background: #181818;
}
body.dark .name-heading {
    background: #FEFEFE;
}
.name-heading.active .name {
    font-size: 55px;
}
.name-heading.active .luck {
    font-size: 21px;
}
.name {
    font-size: 89px;
    color: #3EA6FF;
    transition: font-size .2s;
}
.luck {
    font-size: 34px;
    margin-left: 20px;
    transition: font-size .2s;
}

JavaScript

window.addEventListener('scroll',function(){
	if(document.querySelector('#test').getBoundingClientRect().top === 0){
    	document.querySelector('#test').classList.add('active')
        return
    }else {
    	document.querySelector('#test').classList.remove('active')
        return
    }
})
document.querySelector('#mode').addEventListener('click',function(){
	document.body.classList.toggle('dark')
})