Tailwind CSS 4 Copy To Clipboard Button

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Copy To Clipboard</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body class="bg-gray-50 flex justify-center items-center min-h-screen p-6 antialiased">

<div class="max-w-md w-full bg-slate-900 border border-slate-800 p-8 rounded-[3rem] shadow-4xl space-y-6" 
       x-data="{ 
         copied: false, 
         code: 'AUTH_KEY_V4_8291_SPECTRAL',
         copy() {
            if (navigator.clipboard && window.isSecureContext) {
               navigator.clipboard.writeText(this.code).then(() => {
                  this.copied = true;
                  setTimeout(() => this.copied = false, 2000);
               }).catch(err => this.fallbackCopy());
            } else {
               this.fallbackCopy();
            }
         },
         fallbackCopy() {
            const el = document.createElement('textarea');
            el.value = this.code;
            el.style.position = 'fixed';
            el.style.left = '-9999px';
            el.style.top = '0';
            document.body.appendChild(el);
            el.select();
            try {
               document.execCommand('copy');
               this.copied = true;
               setTimeout(() => this.copied = false, 2000);
            } catch (err) {
               console.error('Fallback copy failed', err);
            }
            document.body.removeChild(el);
         }
       }">
     <div class="flex items-center justify-between">
        <span class="text-[10px] font-black text-indigo-400 uppercase tracking-[0.4em]">Manifest Key</span>
        <span x-show="copied" x-transition class="text-[9px] font-black text-emerald-400 uppercase tracking-widest bg-emerald-400/10 px-3 py-1 rounded-full">Synchronized</span>
     </div>
     
     <div class="relative group">
        <code class="block w-full bg-slate-950 border border-slate-800 p-6 rounded-2xl text-indigo-300 font-mono text-sm break-all" x-text="code"></code>
        
        <button 
           @click="copy()"
           class="absolute top-1/2 -translate-y-1/2 right-4 h-10 w-10 bg-slate-800 text-slate-400 hover:text-white hover:bg-indigo-600 rounded-xl flex items-center justify-center transition-all cursor-pointer border border-slate-700/50">
           <svg x-show="!copied" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" /></svg>
           <svg x-show="copied" class="h-5 w-5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
        </button>
     </div>

<p class="text-[10px] text-slate-500 font-medium text-center">Copy protocol key for external hub authorization.</p>
  </div>

</body>
</html>