JSFiddle - React, Tailwind, and code Playground

HTML

<div class="spoiler"> <div class="spoirel">LISTEN ONLINE<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = 'CLOSE'; this.value = 'CLOSE'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = 'OPEN'; this.value = 'OPEN'; }" style="background: #1E90FF; border: 0px solid #000; color: #ffffff; font-family: arial; font-size: 10px; margin: 0px;font-weight:bold;text-transform:uppercase;float:right;" type="button" value="OPEN" /></div> <div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; text-align:center;padding: 0px;"> <div style="display: none;"> <br />Masukan Kode Widget Kalian Disini</div> </div> </div>

CSS

.spoiler{background:#f9f9f9 url(https://lh3.googleusercontent.com/-CoP7gpji2kI/UAlWXkvzDfI/AAAAAAAABA0/i49o5VKz3F0/h120/gradient2.php.png) repeat-x;border:1px solid #ddd;padding:3px}.spoirel{font-family:arial;font-size:12px;color:#000;margin-bottom:0;font-weight:bold;text-align:left}