JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.githubusercontent.com/chocolatechipui/chocolatechip-ui/master/dist/chui-3.8.4.min.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/chocolatechipui/chocolatechip-ui/master/dist/chui-android-3.8.4.min.css">
<nav>
<h1>Page Name</h1>
</nav>
<article>
<section>
<ul class='list'>
<li class='comp'>
<aside>
<img width="48px" src='http://www.mediabistro.com/alltwitter/files/2009/09/twitter_new_default_avatar.png' />
</aside>
<div>
<h3>Item 1</h3>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum mass</p>
</div>
</li>
<li class='comp'>
<aside>
<img width="48px" src='http://www.mediabistro.com/alltwitter/files/2009/09/twitter_new_default_avatar.png' />
</aside>
<div>
<h3>Item 2</h3>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum mass</p>
</div>
</li>
<li class='comp'>
<aside>
<img width="48px" src='http://www.mediabistro.com/alltwitter/files/2009/09/twitter_new_default_avatar.png' />
</aside>
<div>
<h3>Item 3</h3>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum mass</p>
</div>
</li>
<li class='comp'>
<aside>
<img width="48px" src='http://www.mediabistro.com/alltwitter/files/2009/09/twitter_new_default_avatar.png' />
</aside>
<div>
<h3>Kiss</h3>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus,...
JavaScript
$(function() {
$.UISlideout();
$('.slide-out > section').append($('#list-temp').html());
$.UIDeletable({
list: '.list',
callback: function(item) {
var text = $(item).siblings('h3').text();
console.log(text);
}
});
});