Collection of free Tailwind CSS input components from Codepen and other resources.

Related Articles

  1. CSS Input Text
  2. JavaScript Input Text
  3. jQuery Input Text
  4. React Input Text
  5. Vue Input Text
Demo image: Inputs with Icons

Author

  • EL-MOURABITsaber

Made with

  • HTML / CSS

About a code

Inputs with Icons

Simple inputs with icons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.18

Demo image: Input Password

Author

  • Hafiz_Dev

Made with

  • HTML / CSS / JS

About a code

Input Password

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js

Tailwind version: 3.0.18

Demo image: Comment with Tailwind CSS

Author

  • AjayTheWizard

Made with

  • HTML / CSS

About a code

Comment with Tailwind CSS

Comment commponent with title and pill actions.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.19

Demo image: Mentions & Hashtags

Author

  • Scott Windon

Made with

  • HTML / CSS / JS

About a code

Mentions & Hashtags

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js

Tailwind version: 2.2.4

Demo image: Textarea Live Letters Counter with AlpineJS

Author

  • Null78

Made with

  • HTML / CSS / JS

About a code

Textarea Live Letters Counter with AlpineJS

The code is written for textarea but can be implemented for input field.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js

Tailwind version: 2.2.4

Demo image: Input with Label as Placeholder

Author

  • ulyssear

Made with

  • HTML / CSS

About a code

Input with Label as Placeholder

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Simple Blog/Post Form with CKEditor

Author

  • jmebia

Made with

  • HTML / CSS / JS

About a code

Simple Blog/Post Form with CKEditor

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: ckeditor.js

Tailwind version: 2.1.4

Demo image: Post Making Form

Author

  • amirrahman132132

Made with

  • HTML / CSS

About a code

Post Making Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.2

Demo image: Password Generator and Strength Score

Author

  • Scott Windon

Made with

  • HTML / CSS / JS

About a code

Password Generator and Strength Score

AlpineJS password generator with Zxcvbn score checker.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js, zxcvbn.js

Tailwind version: 2.0.2

Demo image: Input Component with Icon

Author

  • HyperUI

Made with

  • HTML / CSS

About a code

Input Component with Icon

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Input Component With Button in Input

Author

  • HyperUI

Made with

  • HTML / CSS

About a code

Input Component With Button in Input

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Input Component with Label in Input

Author

  • HyperUI

Made with

  • HTML / CSS

About a code

Input Component with Label in Input

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Input

Author

  • TailwindUI

Made with

  • HTML / CSS

About a code

Input

Input with inline leading add-on and trailing dropdown.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Lexicon Input Groups with Units

Author

  • TailwindTemplates

Made with

  • HTML / CSS

About a code

Lexicon Input Groups with Units

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Lexicon Input Group with Button

Author

  • TailwindTemplates

Made with

  • HTML / CSS

About a code

Lexicon Input Group with Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Lexicon Success Input

Author

  • TailwindTemplates

Made with

  • HTML / CSS

About a code

Lexicon Success Input

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Input

Author

  • MambaUI

Made with

  • HTML / CSS / JS

About a code

Input

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Comment Form

Author

  • JermineJunior

Made with

  • HTML / CSS

About a code

Comment Form

Simple comminting form.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.4.6

Demo image: Input with Static Text

Author

  • Akhil

Made with

  • HTML / CSS

About a code

Input with Static Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.2.0

Demo image: Input Group

Author

  • GALEUXDEYSINE

Made with

  • HTML / CSS

About a code

Input Group

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 0.3.0