a

Hyperlink/navigation element.

This is a real Read the documentation anchor, taking you somewhere when clicked or tapped.

html

<p class="a-demo">This is a real <a class="a-link a-link--underline" href="https://example.com/docs" target="_self" rel="noopener noreferrer" data-target="_self" style="color:#241430;">Read the documentation<svg class="a-link__ext" width="12" height="12" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 5h5v5M19 5 10 14M7 5H5v14h14v-2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></a> anchor, taking you somewhere when clicked or tapped.</p>
<style>
.a-demo { max-width: 420px; font: 16px/1.6 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px 22px; border-radius: 10px; margin: 0; }
.a-link { font-weight: 600; text-decoration: none; }
.a-link--underline { text-decoration: underline; text-underline-offset: 3px; }
.a-link:hover { opacity: .75; }
.a-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
.a-link__ext { display: none; margin-left: 3px; vertical-align: -1px; }
.a-link[data-target="_blank"] .a-link__ext { display: inline; }
</style>

tailwind

<p class="max-w-[420px] font-sans text-base leading-relaxed text-[#241430] bg-[#FAF7F2] px-[22px] py-5 rounded-[10px] m-0">This is a real <a class="a-link-tw font-semibold hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:rounded-sm underline underline-offset-[3px]" href="https://example.com/docs" target="_self" rel="noopener noreferrer" data-target="_self" style="color:#241430;">Read the documentation<svg class="a-link-tw__ext hidden ml-[3px] -mb-px" width="12" height="12" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 5h5v5M19 5 10 14M7 5H5v14h14v-2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></a> anchor, taking you somewhere when clicked or tapped.</p>
<style>
.a-link-tw[data-target="_blank"] .a-link-tw__ext { display: inline-block; }
</style>

react

export function AElement({
  text = "Read the documentation",
  href = "https://example.com/docs",
  target = "_self",
  accent = "#241430",
  underline = true,
}) {
  return (
    <p style={{ maxWidth: 420, font: "16px/1.6 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: "20px 22px", borderRadius: 10, margin: 0 }}>
      This is a real{" "}
      <a
        href={href}
        target={target}
        rel="noopener noreferrer"
        style={{ color: accent, fontWeight: 600, textDecoration: underline ? "underline" : "none", textUnderlineOffset: 3 }}
      >
        {text}
        {target === "_blank" && (
          <svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true" style={{ marginLeft: 3, verticalAlign: -1 }}>
            <path d="M14 5h5v5M19 5 10 14M7 5H5v14h14v-2" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        )}
      </a>{" "}
      anchor, taking you somewhere when clicked or tapped.
    </p>
  );
}