Circle Menu Component - Copy this Html, Bootstrap Component to your project

This is my code on react js and tailwind css please convert to html and bootstrap import React, { useState } from "react"; import { FaHome, FaUser, FaEnvelope, FaCog, FaInfoCircle, FaArrowLeft } from "react icons/fa"; const CircleMenu = () => { const [activeMenu, setActiveMenu] = useState(null); const [activeSubMenu, setActiveSubMenu] = useState(null); const menuItems = [ { icon: <FaHome />, label: "Home", color: "bg blue 500", image: "https://images.unsplash.com/photo 1480074568708 e7b720bb3f09", subMenuItems: [ { label: "Living Room", image: "https://images.unsplash.com/photo 1484101403633 562f891dc89a" }, { label: "Kitchen", image: "https://images.unsplash.com/photo 1556911220 bff31c812dba" }, { label: "Bedroom", image: "https://images.unsplash.com/photo 1522771739844 6a9f6d5f14af" }, ], }, { icon: <FaUser />, label: "Profile", color: "bg green 500", image: "https://images.unsplash.com/photo 1522075469751 3a6694fb2f61", subMenuItems: [ { label: "Edit Profile", image: "https://images.unsplash.com/photo 1507537297725 24a1c029d3ca" }, { label: "Privacy Settings", image: "https://images.unsplash.com/photo 1614064641938 3bbee52942c7" }, { label: "Account Security", image: "https://images.unsplash.com/photo 1582139329536 e7284fece509" }, ], }, { icon: <FaEnvelope />, label: "Messages", color: "bg yellow 500", image: "https://images.unsplash.com/photo 1526554850534 7c78330d5f90", subMenuItems: [ { label: "Inbox", image: "https://images.unsplash.com/photo 1554474051 0256b98c36f8" }, { label: "Sent", image: "https://images.unsplash.com/photo 1596526131083 e8c633c948d2" }, { label: "Drafts", image: "https://images.unsplash.com/photo 1586339949216 35c2747cc36d" }, ], }, { icon: <FaCog />, label: "Settings", color: "bg purple 500", image: "https://images.unsplash.com/photo 1517694712202 14dd9538aa97", subMenuItems: [ { label: "General", image: "https://images.unsplash.com/photo 1563986768609 322da13575f3" }, { label: "Appearance", image: "https://images.unsplash.com/photo 1516321318423 f06f85e504b3" }, { label: "Notifications", image: "https://images.unsplash.com/photo 1590859808308 3d2d9c515b1a" }, ], }, { icon: <FaInfoCircle />, label: "About", color: "bg red 500", image: "https://images.unsplash.com/photo 1512314889357 e157c22f938d", subMenuItems: [ { label: "Company", image: "https://images.unsplash.com/photo 1486406146926 c627a92ad1ab" }, { label: "Team", image: "https://images.unsplash.com/photo 1522071820081 009f0129c71c" }, { label: "Contact", image: "https://images.unsplash.com/photo 1423666639041 f56000c27a9a" }, ], }, ]; const handleMenuClick = (index) => { setActiveMenu(index); setActiveSubMenu(null); }; const handleSubMenuClick = (index) => { setActiveSubMenu(index); }; const handleBackClick = () => { if (activeSubMenu !== null) { setActiveSubMenu(null); } else { setActiveMenu(null); } }; const renderContent = () => { if (activeMenu === null) { return ( <div className="text center"> <h2 className="text 2xl font bold mb 4">Welcome to Circle Menu</h2> <p>Click on any circle to navigate</p> </div> ); } const item = menuItems[activeMenu]; if (activeSubMenu === null) { return ( <div className="text center"> <h2 className="text 2xl font bold mb 4">{item.label}</h2> <p>Select a sub menu item</p> </div> ); } const subItem = item.subMenuItems[activeSubMenu]; return ( <div className="text center"> <h2 className="text 2xl font bold mb 4">{subItem.label}</h2> <p>You are now viewing the {subItem.label.toLowerCase()} section</p> </div> ); }; return ( <div className="min h screen flex flex col items center justify center bg gray 100"> <div className="relative"> <div className="w 48 h 48 rounded full bg white shadow lg flex items center justify center overflow hidden"> <img src={ activeMenu !== null ? activeSubMenu !== null ? menuItems[activeMenu].subMenuItems[activeSubMenu].image : menuItems[activeMenu].image : "https://images.unsplash.com/photo 1518791841217 8f162f1e1131" } alt="Main circle image" className="w full h full object cover" /> </div> {activeMenu === null && menuItems.map((item, index) => { const angle = (index / menuItems.length) * 2 * Math.PI; const x = Math.cos(angle) * 120; const y = Math.sin(angle) * 120; return ( <button key={index} className={`absolute w 16 h 16 rounded full ${item.color} text white flex items center justify center shadow md transition all duration 300 transform hover:scale 110 focus:outline none focus:ring 2 focus:ring offset 2 focus:ring ${item.color} overflow hidden`} style={{ left: `calc(50% + ${x}px 2rem)`, top: `calc(50% + ${y}px 2rem)`, }} onClick={() => handleMenuClick(index)} aria label={item.label} > <img src={item.image} alt={item.label} className="w full h full object cover" /> </button> ); })} {activeMenu !== null && activeSubMenu === null && menuItems[activeMenu].subMenuItems.map((subItem, index) => { const angle = (index / menuItems[activeMenu].subMenuItems.length) * 2 * Math.PI; const x = Math.cos(angle) * 120; const y = Math.sin(angle) * 120; return ( <button key={index} className={`absolute w 16 h 16 rounded full bg opacity 80 ${menuItems[activeMenu].color} text white flex items center justify center shadow md transition all duration 300 transform hover:scale 110 focus:outline none focus:ring 2 focus:ring offset 2 focus:ring ${menuItems[activeMenu].color} overflow hidden`} style={{ left: `calc(50% + ${x}px 2rem)`, top: `calc(50% + ${y}px 2rem)`, }} onClick={() => handleSubMenuClick(index)} aria label={subItem.label} > <img src={subItem.image} alt={subItem.label} className="w full h full object cover" /> </button> ); })} {(activeMenu !== null || activeSubMenu !== null) && ( <button className="absolute top 8 left 1/2 transform translate x 1/2 bg gray 200 text gray 800 rounded full p 2 shadow md transition all duration 300 hover:bg gray 300 focus:outline none focus:ring 2 focus:ring offset 2 focus:ring gray 400" onClick={handleBackClick} aria label="Back" > <FaArrowLeft /> </button> )} </div> <div className="mt 8 p 4 bg white rounded lg shadow md"> {renderContent()} </div> </div> ); }; export default CircleMenu;