title: Highlight the active nav item on click using Tailwind CSS in React
body: <p>I have a navigation bar like this:</p>
  <pre><code>&lt;nav className=&quot;bg-white shadow dark:bg-gray-800&quot;&gt;
  &lt;div className=&quot;container flex items-center justify-center p-6 mx-auto text-gray-600 capitalize dark:text-gray-300&quot;&gt;
          &lt;Link
                  to=&quot;/home&quot;
                  className=&quot;text-gray-800 transition-colors duration-300 transform dark:text-gray-200 border-b-2 border-blue-500 mx-1.5 sm:mx-6&quot;
          &gt;
                  home
          &lt;/Link&gt;
  
          &lt;Link
                  to=&quot;/invoices&quot;
                  className=&quot;border-b-2 border-transparent hover:text-gray-800 transition-colors duration-300 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6&quot;
          &gt;
                  features
          &lt;/Link&gt;
  
          &lt;Link
          
                  to=&quot;/forms&quot;
                  className=&quot;border-b-2 border-transparent hover:text-gray-800 transition-colors duration-300 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6&quot;
          &gt;
                  forms
          &lt;/Link&gt;
  
          &lt;Link
                  to=&quot;/newForm&quot;
                  className=&quot;border-b-2 border-transparent hover:text-gray-800 transition-colors duration-300 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6&quot;
          &gt;
                  form2
          &lt;/Link&gt;
  &lt;/nav&gt;
  </code></pre>
  <p>I want to change the nav item when it's clicked, but everywhere in Stackoverflow that I've searched I only found solutions for NestJS, Next.js, etc., not React.</p>