Neon Border Product Card

<!--
  Author: @yokkcode
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="neon-product">
  <div class="neon-product__inner">
    <div class="neon-product__image">📦</div>
    <h4 class="neon-product__title">Wireless Headset</h4>
    <p class="neon-product__price">$89.00</p>
    <button class="neon-product__btn">Add to Cart</button>
  </div>
</div>

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

.neon-product {
  width: 220px;
  padding: 3px;
  border-radius: 18px;
  background: conic-gradient(from 0deg, #ff6ec4, #7873f5, #4ade80, #facc15, #ff6ec4);
  animation: neon-rotate 4s linear infinite;
}
.neon-product__inner {
  background: #0e0e14;
  border-radius: 15px;
  padding: 24px 20px;
  text-align: center;
  font-family: system-ui, sans-serif;
  color: #f4f4f5;
}
.neon-product__image {
  font-size: 42px;
  margin-bottom: 12px;
}
.neon-product__title {
  margin: 0 0 6px;
  font-size: 15px;
}
.neon-product__price {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 800;
  color: #4ade80;
}
.neon-product__btn {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: #1c1c24;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.neon-product__btn:hover {
  background: #26263000;
  background: linear-gradient(135deg, #7873f5, #4ade80);
  transform: translateY(-2px);
}
@keyframes neon-rotate {
  to { transform: rotate(360deg); }
}