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

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