JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
	<div class="container mt-5">
	  <div class="row text-center">
		<div class="col-md-8 offset-md-2 margin-auto">
		  <form>
			<div class="form-group">
			  <input type="text" class="bs-text form-control" id="bs-text-input" placeholder="Enter text here..." autofocus>
			</div>
		  </form>
		  <div class="card">
			<div class="card-body">
			  <h4 class="card-title human-text"></h4>
			</div>
		  </div> 
		</div>
	  </div>
	</div>

CSS

html {
  position: relative;
  min-height: 100%;
}

body {
	background-color: #f3f3f3;
	margin-bottom: 60px;
}

.container {
  width: auto;
  max-width: 95%;
  padding: 0 15px;
}

.text-muted {
  font-size: 16px;
}

.margin-auto {
	margin: 0 auto;
}


.card {
	margin: 0 auto 2em;
}

JavaScript

var replaceValues = {
    '4' : 'for',
    'b4' : 'before'
}

$('.bs-text').keyup(function (event) {
    newText = event.target.value;
    for (var txt in replaceValues) {
        var temp = new RegExp(txt, 'gim');
        newText = newText.replace(temp, replaceValues[txt]);
    }
    $('.human-text').text(newText);
});