JSFiddle - React, Tailwind, and code Playground

by Abdrey Katrusha

HTML

<div class="menu" id="see">
    <div style="clear: both"></div>
</div>
<h1 class="pvo"> Добавление картинки </h1>
<div class="penel">
    
    <button  data-background='background-color: red;' id="redScin"><img src="http://cs314418.vk.me/v314418541/856e/Q5n3Ku9PO0g.jpg"/>Собачка</button>
    <button  data-background='background-color: blue;' id="blueScin"><img src="http://cs417030.vk.me/v417030227/d50/CHLRsDaHNmE.jpg"/>Котик</button>
    <button  data-background='background-color: yellow' id="djigurda"><img src="https://pbs.twimg.com/profile_images/1295072720/djigurda_normal.jpg"/>Ежик</button>
    
</div>

CSS

.panel {
    border-top: 15px solid black;
}
.menu {
    border: 5px solid black;
    width: 600px;
    min-height: 200px;
}

.blockMod, #myid {
    width: 80px;
    height: 80px;
    border: 1px solid;
    margin-top: 9px;
    margin-left: 14px;
    margin-bottom: 5px;
    float: left;
}
button {
    width: 80px;
    height: 80px;
    
}

JavaScript

document.getElementById("redScin").onclick = function () {
    
    var parentElem = document.body.children[0];

    var newDiv = document.createElement('div');
newDiv.className = 'blockMod';
newDiv.id = 'myid';
    newDiv.innerHTML = 'Red';
    

  parentElem.insertBefore(newDiv, parentElem.firstChild);
    document.getElementById("myid").style.backgroundImage = "url(http://cs314418.vk.me/v314418541/856e/Q5n3Ku9PO0g.jpg)";
    
}
document.getElementById("blueScin").onclick = function () {
    var parentElem = document.body.children[0];
    
    var newDiv = document.createElement('div');
newDiv.className = 'blockMod';
newDiv.id = 'myid';
    newDiv.innerHTML = 'Blue';

  parentElem.insertBefore(newDiv, parentElem.firstChild);
    document.getElementById("myid").style.backgroundImage = "url(http://cs417030.vk.me/v417030227/d50/CHLRsDaHNmE.jpg)";
}
document.getElementById("djigurda").onclick = function () {
    
    var parentElem = document.body.children[0];

    var newDiv = document.createElement('div');
newDiv.className = 'blockMod';
newDiv.id = 'myid';
    newDiv.innerHTML = 'Джигурда';

  parentElem.insertBefore(newDiv, parentElem.firstChild);
    document.getElementById("myid").style.backgroundImage = "url(https://pbs.twimg.com/profile_images/1295072720/djigurda_normal.jpg)";
}
 var picture = document.getElementsById('myid')
 var bottom = picture.style.bottom;
bottom = parseInt(bottom);
picture.style.bottom=(bottom + 100)+"px";