JSFiddle - React, Tailwind, and code Playground

by Sunny Jain

HTML

<body>
        <section>
            <header></header>
            <main></main>
        </section>
    </body>

CSS

body{
	padding: 0;
	margin: 0;
}

.wrapper{
	column-count: 3;
}

.user-img{
	border-radius: 50%;
}

JavaScript

var dataLength = data.length;	
		
		var wrapper = $("<div class='wrapper'></div>").appendTo("main");
		
		
		for(var i=0; i<dataLength; i++)
		{
			//creating a placeholder element to hold the contact data such as image and the contact name
			
			var user = $("<div class='user-container'/>").appendTo(wrapper); 			
			var img = $("<img class='user-img' src='" + data.path + "'/>").appendTo(user).addClass('user-img');
			var username = $("<span>" + data.lastName + ", " + data.firstName + "</span>").appendTo(user).addClass('user-name');	
		}