InfoGraphic Mobile Responsive WebComponents -Circular info boxes

InfoBoxes – Customizable Circular Infographics Web Component

Description:The InfoBoxes component is a React/Next.js customizable infographic tool, crafted primarily with HTML/CSS and enhanced with GSAP animations. This component is perfect for adding engaging visuals to websites and can be tailored to match your design needs.

Features:

• Customization: Easily modify text, colors, and sizes to align with your brand or theme.
• Mobile Responsive: Built to look great on any device, making it ideal for marketers, designers, and developers who value responsiveness.

Installation Instructions

1. Add Component Code: Copy the attached InfoBoxes code to your Next.js/React project in a suitable directory (e.g., components). The code uses Tailwind css for css styling, Please ensure you have tailwind css installed. Refer to chatgpt for installation of tailwind to your nextjs/react project

Import & Implement: Import the component into your page:

import CircularDiv from "@/components/circleig/CircularDiv"

Then, call the component in your code:

<main className="flex flex-col gap-8   md:items-start">
        
        <CircularDiv />
        
      </main>

Enhance your site’s visuals with versatile, plug-and-play solution for creating captivating infographics!