Cyberpunk Animated Border Gradient Card

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="cyber-card-524"><div class="inner"><h3>SYSTEM ONLINE</h3><p>All core modules running with optimal performance.</p></div></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.cyber-card-524 { position: relative; width: 220px; padding: 2px; border-radius: 16px; background: linear-gradient(90deg, #f43f5e, #8b5cf6, #06b6d4, #f43f5e); background-size: 300% 300%; animation: gradient-border-524 4s linear infinite; margin: auto; }
@keyframes gradient-border-524 { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.cyber-card-524 .inner { background: #09090b; padding: 18px; border-radius: 14px; color: #fff; font-family: system-ui, sans-serif; }
.cyber-card-524 h3 { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: #38bdf8; letter-spacing: 1px; }
.cyber-card-524 p { margin: 0; font-size: 11px; color: #71717a; line-height: 1.4; }