JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 80%; margin: 4% auto;">
	<div class="col-md-6 providerAgreement">
		<h1>{{model | phone : provider.ProviderField._name}}</h1>

		<button class="btn btn-lg btn-std digitalKeyboardRemove" ng-click="queryRemoveLastChar()">
			<i class="fa fa-long-arrow-left"></i>
		</button>

		<ng-include src="'partials/digitalKeyboard.html'"></ng-include>
	</div>

	<div class="col-md-6 paymentInformation">
		<div class="providerAgreementHolder" ng-hide="($parent.state.agreement || $parent.state.number) && !showSuccess">
			<i class="glyphicon" ng-class="{'glyphicon-remove-sign': !showSuccess, 'glyphicon-ok-sign': showSuccess}"></i>
			<h1 ng-if="showSuccess">
				Спасибо за платеж!
			</h1>
		</div>

		<div ng-class="{'blur': (!$parent.state.agreement && !$parent.state.number) || showSuccess}">
			<ul>
				<li class="smallLogotype"><img ng-src="/data/logotypes/{{provider._logo}}" />
				<li>Оплата <b>{{$parent.state.provider_name}}</b>.
				<li>{{provider.ProviderField._description}}: <b>{{$parent.state[provider.ProviderField._name] | phone : provider.ProviderField._name || 'не указан'}}</b>.
				<li>Подтвердите ваш номер: <button style="width: 20%" type="button" class="btn btn-default btn-xs">Далее</button>
			</ul>

			<hr />

			<p>Вставьте купюры в купюроприемник</p>
			
			<p>Купюры вводятся по одной</p>

			<ul>
				<li>Вы внесли: <b>{{$parent.state.cash | currency : symbol : fractionSize}}</b>
				<li>К оплате: <b>{{$parent.state.amount | currency : symbol : fractionSize}}</b>
				<li>Комиссия: {{$parent.state.provider_tax}} %
			</ul>

			<hr />
			<div style="text-align: center">
				<button ng-disabled="$parent.state.cash <= 0" class="btn makePayment btn-lg" ng-class="{'btn-success': $parent.state.cash > 0, 'btn-danger': $parent.state.cash == 0}" ng-click="makePayment()">Оплатить</button>
			</div>
		</div>
	</div>
</div>