🎨 jcodes-styles

A sleek collection of animated React background components powered by Tailwind CSS 4.1. Perfect for enhancing landing pages, hero sections, and full-screen visual effects.

✨ Features

• ⚡ Fully animated background visuals
• 🎨 Built using Tailwind CSS v4.1
• 🧩 Drop-in React components
• 🪶 Lightweight and tree-shakable
• 🛠️ Easy to customize with utility classes

4 Current Backgrounds (1.0) ✨

• <FireflyMagicBG>Your Content Here</FireflyMagicBG>

• <NeuralNetworkBG>Your Content Here</NeuralNetworkBG>

• <CodeTypingBG>Your Content Here</CodeTypingBG>

• <GeometricWavesBG>Your Content Here</GeometricWavesBG>

New Backgrounds (2.0) ✨

• <MatrixRainBG>Your Content Here</MatrixRainBG>

• <FloatingBubblesBG>Your Content Here</FloatingBubblesBG>

• <StarfieldJourneyBG>Your Content Here</StarfieldJourneyBG>

• <AuroraWavesBG>Your Content Here</AuroraWavesBG>

📦 Installation

npm install jcodes-styles

=================================

✨ TailwindCSS Required
This package uses TailwindCSS for all styles.

To use these components, make sure your project has Tailwind installed and configured.

Install TailwindCSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Then update your tailwind.config.js:

export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
};

Make sure Tailwind is imported in your main CSS file:

@import "tailwindcss";

🧠 Requirements
React 18 or 19

Tailwind CSS v4.1+

Vite, CRA, Next.js, or similar React toolchain