JSFiddle - React, Tailwind, and code Playground

HTML

<title>Weather App</title>
        <script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
        <script type="application/javascript" src="js/app.js"></script>
        <script type="application/javascript" src="js/weather/weatherController.js"></script>
        <script type="application/javascript" src="js/weather/weatherFactory.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script>

<body data-ng-controller="WeatherController">
        <div class="main-wrapper">
            <form class="form-container" ng-submit="Weather.getWeather(inputCity)">
                <input class="input-field" type="text" ng-model="inputCity" placeholder="City">
                <input class="button-style" type="submit" value="Show Weather">
            </form>
        <div class="boxes-container">
            <div class="box" ng-bind-html="locationHTML">
            
            </div>
            <div class="box" ng-bind-html="observationLocationHTML">
            
            </div>
            <div class="box" ng-bind-html="weatherInfoHTML">
            
            </div>
        </div>
        </div>



    </body>

CSS

.main-wrapper {
	width: 960px;
	margin: 0 auto;

}

.form-container {
	width: 200px;
	height: auto;
	margin: 0 auto;
	text-align: center;
}

.form-container input {
	margin-top: 20px;
	border-radius: 5px;
	height: 25px;
}

.input-field {
	width: 100%;
	padding-left: 5px;
}

.box {
	width: 300px;
	height: 300px;
	background-color: rgba(0,0,0,0.3);
	float: left;
	margin-top: 50px;
	display: table;
	text-align: center;
}

.box span {
	display: table-cell;
	vertical-align: middle;
}

div.box:nth-child(n+2) {
	margin-left: 30px;
}

JavaScript

/* app.js */
'use strict';

angular
.module('weatherApp', [
    'weather.factory',
    'weather.controller',
]);
    
/* weatherController.js */
    
'use strict';

angular
.module('weather.controller', ['ngSanitize'])
.controller('WeatherController', [
    '$scope',
    'Weather',
    function($scope, Weather) {
        $scope.weatherData = [];
        Weather.getWeather().success(function(data){
        $scope.weatherData = data;
        console.log($scope.weatherData);
        //First box info (location)
        var city = $scope.weatherData.current_observation.display_location.city
		var country = $scope.weatherData.current_observation.display_location.country_iso3166
		$scope.locationHTML = "<span>In the next two boxes You will see weather conditions in <b>" + city + ", " + country + "</b></span>";
        //Second box info (observation location)
        var observationLocation = $scope.weatherData.current_observation.observation_location.city
		var latitude = $scope.weatherData.current_observation.observation_location.latitude
		var longitude = $scope.weatherData.current_observation.observation_location.longitude
		$scope.observationLocationHTML = "<span>The weather was observed in <b>" + observationLocation + "</b> (" + latitude + ", " + longitude + ")."
		//Third box info (temperature, relative humidity, wind kph)
		var temperature = $scope.weatherData.current_observation.temp_c
		var relHumidity = $scope.weatherData.current_observation.relative_humidity
		var windKph	= $scope.weatherData.current_observation.wind_kph
		$scope.weatherInfoHTML = "<span>Current weather info in <b>" + city + ":<br>Temperature in C: " + temperature + "&deg; <br>Relative humidity: " + relHumidity + "<br>Wind speed: " + windKph + "km/h</span>";
        })
    }
]);

/* weatherFactory.js */

'use strict';

angular
.module('weather.factory', [])
.factory('Weather', [
    '$http',
    function($http) {
        return {
	        getWeather : function(inputCity) {
            	return...