Tailwind CSS Input

Easily create inputs with different status and sizes using our components based on Tailwind CSS.




Input Outline

Use this example to create outline input components.

<div class="input-group-outline input-group">
  <label class="form-label">Outline</label>
  <input type="text" class="form-control" />
</div>

Input Dynamic

Use this example to create easy-to-use dynamic input components.

<div class="input-group input-group-dynamic">
  <label class="form-label">Dynamic</label>
  <input type="text" class="form-control" />
</div>

Input Static

Use this example to create simple and versatile input components for your Tailwind CSS projects.

<div class="input-group input-group-static">
  <label>Static</label>
  <input type="text" class="form-control" />
</div>

Required Scrips

The input component needs a required script file to work, you just need to add the below script file to the bottom of your html file.

<script src="node_modules/@material-tailwind/html/scripts/input.js"></script>
Edit this page on Github