SOURCE

const tabBg = document.querySelector('.tab-bg')
const tabs = document.querySelector('.tabs')
tabs.addEventListener('click', (e) => {

    tabBg.style = `left:${e.target.offsetLeft}px`

})

<div class="tabs">
	<div class="tab">
		tab 1
	</div>
	<div class="tab">
		tab 2
	</div>
	<i class="tab-bg"></i>
</div>

.tabs {
    display: flex;
    align-items: center;
    background: #fff;
    width: 200px;
    position: relative;
}

.tab {
    cursor: pointer;
    width: 100px;
    text-align: center;
    position: relative;
    z-index: 99
}

.tab-bg {
    display: block;
    background-color: #c9d7e4dd;
    width: 100px;
    height: 100%;
    position: absolute;
    z-index: 0;
    transition: all .3s ease-in-out;
    left: 0;
}