JSFiddle - React, Tailwind, and code Playground

by coryphoenixxx

HTML

<div id='box'>

</div>

CSS

#box {
  width: 20vw;
  height: 20vw;
}

.content-img-elem {
    cursor: pointer;
    border: 2px solid #636363;
    box-sizing: border-box;
    /* min-width: 6vw;
    height: 6vw; */
    margin: 2px;
    transition: 500ms;
    overflow: hidden;
    /*background-color: #636363;*/
}


.content-img-elem img {
    border: 0;
    margin: 0;
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

JavaScript

box = document.getElementById('box')

const contentElem = document.createElement('div');
url = 'https://via.placeholder.com/150'
contentElem.classList.add('content-img-elem');

const img = document.createElement('img')
img.src = url

contentElem.appendChild(img)
box.appendChild(contentElem)