Link

Tailwind CSS and Alpine JS Link

Links are a great way to direct users to a specific page or section of your website.

Default link

An example of a simple link.

Read if bored
HTML 
<a href="#" class="">Read if bored</a>

Link within a text

Using the link component within a text.

Follow us on social media and become our virtual BFF. We promise not to send cat videos (just kidding, we totally will).

HTML 
<p class="">Follow us on <a href="#" class="">social media</a> and become our virtual BFF. We promise not to send cat videos (just kidding, we totally will).</p>

Link with icon

Using the link component within a text.

Find out more about our company

HTML 
<p class="">Find out more <a href="#" class="">about our company
	<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true" stroke="currentColor" class="">
		<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
	</svg></a>
</p>

Button link

An example of a link that looks like a button.

I'm a link
HTML 
<a href="#" class="" role="button">I'm a link</a>

Keyboard Navigation

Key Action
Tab Link gets the focus
Enter Focused link gets selected