JSFiddle - React, Tailwind, and code Playground

by cwhong

HTML

<h2>
My Favorite Albums
</h2>

<div id="left-column" class="column">
  <div class="album-button" data-album-image="https://images-na.ssl-images-amazon.com/images/I/71nYpz%2B%2BVCL._SL1400_.jpg">
    <div class="album-name">
      Blue Album
    </div>
    <div class="artist">
      Weezer
    </div>

  </div>
</div>
<div id="right-column" class="column">
  Right
</div>

CSS

body {
 font-family: sans-serif;
 text-align: center;
}

.column {
  width: 49%;
  display: inline-block;
}

#left-column {
/*   background-color: lightblue;
   */  
}

#right-column {
  background-color: orange;
  height: 120px;
  background-size: contain;
}

.album-button {
  border: 1px solid;
  border-radius: 5px;
  padding: 10px;
}

.album-button:hover {
  background: #cecece;
  cursor: pointer;
}

.artist {
  font-weight: bold;
  font-size: 10px;
}

.album-name {
  font-size: 12px;
  margin-bottom: 3px;
}

JavaScript

$('.album-button').on('click', function() {
  // run when clicked
	var image = $(this).data('album-image')
  $('#right-column').css('background-image', `url('${image}')`)
})