JSFiddle - React, Tailwind, and code Playground

by Jeremy Sparks

HTML

<body>

    	 <div class="container-fluid">
             
        </div>          
   </body>

CSS

.banner {
	background-color: #bada55;
}

.container-fluid {
	margin-top: 66px;
}

	.malok {
		min-height: 450px;
		color: #fff;
	}

		.term {
			font-family: 'Raleway', sans-serif;
			font-size: 32pt;
			font-weight: 800;
			border-right: 2px solid #fff;
			margin-bottom: 0px;
			margin-right: 3px;
		}

		.icon {
			vertical-align: bottom;
		}

		.definition {
			font-family: 'Raleway', sans-serif;
			font-size: 16pt;
			font-weight: 400;
			line-height: 0.9em;
			border-top: 2px solid #fff;
			border-bottom: 2px solid #fff;
			padding: 6px 0 6px 0;
		}

		.eg {
			font-family: 'Raleway', sans-serif;
			font-size: 12pt;
			font-weight: 400;
			font-style: italic;
			line-height: 0.95em;
		}

		.reddy {
			background-color: #C26647;
		}
		.bluey {
			background-color: #449BC1;
		}
		.yellowy {
			background-color: #F3C74F;
		}
		.greeny {
			background-color: #85B517;
		}
		.tanny {
			background-color: #D7D5B7;
		}
		.darky {
			background-color: #292929;
		}
		
		.size-32 {
			font-size: 32pt;
		}

.closer {
	color: #666;
}

	.list-group-item {
		background-color: transparent;
		font-family: 'Raleway', sans-serif;
		font-size: 16pt;
		font-weight: 400;
		line-height: 0.9em;
	}

JavaScript

function word(term, def, example)
{
 this.term = term;
 this.def = def;
 this.example = example;
}

var lexicon = ['tumblr', 'yeet', 'thot'];

var color = ['reddy', 'bluey', 'greeny', 'tanny', 'darky'];

for (var i = 0; i < lexicon.length; i++) {

	$.getJSON('http://api.urbandictionary.com/v0/define?term=' + lexicon[i],
		function(data){
			lillylivered = [];
			lillylivered.push(new word(data.list[0].word, data.list[0].definition, data.list[0].example));
			console.log(lillylivered);

			$('.container-fluid').html('<div class="row message unread">' + 
			' <div class="col-xs-12 col-sm-6 col-lg-3 malok ' + color[i] + ' id="">' +
			'<div class="row dict">' + 
			'<div class="col-xs-9 col-sm-9 col-lg-9">' + 
			'<h3 class="term term0">' +
			lillylivered[0].term + 
			'</div><div class="col-xs-3 col-sm-3 col-lg-3">' +
			'<div class="col-xs-3 col-sm-3 col-lg-3">' + 
			' <span class="step size-32"><i class="icon ion-ios7-world"></i></span>' +
			'</div></div>' + 
			'<div class="row dict"><div class="col-xs-12 col-sm-12 col-lg-12">' +
			'<p class="definition definition0">' + 
			lillylivered[0].def +
			'</p><p class="eg eg0">' + 
			lillylivered[0].example + 
			'</p></div></div></div>'
			);
	}
)};