JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js">
        </script> <script src = "//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js">
            
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  <link rel='stylesheet prefetch' href='https://getbootstrap.com/dist/css/bootstrap.min.css'>
        <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {
	background: #282828;
        color:whitesmoke;
}
body button{
	
        color:black;
}

body > .container-fluid {
	margin-top: 5%;
}

.tweets-list {
	padding: 1em;
	background: white;
	border-radius: 1em;
	overflow: hidden;
}

.input-wrap {
	margin-bottom: 0.8em;
}

.media-list {
	margin-top: 1.5em;
}
.media-list p{
	color:whitesmoke;
}
.media {
	margin-top: 2em;
	padding-bottom: 2em;
	border-bottom: 1px solid #e1e8ed;
}

.media-object {
	margin: 0 15px 15px;
}

.media:last-child {
	border-bottom: none;
}

h2 input {
	width: 2em;
	text-align: center;
}


           .border-row {
                padding-bottom: 10px;
                border-bottom: 1px solid #ccc;
                line-height: 2em;
                height: 2em;
            }
            .header {
                background-color: grey;
                font-weight: bold;
                color: white;
            }
            body {
                background: #282828;
            }

            body > .container-fluid {
                margin-top: 5%;
            }

            .tweets-list {
                padding: 20px;
                background: white;
                border-radius: 1em;
        ...

JavaScript

(function($) {
	var Item = Backbone.Model.extend({});

	var ItemCollection = Backbone.Collection.extend({
		model: Item,

		comparator: "favorites",
		initialize: function() {
			this.on('change:favorites', function() {
				this.sort();
			}, this);
			this.on('reset ', function() {
				this.sort();
			}, this);

		},
		changeData: function() {
                    var getTweetData = function() {
			var nameStart = _.random(loremLen - 12);
			return {
				avatar: "http://playground.ahrengot.com/tweets/img/" + _.random(1, 6) + ".jpg",
				name: lorem.substring(nameStart, _.random(nameStart + 5, nameStart + 12)),
				text: lorem.substring(0, _.random(90, 140)),
				favorites: _.random(0, 2000),
				retweets: _.random(0, 500)
			};
		};
		var tweets = [];
		for (var i = 0; i < numTweets; i++) {
			var data = getTweetData();
			data.id = i;
			tweets.push(data);
		};
		this.reset(tweets);
		},
		changeRandomData: function() {
                        var randomIndex = _.random(0, (numTweets-1));
			this.at(randomIndex).set({
				favorites: _.random(0, 5000)
			});
		}
	});

	var ItemView = Backbone.View.extend({
		tagName: "div",
		template: _.template($('#item-template').html()),

		initialize: function() {},
		render: function() {
			var data = this.model.toJSON();
			$(this.el).html(this.template(data));
			return this;
		}
	})

	var AppView = Backbone.View.extend({
		el: $("#app-content"),

		events: {
			"click.btnChangeDataItems": "changeData",
			"click.btnChangeRandomDataItem": "changeRandomData"
		},
		initialize: function() {
			this.collection.bind('sort', this.render, this);
			this.collection.sort();

		},
		render: function() {
			$("#item-table").html('');
                        /*var topItems = itemCollection.first(10);
			_.each(topItems, this.addItem);*/
                   this.collection.each(this.addItem);
		},

		changeData: function(e) {
                   ...