JSFiddle - React, Tailwind, and code Playground

by Ace Tributon

HTML

<style id="phStyle"></style>
<div id="demo"></div>
<script>
var x=(a,b)=>document.querySelectorAll(a).forEach(b),
  add=(a,b)=>x(a,z=>z.innerHTML+=b),
  div=(a,b)=>`<div ${a}'>${b}</div>`,
  click=(a,b)=>x(a,z=>{z.onclick=b;});

</script>
<script>
	var i,
    //arrays of items to clone!
    //The arrays here are the ones with different content
    //And can save time copy and pasting code
		itemName = [
    		`Pearls`,								//goes to cloned panel 1
        `Diamonds`,							//goes to cloned panel 2
        `Sterling Silver`				//goes to cloned panel 3
    ],
    img = [
    		`https://tse1.mm.bing.net/th?id=OIP.WH-lXG5qB_o2ycuRrQGI0QEsDI&pid=15.1&P=0&w=227&h=152`,
        `https://tse2.mm.bing.net/th?id=OIP._sEXymTcDiP9vJC0ZzLF-gEsEb&pid=15.1&P=0&w=165&h=157`,
        `http://www.kay.com/images/products/3725/372579401_MV_ZM.jpg`
    ],
    price = [
    		`$12.99`,
        `$13.99`,
        `$11.89`
    ],
    click = [
    		`pearl`,
        `diamond`,
        `silver`
    ];

for (i=0;itemName[i];i++){
		add("#demo",
         div('class="panel"',
             div('class="header"',
             		itemName[i] 
             )+
             `<img class='img-hold' src=' ${img[i]} '>
         `)+
         div('class="footer"',
         		div('class="price"',`
                Price: ${price[i]}
            `)+
            div(`class="buy ${click[i]}"`,
            	`Purchase`
            )
         )+`<br />`
    );
}
</script>

<script>
/*click('.silver',alert('hello silver!'));
click('.diamond',
		()=>{alert('hello diamond!');}
);
click('.pearl',
		()=>{alert('hello pearl!');}
);*/
</script>
<script>
add('#phStyle',`
* {
  text-align:center;
  font-weight:bold;
  margin:0 auto;
  padding:1% auto;
  font-size:105%;
  transition: 0.7s;
  float:left;
  box-sizing: border-box;
}
#demo{
  width:100%;
  background-color:black;
}
.footer{padding:1%;}

.header, .buy {
  background-color:blue;
  color:white;
}

.img-hold, .footer {
  width:100%;
 ...