InlineLink

1
2
3
4
5
6
7
8
9
10
11
12

<p>
  This is a basic{' '}
  <a
    className="inline-flex hover:opacity-70"
    href="https://example.com"
  >
    <span className="inline-flex gap-x-1 items-center">
      inline link
    </span>
  </a>
  {' '}in a paragraph.
</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

<p>
  This is an inline link with an icon on the{' '}
  <a
    className="inline-flex hover:opacity-70"
    href="https://unkey.com"
  >
    <span className="inline-flex gap-x-1 items-center">
      right
      <span aria-hidden="true">
        <svg
          className="lucide lucide-external-link"
          fill="none"
          height={14}
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
          viewBox="0 0 24 24"
          width={14}
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M15 3h6v6" />
          <path d="M10 14 21 3" />
          <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
        </svg>
      </span>
    </span>
  </a>
  {' '}and on the{' '}
  <a
    className="inline-flex hover:opacity-70"
    href="https://unkey.com"
  >
    <span className="inline-flex gap-x-1 items-center">
      <span aria-hidden="true">
        <svg
          className="lucide lucide-external-link"
          fill="none"
          height={14}
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
          viewBox="0 0 24 24"
          width={14}
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M15 3h6v6" />
          <path d="M10 14 21 3" />
          <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
        </svg>
      </span>
      left
    </span>
  </a>
  .
</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<p>
  This is an inline link that opens in a{' '}
  <a
    className="inline-flex hover:opacity-70"
    href="https://unkey.com"
    rel="noopener noreferrer"
    target="_blank"
  >
    <span className="inline-flex gap-x-1 items-center">
      new tab
      <span aria-hidden="true">
        <svg
          className="lucide lucide-external-link"
          fill="none"
          height={14}
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
          viewBox="0 0 24 24"
          width={14}
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M15 3h6v6" />
          <path d="M10 14 21 3" />
          <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
        </svg>
      </span>
    </span>
  </a>
  .
</p>

1
2
3
4
5
6
7
8
9
10
11
12

<p>
  This is an inline link with{' '}
  <a
    className="text-warning-11 hover:text-warning-12 inline-flex hover:opacity-70"
    href="https://unkey.com"
  >
    <span className="inline-flex gap-x-1 items-center">
      custom styling
    </span>
  </a>
  .
</p>