JSFiddle - React, Tailwind, and code Playground

by nipheon

HTML

<div id="list">
<ul>
<galleryimage src="http://flickholdr.com/150/150/cute+cat" title="image of a cute cat"></galleryimage>
<galleryimage src="http://flickholdr.com/150/150/big+cat" title="this is a big cat"></galleryimage>
<galleryimage src="http://flickholdr.com/150/150/black+cat" title="look, a black cat"></galleryimage>
<galleryimage src="http://flickholdr.com/150/150/white+cat" title="hey, a white cat"></galleryimage>
<galleryimage src="http://flickholdr.com/150/150/small+cat" title="this should be a small cat"></galleryimage>
<galleryimage src="http://flickholdr.com/150/150/kitty+cat" title="kitty cat"></galleryimage>
</ul>
</div>

<div id="output">
</div>

CSS

ul { list-style-type: none; }
li { width: 150px; float: left; padding : 10px;}
div {clear: both;}

JavaScript

$('galleryimage').each(function(index) {

    var src = $(this).attr('src');
    var title = $(this).attr('title');
    $(this).replaceWith('<li><img src = "' + src + '" alt = "' + title + '" title = "' + title + ' - an image borrowed from flickr." />' + title + '</li>');
});


/* test */

$('#output').text($('#list').html());