JSFiddle - React, Tailwind, and code Playground

by cwhong

HTML

<div id="title">
My cool Album Picker
</div>
<div id="content-area">

  <div id="left-panel">
    <!-- HTML !-->
<button class="button-71" role="button" onclick=injectImage()>Third Eye Blind</button>
<button class="button-71" role="button" onclick=injectImage2()>Sublime</button>
<button class="button-71" role="button" onclick=injectImage3()>Green Day</button>

  </div>
  <div id="right-panel">
    Click a button to see album art.
  </div>
</div>

CSS

body {
font-family: sans-serif; 
padding: 20px;
}

#title {
  text-align: center;
  font-weight: bold;
  font-size: 30px;
  margin-bottom: 15px;
}

#content-area {
  display: flex;
  min-height: 100vh;
}

#left-panel {
  flex: 2;
  background-color: #f0f0f0;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

#right-panel {
  flex: 2;
  background-color: #ffffff;
  padding: 20px;
}

button {
  margin-bottom: 10px;
}

/* CSS for this fancy button I got from getcssscan.com */

/* CSS */
.button-71 {
  background-color: #0078d0;
  border: 0;
  border-radius: 56px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: system-ui,-apple-system,system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
  font-size: 18px;
  font-weight: 600;
  outline: 0;
  padding: 16px 21px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-71:before {
  background-color: initial;
  background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
  border-radius: 125px;
  content: "";
  height: 50%;
  left: 4%;
  opacity: .5;
  position: absolute;
  top: 0;
  transition: all .3s;
  width: 92%;
}

.button-71:hover {
  box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
  transform: scale(1.05);
}

@media (min-width: 768px) {
  .button-71 {
    padding: 16px 48px;
  }
}

img {
  width: 200px;
  height: 200px;
}

JavaScript

function injectImage() {
  // Create an image element
  const img = document.createElement("img")

  // Set the image source and alt text
  img.src =
    "https://upload.wikimedia.org/wikipedia/en/thumb/f/f6/Out_of_the_Vein.jpg/220px-Out_of_the_Vein.jpg"
  img.alt = "Sample Image"

  // Find the target div and add the image to it
  const container = document.getElementById("right-panel")
  
  container.innerHTML = '';
  container.appendChild(img)
}

function injectImage2() {
  // Create an image element
  const img = document.createElement("img")

  // Set the image source and alt text
  img.src =
    "https://upload.wikimedia.org/wikipedia/en/thumb/9/94/Sublime_Self-Titled.jpg/220px-Sublime_Self-Titled.jpg"
  img.alt = "Sample Image"

  // Find the target div and add the image to it
  const container = document.getElementById("right-panel")
  
  container.innerHTML = '';
  container.appendChild(img)
}

function injectImage3() {
console.log('2')
  // Create an image element
  const img3 = document.createElement("img")

  // Set the image source and alt text
  img3.src =
    "https://upload.wikimedia.org/wikipedia/en/4/4b/Green_Day_-_Dookie_cover.jpg"
  img3.alt = "Sample Image"

  // Find the target div and add the image to it
  const container = document.getElementById("right-panel")
  
  container.innerHTML = '';
  container.appendChild(img3)
}