JSFiddle - React, Tailwind, and code Playground

BackgroundImage Playground

by Ttt Yyy

HTML

<!DOCTYPE HTML>
<head>
</head>
<body>
<div class='container'>
 
</div>
</body>

CSS

.row {
  display: flex;
  align-items: center;
}

.image {
  height: 50px;
  width: 50px;
  background-position: center
}

JavaScript

const container = document.getElementsByClassName('container')[0]

const addRow = (url, label, container) => {
	
  let row = document.createElement('div');
  row.className = 'row';
  
  row.innerHTML = `<span class='image' style='background-image:url("${url}")'></span> <span class='label'>${label}</span>`
  
  container.appendChild(row);
}

addRow('https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/snorlax.png', 'Snorlax', container)