JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<div class="viewport">
    <div class="container">
        <div class="wrapper">
            <div class="header">
                <div class="level">
                    $10
                </div>

                <div class="level">
                    $20
                </div>

                <div class="level">
                    $30
                </div>

                <div class="level">
                    $40
                </div>

                <div class="level">
                    $50
                </div>

                <div class="level">
                    $60
                </div>
                
                <div class="level">
                    $70
                </div>

                <div class="level">
                    $80
                </div>
            </div>
            <div class="body">
                <div class="benefit">
                    <div class="name">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
                    </div>
                    <div class="values">
                        <div class="value">
                            $10
                        </div>

                        <div class="value">
                            $20
                        </div>

                        <div class="value">
                            $30
                        </div>

                        <div class="value">
                            $40
                        </div>

                        <div class="value">
                            $50
                        </div>

                        <div class="value">
                            $60
                        </div>

                        <div class="value">
                            $70
                        </div>

                        <div class="value">
                            $80
                      ...

CSS

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

.viewport {
    width: 480px;
    background: #000;
}

.container {
    width: 100%;
    overflow-x: auto;
    background: rgba(255, 0, 0, 0.5);
}

.wrapper {
    width: 800px;
}

.header {
    background: rgba(255, 255, 0, 0.5);
    white-space: nowrap;
}

.level {
    display: inline-block;
    width: 100px;
    height: 150px;
}

.benefit:nth-child(2n) {
    background: rgba(0, 255, 0, 0.3);
}

.benefit:nth-child(2n+1) {
    background: rgba(0, 255, 0, 0.7);
}

.name {
    position: sticky;
    left: 0;
    max-width: 100vw;
    white-space: normal;
}

.values {
    background: rgba(255, 255, 0, 0.5);
    white-space: nowrap;
}

.value {
    display: inline-block;
    width: 100px;
    height: 50px;
}