search results:

    Get started License Playground Services Free hosting Community
    • + D
    • Light
    • Dark
    Tailwind Elements
    • Getting started
      • Quick start
      • Dark mode
      • Theming
      • Changelog
      • Contribute
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Svelte
      • Vue
    • Content & styles
      • Animations
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Checkbox
      • Datepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
    • Data
      • Charts
      • Tables
    • Methods
      • Ripple
    • Design Blocks
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Team
      • Testimonials
    • Coming Soon
      • Angular
      • Builder
      • React
      • Templates
      • Vue

    Link

    Tailwind CSS Link

    Use responsive link component with helper examples for button link, link color, underline, hover, link style & more. Free download, open-source license.


    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
    Light link
    Dark link
    White link
    Black link
    • HTML
            
                
          <div class="grid-rows-8 grid gap-4">
            <a
              href="#!"
              class="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="#!"
              class="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="#!"
              class="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="#!"
              class="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="#!"
              class="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="#!"
              class="text-info transition duration-150 ease-in-out hover:text-info-600 focus:text-info-600 active:text-info-700"
              >Info link</a
            >
            <div class="bg-neutral-800">
              <a
                href="#!"
                class="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="#!"
              class="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 class="bg-neutral-800">
              <a
                href="#!"
                class="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="#!" class="text-black transition duration-150 ease-in-out"
              >Black link</a
            >
          </div>
          
            
        

    Hey there 👋 we want to make Tailwind Elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

    Share via Dev.to Share via Twitter Share via Facebook Share via Pinterest Share via Reddit Share via StumbleUpon Share via Vkontakte Share via Weibo Share via HackerNews Share via Gmail Share via Email

    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.

    • HTML
            
                
          <p class="mb-4">
            This is an example of how the basic
            <a href="#!" class="underline">link</a> looks in the middle of the
            sentence.
          </p>
          <p>
            This is an example of how the
            <a
              href="#!"
              class="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>
          
            
        

    Underline

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

    Hi! I'm a link
    • HTML
            
                
          <a href="#!" class="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
    • HTML
            
                
          <a
            href="#!"
            class="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.

    • HTML
            
                
          <button
            type="button"
            data-te-ripple-init
            data-te-ripple-color="light"
            class="rounded px-6 pt-2.5 pb-2 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>
          
            
        

    Related resources

    Textarea Text Animations How to make text responsive in Bootstrap How to center text in Bootstrap Typography Buttons Hover effect Paragraphs Tailwind Textarea

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

    • Colored links
    • Within the sentence
    • Underline
    • Underline on hover
    • Button link
    • Related resources
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com