devsnips
Search docs, APIs, guides…

Component

Dark Mode Input

Input fields designed for dark backgrounds with terminal styles

  • Component
  • Tailwind
  • MIT

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/input/dark-mode/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Input/dark-mode
registry path: Tailwind/Components/Input/dark-mode

Source

Implementation

code.html 
<!-- Dark Mode - Default -->
<div class="p-6 bg-slate-900 rounded-xl">
  <label class="block text-sm font-medium text-gray-300 mb-2">Email</label>
  <input type="email" placeholder="[email protected]" class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
</div>

<!-- Dark Mode - Subtle Border -->
<div class="p-6 mt-4 bg-slate-900 rounded-xl">
  <label class="block text-sm font-medium text-gray-400 mb-2">API Key</label>
  <input type="password" placeholder="sk-..." class="w-full px-4 py-3 bg-slate-800 border border-slate-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-blue-500 transition-colors" />
</div>

<!-- Dark Mode - Glow Effect -->
<div class="p-6 mt-4 bg-slate-900 rounded-xl">
  <label class="block text-sm font-medium text-gray-400 mb-2">Username</label>
  <input type="text" placeholder="username" class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-purple-500 focus:shadow-[0_0_0_2px_rgba(168,85,247,0.2)] transition-all" />
</div>

<!-- Dark Mode - Terminal Style -->
<div class="p-6 mt-4 bg-black rounded-xl font-mono">
  <label class="block text-sm font-medium text-green-400 mb-2">$ command</label>
  <div class="flex items-center">
    <span class="text-green-400 mr-2">›</span>
    <input type="text" placeholder="Enter command..." class="flex-1 bg-transparent text-green-400 placeholder-green-700 focus:outline-none" />
  </div>
</div>
26 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/input/dark-mode
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/input/dark-mode/

Install: npx devsnips add
Tailwind/Components/Input/dark-mode

This is the Dark Mode Input — Input fields designed for dark backgrounds with terminal styles

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://components/input/dark-mode