search results:

    • Standard
    • React
    License Free hosting Learn Services Community
    • + D
    • Light
    • Dark
    • System
    logo Tailwind Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Contribute
      • Internationalization guide
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Remix
      • Solid
      • Svelte
      • 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
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • 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
      • 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
      • Templates
      • Vue
    • ResourcesNew
      • 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 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
    • javascript
            
                
          <button
            type="button"
            data-te-ripple-init
            data-te-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,
            initTE,
          } from "tw-elements";
          
          initTE({ 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

    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
    © 2023 Copyright: MDBootstrap.com