JSFiddle - React, Tailwind, and code Playground

by cwhong

HTML

<div id="container" >
  <div id="left" class='column'>
    <div class="artist-album-tile sublime">
      <div class="artist-name">
        Sublime
      </div>
      <div class="album-title">
        Robbin' the Hood
      </div>
    </div>
    <div class="artist-album-tile blink">
      <div class="artist-name">
        Blink 182
      </div>
      <div class="album-title">
        Dude Ranch
      </div>
    </div>
    <div class="artist-album-tile counting-crows">
      <div class="artist-name">
        Counting Crows
      </div>
      <div class="album-title">
        August and Everything After
      </div>
    </div>
  </div>
  <div id="right" class='column'>
    Click a tile to see the album art.
  </div>
</div>

CSS

html, body, #container {
  background-color: #ccc;
  font-family: sans-serif;
  width: 100%;
  display: flex;
}

.artist-album-tile {
  border: 1px solid black;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 12px;
}

.artist-album-tile:hover {
  cursor: pointer;
  background-color: #989ea6;
}

.artist-name {
  font-size: 12px;
  font-weight: 700;
}

.album-title {
  
}

.column {
  margin: 0;
  flex: 1 0 50%;
  box-sizing: border-box;
}

#right {
  padding: 8px;
}

#right img {
  width: 100%;
}

JavaScript

const sublimeImage = '<img src="https://upload.wikimedia.org/wikipedia/en/7/7b/Sublime-RobbinTheHood.jpg" />'

const blinkImage = '<img src="https://upload.wikimedia.org/wikipedia/en/thumb/2/21/Blink-182_-_Dude_Ranch_cover.jpg/220px-Blink-182_-_Dude_Ranch_cover.jpg" />'

const countingCrowsImage = '<img src="https://upload.wikimedia.org/wikipedia/en/9/95/CountingCrowsAugustandEverythingAfter.jpg" />'

function setImage(imageHtml) {
	$('#right').empty().prepend(imageHtml)
}

$('.sublime').on('click', function() {
  setImage(sublimeImage)
})

$('.blink').on('click', function() {
  setImage(blinkImage)
})

$('.counting-crows').on('click', function() {
  setImage(countingCrowsImage)
})