25 / 28

Pure TailwindMIT licensed

Tailwind URL Input With Protocol

A URL field with a fixed https:// badge welded to its left edge: users type the host, you join the protocol on submit. The CSS original's pattern carries eight backslashes and matches nothing — fixed here.

Live DemoSep 12, 2026

Plain CSSTailwind v4

Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<div class="tif-25 grid min-h-svh w-full place-items-center bg-tif25-bg px-6 py-14 font-tif25-sans" aria-label="URL input with protocol demo">
  <label class="grid w-full max-w-80 gap-1.5">
    <span class="font-tif25-mono text-[10px] tracking-[0.12em] text-tif25-mut uppercase">Website</span>
    <span class="flex items-stretch overflow-hidden rounded-[10px] border border-white/12 bg-tif25-field transition-colors duration-200 focus-within:border-tif25-acc">
      <span class="flex items-center border-r border-white/8 bg-tif25-acc/8 px-3 font-tif25-mono text-xs font-semibold text-tif25-acc select-none" aria-hidden="true">https://</span>
      <input type="text" name="tif25-host" inputmode="url" placeholder="codefronts.com" pattern="[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}.*"
        class="min-w-0 flex-1 border-0 bg-transparent px-3.5 py-3 text-sm font-medium text-tif25-ink outline-none placeholder:text-tif25-mut user-invalid:text-tif25-bad">
    </span>
  </label>
</div>

<div class="tif-25 grid min-h-svh w-full place-items-center bg-tif25-bg px-6 py-14 font-tif25-sans" aria-label="URL input with protocol demo">
  <label class="grid w-full max-w-80 gap-1.5">
    <span class="font-tif25-mono text-[10px] tracking-[0.12em] text-tif25-mut uppercase">Website</span>
    <span class="flex items-stretch overflow-hidden rounded-[10px] border border-white/12 bg-tif25-field transition-colors duration-200 focus-within:border-tif25-acc">
      <span class="flex items-center border-r border-white/8 bg-tif25-acc/8 px-3 font-tif25-mono text-xs font-semibold text-tif25-acc select-none" aria-hidden="true">https://</span>
      <input type="text" name="tif25-host" inputmode="url" placeholder="codefronts.com" pattern="[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}.*"
        class="min-w-0 flex-1 border-0 bg-transparent px-3.5 py-3 text-sm font-medium text-tif25-ink outline-none placeholder:text-tif25-mut user-invalid:text-tif25-bad">
    </span>
  </label>
</div>

@import "tailwindcss";

@theme {
  --color-tif25-bg: #12121a;
  --color-tif25-bg: oklch(0.19 0.015 285);
  --color-tif25-field: #1a1a22;
  --color-tif25-field: oklch(0.23 0.015 285);
  --color-tif25-ink: #f0eeff;
  --color-tif25-ink: oklch(0.95 0.02 290);
  --color-tif25-mut: #b8b6d4;
  --color-tif25-mut: oklch(0.77 0.03 290);
  --color-tif25-acc: #06b6d4;
  --color-tif25-acc: oklch(0.72 0.13 205);
  --color-tif25-bad: #ef4444;
  --color-tif25-bad: oklch(0.63 0.22 27);
  --font-tif25-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tif25-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.tif-25 {
  width: 100%;
}

.tif-25 ::selection {
  background: var(--color-tif25-acc);
  color: #12121a;
}

@import "tailwindcss";

@theme {
  --color-tif25-bg: #12121a;
  --color-tif25-bg: oklch(0.19 0.015 285);
  --color-tif25-field: #1a1a22;
  --color-tif25-field: oklch(0.23 0.015 285);
  --color-tif25-ink: #f0eeff;
  --color-tif25-ink: oklch(0.95 0.02 290);
  --color-tif25-mut: #b8b6d4;
  --color-tif25-mut: oklch(0.77 0.03 290);
  --color-tif25-acc: #06b6d4;
  --color-tif25-acc: oklch(0.72 0.13 205);
  --color-tif25-bad: #ef4444;
  --color-tif25-bad: oklch(0.63 0.22 27);
  --font-tif25-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tif25-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.tif-25 {
  width: 100%;
}

.tif-25 ::selection {
  background: var(--color-tif25-acc);
  color: #12121a;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

npm install tailwindcss @tailwindcss/vite

npm install tailwindcss @tailwindcss/vite

// vite.config.js  ("type": "module" in package.json)
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

// vite.config.js  ("type": "module" in package.json)
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist

@import "tailwindcss";

@theme {
  --color-tif25-bg: #12121a;
  --color-tif25-bg: oklch(0.19 0.015 285);
  --color-tif25-field: #1a1a22;
  --color-tif25-field: oklch(0.23 0.015 285);
  --color-tif25-ink: #f0eeff;
  --color-tif25-ink: oklch(0.95 0.02 290);
  --color-tif25-mut: #b8b6d4;
  --color-tif25-mut: oklch(0.77 0.03 290);
  --color-tif25-acc: #06b6d4;
  --color-tif25-acc: oklch(0.72 0.13 205);
  --color-tif25-bad: #ef4444;
  --color-tif25-bad: oklch(0.63 0.22 27);
  --font-tif25-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tif25-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.tif-25 {
  width: 100%;
}

.tif-25 ::selection {
  background: var(--color-tif25-acc);
  color: #12121a;
}

@import "tailwindcss";

@theme {
  --color-tif25-bg: #12121a;
  --color-tif25-bg: oklch(0.19 0.015 285);
  --color-tif25-field: #1a1a22;
  --color-tif25-field: oklch(0.23 0.015 285);
  --color-tif25-ink: #f0eeff;
  --color-tif25-ink: oklch(0.95 0.02 290);
  --color-tif25-mut: #b8b6d4;
  --color-tif25-mut: oklch(0.77 0.03 290);
  --color-tif25-acc: #06b6d4;
  --color-tif25-acc: oklch(0.72 0.13 205);
  --color-tif25-bad: #ef4444;
  --color-tif25-bad: oklch(0.63 0.22 27);
  --font-tif25-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tif25-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.tif-25 {
  width: 100%;
}

.tif-25 ::selection {
  background: var(--color-tif25-acc);
  color: #12121a;
}

3Fonts used by this demooptional — skip if you have your own type stack

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

Bug fixed. The original's pattern is escaped four times over (\\\\.) and reaches the DOM as a regex that can never match. One backslash here.
user-invalid:text-tif25-bad added, so a malformed host is flagged on blur rather than only on submit.
select-none on the badge: it is chrome, and letting it into a copy of the URL is a papercut.

Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind URL Input With Protocol
Source: https://codefronts.com/components/tailwind-css-input-fields/tailwind-url-input-with-protocol/

A URL field with a fixed https:// badge welded to its left edge: users type the host, you join the protocol on submit. The CSS original's pattern carries eight backslashes and matches nothing — fixed here.
## HTML
```html
<div class="tif-25 grid min-h-svh w-full place-items-center bg-tif25-bg px-6 py-14 font-tif25-sans" aria-label="URL input with protocol demo">
  <label class="grid w-full max-w-80 gap-1.5">
    <span class="font-tif25-mono text-[10px] tracking-[0.12em] text-tif25-mut uppercase">Website</span>
    <span class="flex items-stretch overflow-hidden rounded-[10px] border border-white/12 bg-tif25-field transition-colors duration-200 focus-within:border-tif25-acc">
      <span class="flex items-center border-r border-white/8 bg-tif25-acc/8 px-3 font-tif25-mono text-xs font-semibold text-tif25-acc select-none" aria-hidden="true">https://</span>
      <input type="text" name="tif25-host" inputmode="url" placeholder="codefronts.com" pattern="[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}.*"
        class="min-w-0 flex-1 border-0 bg-transparent px-3.5 py-3 text-sm font-medium text-tif25-ink outline-none placeholder:text-tif25-mut user-invalid:text-tif25-bad">
    </span>
  </label>
</div>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tif25-bg: #12121a;
  --color-tif25-bg: oklch(0.19 0.015 285);
  --color-tif25-field: #1a1a22;
  --color-tif25-field: oklch(0.23 0.015 285);
  --color-tif25-ink: #f0eeff;
  --color-tif25-ink: oklch(0.95 0.02 290);
  --color-tif25-mut: #b8b6d4;
  --color-tif25-mut: oklch(0.77 0.03 290);
  --color-tif25-acc: #06b6d4;
  --color-tif25-acc: oklch(0.72 0.13 205);
  --color-tif25-bad: #ef4444;
  --color-tif25-bad: oklch(0.63 0.22 27);
  --font-tif25-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tif25-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.tif-25 {
  width: 100%;
}

.tif-25 ::selection {
  background: var(--color-tif25-acc);
  color: #12121a;
}
```

Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.

Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind URL Input With Protocol
Source: https://codefronts.com/components/tailwind-css-input-fields/tailwind-url-input-with-protocol/

A URL field with a fixed https:// badge welded to its left edge: users type the host, you join the protocol on submit. The CSS original's pattern carries eight backslashes and matches nothing — fixed here.
## HTML
```html
<div class="tif-25 grid min-h-svh w-full place-items-center bg-tif25-bg px-6 py-14 font-tif25-sans" aria-label="URL input with protocol demo">
  <label class="grid w-full max-w-80 gap-1.5">
    <span class="font-tif25-mono text-[10px] tracking-[0.12em] text-tif25-mut uppercase">Website</span>
    <span class="flex items-stretch overflow-hidden rounded-[10px] border border-white/12 bg-tif25-field transition-colors duration-200 focus-within:border-tif25-acc">
      <span class="flex items-center border-r border-white/8 bg-tif25-acc/8 px-3 font-tif25-mono text-xs font-semibold text-tif25-acc select-none" aria-hidden="true">https://</span>
      <input type="text" name="tif25-host" inputmode="url" placeholder="codefronts.com" pattern="[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}.*"
        class="min-w-0 flex-1 border-0 bg-transparent px-3.5 py-3 text-sm font-medium text-tif25-ink outline-none placeholder:text-tif25-mut user-invalid:text-tif25-bad">
    </span>
  </label>
</div>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tif25-bg: #12121a;
  --color-tif25-bg: oklch(0.19 0.015 285);
  --color-tif25-field: #1a1a22;
  --color-tif25-field: oklch(0.23 0.015 285);
  --color-tif25-ink: #f0eeff;
  --color-tif25-ink: oklch(0.95 0.02 290);
  --color-tif25-mut: #b8b6d4;
  --color-tif25-mut: oklch(0.77 0.03 290);
  --color-tif25-acc: #06b6d4;
  --color-tif25-acc: oklch(0.72 0.13 205);
  --color-tif25-bad: #ef4444;
  --color-tif25-bad: oklch(0.63 0.22 27);
  --font-tif25-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tif25-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.tif-25 {
  width: 100%;
}

.tif-25 ::selection {
  background: var(--color-tif25-acc);
  color: #12121a;
}
```

How this works

The badge is markup, not a pseudo-element. That keeps it selectable-free, correctly sized and trivially swappable:

<span class="flex items-center bg-tif25-acc/8 px-3 text-tif25-acc">https://</span>

It is not part of the value. The input submits the host only; join https:// on the server or in the submit handler, and wrap the result in new URL() inside a try/catch if you want a real check rather than a regex.

Make it yours

Protocol: the badge text — http://, ftp://, or a fixed subdomain like *.myapp.com/.
Colour: --color-tif25-acc drives badge fill, badge text and focus border.
Native validation: switch to type="url" if you prepend the protocol in the value instead.
Strictness: tighten the pattern to a TLD allowlist, or drop it and validate on submit.

Gotchas — read before shipping

type="url" accepts anything with a scheme. It is a smell test, not validation.
The visual prefix never reaches your server. Join it explicitly or you will store bare hostnames.
pattern fires on submit only — add a blur listener if you want inline feedback.

Browser support

Chrome	Safari	Firefox	Edge
111+	16.4+	128+	111+

Everything here is a plain flex layout with no modern-only pseudo; the floor is Tailwind v4's sheet.

Techniques used in this demo