JSFiddle - React, Tailwind, and code Playground

by rgthree

HTML

<ul id="list"></ul>

CSS

* {box-sizing: border-box;}
figure, picture {
    display: block; margin: 0px; padding: 0px; font-size: 0px;
}
#list {
    margin: 0px auto; padding: 0px;
    max-width: 400px;
    list-style: none;
}
.item {
    box-shadow: 0px 2px 5px rgba(0,0,0,0.25);
    padding: 0px;
    margin: 10px;
    overflow: hidden;
}
.item figure {
    max-height: 200px;
    overflow: hidden;
}

JavaScript

var onItemClick = function(e) {
    var target = e.currentTarget;
    var id = target.dataset.id
    
	var frag = document.createDocumentFragment();
    var article = document.createElement('article');
    
    var figure = document.createElement('figure');
    var picture = document.createElement('picture');
    var img = document.createElement('img');
    img.src = item.image.src;
    picture.appendChild(img);
    figure.appendChild(picture);
    article.appendChild(figure);    
    
    var h2 = document.createElement('h2');
    h2.textContent = item.title;
    article.appendChild(h2);

    var p = document.createElement('p');
    p.textContent = item.body;
    article.appendChild(p); 
    
    frag.appendChild(article);    
    
    document.body.appendChild(frag);
    
}



var lipsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit in eros non gravida. Maecenas feugiat consectetur libero, vitae elementum augue maximus sit amet. Etiam dictum nulla iaculis blandit ornare. Nullam imperdiet sed purus ut hendrerit. Pellentesque convallis libero aliquet metus ullamcorper, vel ultricies diam tempor. Proin nibh nisi, pulvinar et tristique quis, malesuada eget odio. Vestibulum egestas ipsum vel leo auctor pharetra. Vestibulum id elit at risus blandit laoreet in eget lacus. In sed euismod purus, quis consequat sem. Sed id ex quam. Vestibulum pellentesque ac augue et porttitor. Sed massa augue, vehicula eu semper quis, scelerisque a odio. Etiam gravida id justo vitae placerat. Proin dictum elementum ante eleifend tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas odio lacus, tristique non viverra eget, condimentum vel ipsum. Praesent orci odio, finibus in imperdiet vitae, dapibus non odio. Aenean pretium nisl rhoncus, vehicula sapien ut, hendrerit dolor. Donec fringilla hendrerit neque, vel cursus dui ultricies ut. Quisque dignissim ac nunc a porta. Praesent dignissim, nibh nec malesuada molestie, dui erat...