Sportlight Cards

A gradient border with rounded corners applied to any div or text, enhancing content with a colorful, stylish edge

Create Group Effortlessly

Seamless chats, crystal-clear videos, and
premium audio quality

Usage

global.css

@property --border-angle {
  inherits: false;
  initial-value: 0deg;
  syntax: '<angle>';
}

tailwind.config.ts

tailwind.config = {
  theme: {
    extend: {
      animation: {
        border: 'border 4s linear infinite',
      },
      keyframes: {
        border: {
          to: { '--border-angle': '360deg' },
        },
      },
    },
  },
};

Product-Cards Spotlight cards