JSFiddle - React, Tailwind, and code Playground

by Loxos

HTML

<div class="newsroom"></div><div class="image"></div>

CSS

.newsroom-col {
    float:left;
        width:280px;
}

.newsroom-item {
    /*border:solid 1px #000000;*/
    border-radius: 0 0 4px 4px;
    margin:10px;
    margin-bottom:15px;
    padding-left:17px;
    padding-top:14px;
    padding-bottom:10px;
    color: #5b5c60;
    box-shadow: 0px 1px 5px 1px #ccc;
    font-family:Verdana, Geneva, sans-serif;
}

.newsroom-item-twitter {
    border-top: solid 4px #00aeed;
    background-repeat:no-repeat;
    background-position:right 10px top -2px;
    background-image:...

JavaScript

var addItems = function(cols, items){
	var columns = [];
	for(var i = 0; i < cols; i++){
		addColumn(i);
		columns.push({id:i, height:0});
	}
    console.log(columns);
	for(var i = 0; i < items.length; i++){
        console.group("Adding item #" + i);
        
		var col = columns[0];
        columns.splice(0,1);
		addItem(col, items[i]);
		col.height = $(".newsroom-col-" + col.id).height();
		
		
		var newPosition = cols - 1;
		while(newPosition > 0 && columns[newPosition -1].height > col.height){
			newPosition--;
        }
        console.log(columns);
        console.log(newPosition);
        console.log(col);
		columns.splice(newPosition,0,col);
        console.groupEnd();
	}
	return true;
};

var addItem = function(col, item){
    var elem = document.createElement("div");
    elem.className = "newsroom-item newsroom-item-" + item.type + " newsroom-item-" + item.id;
    
    var monthName = new Array("","Jan", "Feb", "Mär", 
    "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", 
    "Okt", "Nov", "Dez");
    var d = new Date(item.date * 1000);
    var currentDate = d.getDate();
    var currentMonth = d.getMonth() + 1;
    var currentYear = d.getFullYear();
    var currentHour = d.getHours();
    var currentMinute = d.getMinutes();
    if(currentMinute < 10){
        currentMinute = "0" + currentMinute;
    }
    var currentSuffix = ( currentHour < 12 ) ? "AM" : "PM";
    var currentHourUS = (( currentHour < 12 ) ? currentHour : currentHour - 12) || 12;
    
	switch(item.type) {
		case "youtube":
            var author = document.createElement("div");
            author.className = "newsroom-author";
            var profileImage = document.createElement("img");
            profileImage.src = item.header.img;
            author.appendChild(profileImage);
            var name = document.createElement("span");
            name.appendChild(document.createTextNode(item.header.name));
            name.appendChild(document.createElement("br"));
            var subtitle =...