JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html>
<body>
<article class="disckography">
<p><a href="#"><img src="http://onua.com.ua/uploads/posts/2009-12/1260757491_47211481_1249589781_8371726_winter11280.jpg" width="250" height="350" /></a></p>
<p><a href="#"><img src="http://static.novate.ru/files/fusai/winter-gadget-0.jpg" width="250" height="350"/></a></p>
<p><a href="#"><img src="http://swetlanka.ru/wp-content/uploads/2009/12/zima.jpg" width="250" height="350"/></a></p>
</article>
<form action="/bla-bla.php" enctype="text/plain" method="post" id="myForm">
<textarea id="mytextarea" name="myCod"></textarea> <br />
<input type="button" onClick="GetMyCod()" class="GetMyCod" value="Вставить код">
<input type="button" onClick="hideMyCod()" class="hideMyCod" value="Скрыть форму">
<input type="submit" class="postMyCod" value="Отправить код">
</form>
<input type="button" onClick="ShowMyCod()" class="ShowMyCod" value="показать форму">
<script>
function GetMyCod(){
document.getElementById("mytextarea").value = document.body.innerHTML
}
function hideMyCod(){
document.getElementById("myForm").style.display="none";
}
function ShowMyCod(){
document.getElementById("myForm").style.display="block";
}
</script>
</body>
</html>
CSS
.disckography {
height:350px;
width:600px;
margin:20px 0 0 100px;
overflow: hidden;
white-space: nowrap;
font-size: 0;
}
.disckography p {
display: inline-block;
font-size: 12px;
}
#myForm{
position: absolute;
top: 0px;
left: 0px;
display: block;
padding: 5px;
z-index: 2;
}
#mytextarea{
width: 400px;
height: 200px;
}
.GetMyCod, .ShowMyCod, .hideMyCod, .postMyCod{
padding: 20px 10px;
}
.ShowMyCod{
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
}
input[type="button"]:hover{
cursor: pointer;
}