Tailwind CSS React Link

Use responsive link component with helper examples for button link, link color, underline, hover, link style & more.

Colored links

Coloring links can be a great way to distinguish them from your regular text, or add a bit of flair to your website.

Primary link Secondary link Success link Danger link Info link Info link

        
            
      import React from 'react';
  
      export default function App() {
        return (
          <div>
            <a
                href="#!"
                className="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
            >Primary link</a>
            <a
                href="#!"
                className="text-secondary transition duration-150 ease-in-out hover:text-secondary-600 focus:text-secondary-600 active:text-secondary-700"
            >Secondary link</a>
            <a
                href="#!"
                className="text-success transition duration-150 ease-in-out hover:text-success-600 focus:text-success-600 active:text-success-700"
            >Success link</a>
            <a
                href="#!"
                className="text-danger transition duration-150 ease-in-out hover:text-danger-600 focus:text-danger-600 active:text-danger-700"
            >Danger link</a>
            <a
                href="#!"
                className="text-warning transition duration-150 ease-in-out hover:text-warning-600 focus:text-warning-600 active:text-warning-700"
            >Info link</a>
            <a
                href="#!"
                className="text-info transition duration-150 ease-in-out hover:text-info-600 focus:text-info-600 active:text-info-700"
            >Info link</a>
            <div className="bg-neutral-800">
                <a
                    href="#!"
                    className="text-neutral-50 transition duration-150 ease-in-out hover:text-neutral-100 focus:text-neutral-100 active:text-neutral-200"
                >Light link</a>
            </div>
            <a
                href="#!"
                className="text-neutral-800 transition duration-150 ease-in-out hover:text-neutral-800 focus:text-neutral-800 active:text-neutral-900 dark:text-neutral-900 dark:hover:text-neutral-900 dark:focus:text-neutral-900 dark:active:text-neutral-900"
            >Dark link</a>
            <div className="bg-neutral-800">
                <a
                    href="#!"
                    className="text-white transition duration-150 ease-in-out hover:text-neutral-100 focus:text-neutral-100 active:text-neutral-200"
                >White link</a>
            </div>
            <a href="#!" className="text-black transition duration-150 ease-in-out"
            >Black link</a>
        </div>
        );
      }

Hey there 👋 we're excited about TW Elements for React and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Within the sentence

Use color depending on whether it has been visited, is unvisited, or is active.

This is an example of how the basic link looks in the middle of the sentence.

This is an example of how the standard primary link looks in the middle of the sentence.

        
            
      import React from 'react';
  
      export default function App() {
        return (
          <div>
            <p className="mb-4">
                This is an example of how the basic
                <a href="#!" className="underline">link</a> looks in the middle of the
                sentence.
            </p>
            <p>
                This is an example of how the
                <a
                    href="#!"
                    className="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
                >standard primary link</a>
                looks in the middle of the sentence.
            </p>
        </div>
        );
      }

Underline

use the .underline property to specify that an underline should appear under your text.

Hi! I'm a link

        
            
      import React from 'react';
  
      export default function App() {
        return (
          <a href="#!" className="underline">This is a basic link example</a>
        );
      }

Underline on hover

Use a simple visual effect to underline text on hover.

Hi! I'm a link with underline on hover

        
            
      import React from 'react';
  
      export default function App() {
        return (
          <a
          href="#!"
          className="underline decoration-transparent transition duration-300 ease-in-out hover:decoration-inherit"
      >A link with underline on hover</a>
        );
      }

Button link

Use the code below to create a button that looks like an active link.

        
            
      import React from 'react';
      import { TERipple } from 'tw-elements-react';
      
      export default function ButtonLinkExample(): JSX.Element {
          return (
              <TERipple>
                  <button
                      type="button"
                      className="rounded px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-600 focus:text-primary-600 focus:outline-none focus:ring-0 active:text-primary-700 dark:hover:bg-neutral-700">
                      Link
                  </button>
              </TERipple>
          );
      }

If you are looking for more advanced options, try MDBootstrap.

Link

Colored links

Within the sentence

Underline

Underline on hover

Button link

Related resources