search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Migrating to v2
      • Internationalization guide
      • Class customization
      • Icons Integration
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Angular
      • ASP.NET
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • Qwik
      • React
      • Remix
      • Solid
      • Svelte
      • SvelteKit
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • 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
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Autocomplete
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Multi range slider
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • Design Blocks
      • Admin Charts
      • Admin Complex
      • Admin Forms
      • Admin Maps
      • Admin Navigation
      • Admin tables
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Stats admin
      • Team
      • Testimonials
    • Tools
      • Button generator
      • Card generator
      • Flexbox generator
      • Footer generator
      • Form builder
      • Grid generator
      • Icon generator
      • Instagram Filters generator
      • Logo generator
      • Table generator
      • Typography generator
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • Resources
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips

    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
            
                
          <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
          >
          
            
        

    Hey there 👋 we're excited about TW elements 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.

    • 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
    • javascript
            
                
          <button
            type="button"
            data-twe-ripple-init
            data-twe-ripple-color="light"
            class="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>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Ripple,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Ripple });
          
            
        

    Related resources

    Tutorials:

    navbar colors hover state focus active and others text buttons sizing footer

    Extended Docs:

    colors hover effects typography breadcrumbs footer mega menu navbar offcanvas scrollspy sidenav buttons list group paragraphs tables center text dark theme gradient text letter spacing position spacing text bold text color text decoration text shadow

    Generators and builders:

    Form drag & drop Typography SVG icon Instagram Filters button card table flexbox logo grid footer

    Design System (Figma):

    introduction size matters low contrast vs low aesthetics do not start with the roof design system plan the process principles tips and tricks
    • 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
    © 2024 Copyright: MDBootstrap.com

    Access restricted

    To view this section you must have an active PRO account

    Log in to your account or purchase an TWE subscription if you don't have one.

    Buy TWE PRO