JSFiddle - React, Tailwind, and code Playground

HTML

<div class="why-us__carousel">
                <div class="carousel__count">
                    <h1 class="count__zero">0</h1>
                    <div class="count__num-item-holder">
                        <h1 class="count-num-item">1</h1>
                        <h1 class="count-num-item">2</h1>
                        <h1 class="count-num-item">3</h1>
                        <h1 class="count-num-item">4</h1>
                        <h1 class="count-num-item">5</h1>
                        <h1 class="count-num-item">6</h1>
                        <h1 class="count-num-item">7</h1>
                        <h1 class="count-num-item">8</h1>
                        <h1 class="count-num-item">9</h1>
                    </div>          
                </div> 
                 <div class="carousel__item">
                    <div class="item__navigation">
                        <a id="arrow-left" class="arrow">
                                <svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <g id="Desktop-HD-Copy-7" transform="translate(-854.000000, -2100.000000)" fill-rule="nonzero">
                                            <g id="Group-3" transform="translate(855.000000, 2101.000000)">
                                                <polyline id="Path" stroke="#979797" points="25.3616433 28.4003541 20 23.0387108 25.3616433 17"></polyline>
                                                <circle id="Oval" stroke="#FFFFFF" cx="23" cy="23" r="23"></circle>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                        </a>
                        <a id="arrow-right" class="arrow">
    ...

SCSS

.why-us{
    @include element("carousel"){
        width: 80%;
        // height: 200px;
        margin: 0 auto;
        position: relative;
        border: 1px solid green;
    }
    .carousel__count{
        position: absolute;
        left: 0%;
        top: 45%;
        // transform: translateY(-20%);
        display: flex;
        border: 1px solid red;

        .count__zero, .count-num-item{
            font-size: 250px;
            line-height: 0;
        }

        .count-num-item{
            
              border: 1px solid red;
              
        
            &:not(:first-child){
                transform: translateY(200px);
            }
        }
    }

    .carousel__item{
        position: relative;
        left: 425px;
        width: 400px;
        height: 400px;
        border: 1px solid blue;
    }

        .item__navigation{
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: -70px;
                display: flex;
                width: 50%;
                justify-content: space-evenly;

                .arrow{
                    cursor: pointer;
                }
            }
}

JavaScript

class WhyUs {
  constructor() {

   //global variables 
   this.arrowRight = document.querySelector('#arrow-right');
   this.arrowLeft = document.querySelector('#arrow-left');
   this.h1Test = document.querySelectorAll('.count-num-item')[0];

   console.log(this.h1Test.offsetHeight);// this isn't working.

   //method calls
   this.events();
  }

  events(){
    this.arrowRight.addEventListener('click', this.next.bind(this));
    this.arrowLeft.addEventListener('click', this.previous.bind(this));
  }

  previous(){
    alert('previous');
  }

  next(){
    alert('next');
  }


}

const whyus = new WhyUs();