JSFiddle - React, Tailwind, and code Playground

HTML

<div class="viewport">
    <div class="prices">
        <table class="prices__table">
            <tr>
                <td><div class="prices__header">предложение 1</div></td>
                <td><div class="prices__header">предложение 2</div></td>
                <td><div class="prices__header">предложение 3</div></td>
            </tr>
            <tr>
                <td>цена 1</td>
                <td>цена 2</td>
                <td>цена 3</td>
            </tr>
            <tr>
                <td>описание 1</td>
                <td>описание 2</td>
                <td>описание 3</td>
            </tr>
        </table>
        <ul class="prices__controls">
            <li class="prices__control prices__control_active">1</li>
            <li class="prices__control">2</li>
            <li class="prices__control">3</li>
        </ul>
    </div>
</div>

CSS

.viewport {
    width: 200px;
    background: lightgrey;
    overflow: hidden;
}
.prices__table {
    border: 1px solid black;
    border-collapse: collapse;
}

.prices__table td {
    border: 1px solid black;
    padding: 0;
}

.prices__header {
    width: 200px;
}

.prices__controls {
    margin: 10px 0 0 0;
    padding: 0;
}

.prices__control {
    display: inline-block;
    vertical-align: top;
    border: 1px solid red;
    border-radius: 100%;
    width: 15px;
    height: 15px;
    text-align: center;
    cursor: pointer;
}

.prices__control_active {
    background: yellow;
}

JavaScript

$('.prices__control').click(function(e) {
    var index = $('.prices__control').index(this);
    
    $('.prices__control').removeClass('prices__control_active');
    $(this).addClass('prices__control_active');
    
    $('.prices__table')
        .css('margin-left', -(index * $('.prices__table td').width()));
});