JSFiddle - React, Tailwind, and code Playground

by Jayna

HTML

<ul>
  <li><img src="http://jayna.liveplan.com/images/iconTrash.png" id="puppies" class="puppies2" alt="puppies"/></li>
  <li><img src="http://jayna.liveplan.com/images/iconTrash.png" id="kittens" class="kittens2" alt="kittens"/></li>
  <li><img src="http://jayna.liveplan.com/images/iconTrash.png" id="aardvark" class="hope" alt="aardvark"/></li>
</ul>

<div class="showMe">SHOW SOME STUFF!</div>

<div>Click on the picture for description.</div>

CSS

* { margin:0;padding:0; }
body { background:#E9EEF5; }

ul {
  list-style-type:none;
}

li {
  height:20px;
  width:16px;
  overflow: hidden;
  display:inline-block;
    float: left;
}

div {
  font:12pt 'Georgia';
  height:50px;
  width:674px;
  margin-left: 10px;
}

.showMe {
    display: none;
}

.selected {
    color: blue;
}

JavaScript

$('#puppies').click(function() {
    $('div').show('showMe');
    $('div').css('color', 'red');
    $('.puppies2').hide();
});

$('#kittens').click(function() {
  $('div').html('Kittens');
  $('.kittens2').hide();
});


$('#aardvark').click(function() {
  $('div').html('Aardvark');
     $('#aardvark').removeClass('hope');
     $(this).addClass('selected');
});