JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en" >

<head>
	<meta charset="UTF-8">
	<title>Firebase Newsfeed</title>
	<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
	<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css">	

</head>
<body>
	<div class="tab-content">
		<div class="tab-item active" id="globe">
			<!-- News Feed Input Start -->
		
			<!-- News Feed Input End -->

			<!-- Card Starts -->
			<div class="loadNewsfeed">

			</div>
			<!-- Card Ends -->
		</div>
	</div>

	<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
		<script type="text/javascript">
		jQuery(window).load(function($){
			atualizaRelogio();
		});
	</script>
	<script type="text/javascript">
		//função data e hora


		function atualizaRelogio(){ 
			var momentoAtual = new Date();

			var vhora = momentoAtual.getHours();
			var vminuto = momentoAtual.getMinutes();
			var vsegundo = momentoAtual.getSeconds();

			var vdia = momentoAtual.getDate();
			var vmes = momentoAtual.getMonth() + 1;
			var vano = momentoAtual.getFullYear();

			if (vdia < 10){ vdia = "0" + vdia;}
			if (vmes < 10){ vmes = "0" + vmes;}
			if (vhora < 10){ vhora = "0" + vhora;}
			if (vminuto < 10){ vminuto = "0" + vminuto;}
			if (vsegundo < 10){ vsegundo = "0" + vsegundo;}

			dataFormat = vdia + "/" + vmes + "/" + vano;
			horaFormat = vhora + ":" + vminuto;

			document.getElementById("data1").innerHTML = dataFormat;
			document.getElementById("hora1").innerHTML = horaFormat;
			$("#form1").focus();


			setTimeout("atualizaRelogio()",1000);
		}

	</script>
</body>
</html>

CSS

.tab-content {
  max-width: 100%;
}
.tab-content .tab-item {
  background: #e7ecf2;
  width: 100%;
  max-width: 100%;
  padding: 5px 10px 50px 10px;
  position: absolute;
  height: 100%;
  top: 0;
  z-index: 0;
  overflow-y: auto;
  transition: all 0.5s ease;
  left: 100%;
}
.tab-content .tab-item::-webkit-scrollbar {
  width: 0px;
}
.tab-content .tab-item::-webkit-scrollbar-thumb {
  background-color: darkgrey;
}
.tab-content .tab-item.active {
  left: 0 !important;
}

.tab-item:nth-child(1) {
  left: calc(1 * 100%) !important;
}

.tab-item:nth-child(2) {
  left: calc(2 * 100%) !important;
}

.tab-item:nth-child(3) {
  left: calc(3 * 100%) !important;
}

.tab-item:nth-child(4) {
  left: calc(4 * 100%) !important;
}

.card {
  background: #fff;
  margin-bottom: 7px;
  padding: 5px 0px 10px 0px;
  border-radius: 5px;
  border: 1px solid #dadada;
  box-shadow: 0px 0px 10px rgba(32, 33, 83, 0.05);
}
.card .header {
  padding: 5px 20px;
}
.card .header .feed-menu {
  margin-top: 12px;
}
.card .header .user-panel .user-img {
  width: 50px;
  height: 50px;
  background-size: cover;
  border-radius: 50%;
}
.card .header .user-panel .user-info {
  margin-left: 15px;
  line-height: 12px;
  margin-top: 10px;
}
.card .body .text {
  padding: 5px 10px;
}
.card .body .img {
  margin-left: -10px;
  width: calc(100% + 20px);
  margin-top: 10px;
}

ul.chat-holder {
  margin-left: -40px;
  max-width: 100%;
}
ul.chat-holder li {
  list-style: none;
  padding: 10px;
  border-bottom: 1px solid #b0b0b0;
  transition: all 0.2s ease;
}
ul.chat-holder li.active {
  transform: scale(3);
  opacity: 0;
}
ul.chat-holder li:last-child {
  border: none;
}
ul.chat-holder li .user-panel .user-img {
  width: 50px;
  height: 50px;
  background-size: cover;
  border-radius: 50%;
}
ul.chat-holder li .user-panel .user-info {
  margin-left: 15px;
  line-height: 12px;
  margin-top: 10px;
}

.chat-content-holder {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background:...

JavaScript

$(function() {
	var feed = new Firebase('https://timeline-140c8.firebaseio.com/');
	var index = 0;
	
	$('.loadNewsfeed').append("<div id='loading_spin'><center><i class='fa fa-2x fa-spinner fa-spin'> </i></center></div>");
	feed.on('child_added', function(snapshot) {
		var data = snapshot.val();
		var card = 
		'<div class="card" style="padding:10px">'+
		'<div class="ui feed">'+
		'<div class="event">'+
		'<div class="label">'+
		'<img src="http://bookstelo.atento.net/website/e_arq_comum/1/images/s_logo.jpg">'+
		'</div>'+
		'<div class="content">'+
		'<a class="pull-right feed-menu" id="deletePost">'+
		'<i class="fa fa-trash lixo"></i>'+
		'</a>'+
		'<div class="date">'+
		data.date+ ' às ' + data.hour +
		'</div>'+
		'<div class="summary">'+
		'<a>'+ 
		data.nomeusuario +
		'</a> publicou'+
		'</div>'+
		'<div class="extra text">'+
		data.desc; if(data.img != "") {
			card +=	'<div class="img">'+
			'<img src="' + data.img + '" />'+
			'</div>';
		} + 
		'</div>'+
		'</div>'+
		'</div>'+
		'</div>'+
		'</div>';
		

		card += '</div></div>';
		$('#loading_spin').hide("fast");
		$('.loadNewsfeed').prepend(card);
	});

	
	
	
	$('input[name="postImg"]').on('change', function() {
		readURL(this, '.camera-preview', 'textarea[name="postImg64"]');
		$('textarea[name="postText"]').attr('placeholder', "Say something about this photo.")
	});
	
	$('.camera').click(function() {
		$('input[name="postImg"]').trigger("click");
		
	});
	


	$('#savePost').click(function() {
		
		var t = $('textarea[name="postText"]').val(),
		m = $('textarea[name="postImg64"]').val(),
		usr = $('select[name="myname"]').val(),
		dt = $('output[name="datetoday"]').val(),
		hr = $('output[name="horatoday"]').val(),
		u = 1;
		
		feed.push({
			userid : u,
			desc : t,
			nomeusuario: usr,
			img : m,
			date : dt,
			hour : hr,

		});


		
		$('textarea[name="postText"]').val('');
		$('textarea[name="postImg64"]').val('');
		$('.camera-preview').html("");
	});

	$('#deletePost').click(function()...