JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
		<div class="row">
			<div class="col-md-6 col-md-offset-3 center">
				<h1 class="center">Weather Analysis</h1>
				<p class="lead center">Enter The City:</p>
				<div class="form-group">
					<input type="text" class="form-control" name="city" id="city" placeholder="Example: Hong Kong, Shanghai" />
				</div>
				<a id="findMyWeather" class="btn btn-success btn-lg">Track Weather</a>
			</div>
		</div>
	</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

CSS

html, head {
		height:100%;
		width:100%;
	}
	
	.container {
		background-image:url("height.jpg");
		background-size:cover;
		background-position:center;
		height:100%;
		width:100%;
	}
	
	.center {
		text-align:center;
		color:white;
	}

JavaScript

$("#findMyWeather").click(function() {
  alert("button clicked");
});