JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<button class="navver-btn slf-navver-icon-hov btn btn btn--icon btn--dark js--btn-copy" action="Copy to Server" data-ng-click="copyDashboards( $event )" data-ng-mouseover="buttonMouseOver( $event )" data-ng-mouseleave="buttonMouseOver()" data-ng-if="showCopyToServerBtn()"> <span class="btn__icon app-icon app-icon--general-copy-to-server" data-icon-name="'general-copy-to-server'">
                    <svg class="app-icon__svg">
                        <use xlink:href="#general-copy-to-server"></use>
                    </svg>
                </span> </button>
                <button class="navver-btn slf-navver-icon-hov btn btn btn--icon btn--dark" action="Copy to Server" data-ng-click="copyDashboards( $event )" data-ng-mouseover="buttonMouseOver( $event )" data-ng-mouseleave="buttonMouseOver()" data-ng-if="showCopyToServerBtn()"> <span class="btn__icon app-icon app-icon--general-copy-to-server" data-icon-name="'general-copy-to-server'">
                    <svg class="app-icon__svg">
                        <use xlink:href="#general-copy-to-server"></use>
                    </svg>
                </span> </button>

JavaScript

const styles = `
    .js--btn-copy {
      /*display: none;*/
      background-color: red;
    }
    `;
    const styleSheet = document.createElement('style');
    styleSheet.innerHTML = styles;
    styleSheet.classList.add('stylenames');
    document.head.appendChild(styleSheet);