JSFiddle - React, Tailwind, and code Playground

HTML

<div class="revenue">
    <div class="revenue-deposit">
        <input placeholder="Введите размер вклада">
    </div>
    <div class="revenue-tariff"></div>
    <div class="revenue-result"></div>
</div>

CSS

body {
    margin: 0;
    
    background: #fcfcfc;
}

.revenue {
    max-width: 300px;
    
    margin: 30px auto;
    padding: 20px;
}

.revenue-deposit input {
    width: 100%;
    
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
    padding: 8px 12px;
}

.revenue,
.revenue-deposit input {
    background: #fff;
    border-radius: 3px;
    border: 1px solid #d8d8d8;
}

.revenue-tariff {
    line-height: 30px;
}

JavaScript

var input  = document.querySelector('.revenue-deposit input'),
    tariff = document.querySelector('.revenue-tariff'),
    result = document.querySelector('.revenue-result');

input.addEventListener('input', function() {

    if ( this.value >= 1000 && this.value <= 100000 ) {    
        tariff.innerHTML = 'Вклад: на 6 месяцев, под 3% в месяц';
        result.innerHTML = 'Доход за весь период: ' + this.value / 100 * 3 * 6 + 'p';
    }
    else if ( this.value >= 100000 && this.value <= 500000 ) {    
        tariff.innerHTML = 'Вклад: на 12 месяцев, под 4% в месяц';
        result.innerHTML = 'Доход за весь период: ' + this.value / 100 * 4 * 12 + 'p';
    }
    else if ( this.value >= 500000 && this.value <= 1500000 ) {
        tariff.innerHTML = 'Вклад: на 18 месяцев, под 5% в месяц';
        result.innerHTML = 'Доход за весь период: ' + this.value / 100 * 5 * 12 + 'p';    
    }

}, false);