Interactive Mind Mapper - Copy this Html, Tailwind Component to your project

Eu quero que seja assim "O mapa mental segue um estilo de diagrama organizado em formato de árvore, com foco em uma hierarquia clara e cores para diferenciar cada categoria. Abaixo estão os principais elementos de design que você pode observar e replicar: Elemento central (título) Formato circular, com fundo preto. Título “Team Communication Strategies” em branco, centralizado. Há um anel colorido ao redor do círculo preto, criando um destaque vibrante. A faixa parece ter várias cores (algo como um gradiente ou uma paleta que passa por verde, azul, rosa e amarelo). Estrutura de nível superior (cinco colunas principais) Abaixo do círculo central, há cinco “ramos” que se estendem verticalmente, cada um com um retângulo no topo representando um tópico principal: Performance Expectations Goal Setting Transparency Tools Effective Meetings Cada retângulo de título tem um fundo colorido diferenciado (por exemplo, tons de verde, laranja, azul, etc.), com o texto em branco ou em uma cor escura que contraste bem com o fundo. As linhas que conectam o círculo central aos retângulos são retas e finas, geralmente em cor neutra (preto ou cinza escuro). Subtópicos ou bullet points Abaixo de cada retângulo de título, há uma lista vertical de caixas menores ou textos com marcadores (bullet points). Esses subtópicos também podem ter pequenos blocos de texto ou retângulos, mas geralmente o que se vê é um texto simples em listas. Cada lista segue a cor principal do título ou mantém uma paleta neutra, mas com o texto em preto/cinza escuro, para leitura fácil. Os espaços entre cada item da lista são bem definidos, garantindo boa legibilidade e evitando poluição visual. Tipografia e espaçamento O texto do título principal (no círculo) é grande, em fonte sem serifa (estilo clean e moderno). Nos subtítulos (os retângulos), a fonte é menor que a do título central, mas ainda em destaque (negrito ou um tamanho acima do texto dos bullets). Os bullet points são escritos em uma fonte de tamanho regular, sem serifa, e com boa margem entre eles. Há bastante espaço em branco entre os blocos, deixando o design “arejado” e fácil de navegar visualmente. Uso de cores O fundo geral do diagrama é branco (ou bem claro). O círculo central é preto com texto branco, ganhando destaque imediato. Cada tópico principal (os cinco) tem uma cor distinta, mas todas pertencem a uma paleta de cores vibrantes e harmônicas (verde, laranja, amarelo, azul, rosa, etc.). O anel em volta do círculo é multicolorido, reforçando a ideia de diversidade de tópicos e trazendo um aspecto moderno. Conexões e linhas As linhas que saem do círculo central até os cinco retângulos de título são simples e retas, com espessura fina. Das caixas de título para os bullet points, também há linhas retas que ajudam a guiar o olhar do usuário. A organização é simétrica, mantendo cada coluna bem alinhada, com a mesma largura visual ou distribuição de espaço para cada um dos cinco blocos. Estética geral O design tem um estilo limpo, com boa separação entre seções, tornando fácil entender a hierarquia de informações. As cores fortes contrastam com o fundo branco, criando blocos de informação bem definidos. O círculo central escuro com anel colorido faz o título se destacar como foco principal do diagrama. A escolha de fontes sem serifa e o uso de linhas finas passa uma sensação moderna e profissional."