Workflow Node

<div class="relative group">
        <div class="absolute -inset-4 bg-indigo-500/10 blur-xl opacity-0 group-hover:opacity-100 transition-all"></div>
        <div
            class="relative w-64 bg-zinc-900 border border-zinc-800 rounded-2xl shadow-2xl p-5 border-l-4 border-l-indigo-500">
            <div class="flex items-center justify-between mb-4">
                <div class="p-2 bg-indigo-500/10 rounded-lg text-indigo-400">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round"></path>
                    </svg>
                </div>
                <div class="flex gap-1">
                    <div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div>
                    <span class="text-[10px] text-emerald-500 font-bold uppercase tracking-widest">Running</span>
                </div>
            </div>
            <h4 class="text-sm font-bold text-white mb-1">Process LLM Response</h4>
            <p class="text-xs text-zinc-500 leading-relaxed mb-4">Filters toxicity and formats output into valid JSON
                schema.</p>
            <div class="flex items-center justify-between pt-4 border-t border-zinc-800">
                <div class="flex -space-x-2">
                    <div class="w-6 h-6 rounded-full bg-zinc-800 border-2 border-zinc-900"></div>
                    <div class="w-6 h-6 rounded-full bg-zinc-700 border-2 border-zinc-900"></div>
                </div>
                <button class="p-1.5 hover:bg-zinc-800 rounded-md text-zinc-500 transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path
                            d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
                            stroke-width="2"></path>
                    </svg>
                </button>
            </div>
            <!-- Connection Ports -->
            <div
                class="absolute top-1/2 -left-2 w-4 h-4 bg-zinc-900 border-2 border-indigo-500 rounded-full -translate-y-1/2 cursor-crosshair hover:bg-indigo-500 transition-colors">
            </div>
            <div
                class="absolute top-1/2 -right-2 w-4 h-4 bg-zinc-900 border-2 border-indigo-500 rounded-full -translate-y-1/2 cursor-crosshair hover:bg-indigo-500 transition-colors">
            </div>
        </div>
    </div>

    <script>
        document.querySelectorAll('button').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const originalText = btn.innerText;
                if (originalText === 'PROCESSING...' || originalText === 'SUCCESS') return;
                btn.innerText = 'PROCESSING...';
                btn.classList.add('opacity-50');
                setTimeout(() => {
                    btn.innerText = 'SUCCESS';
                    btn.classList.remove('opacity-50');
                    setTimeout(() => btn.innerText = originalText, 1500);
                }, 800);
            });
        });
    </script>