Tailwind input style example

tailwind

Here is an example of an input styled using Tailwind CSS classes:

<label class="block font-bold text-gray-700 text-2xl mb-2">
    Input label
</label>
<input type="text"
       class="block w-full p-3 rounded-lg bg-gray-200 border-gray-300 focus:outline-none focus:bg-white focus:border-gray-500">

In this example, the block class makes the input a block-level element, the font-bold class makes the label text bold, the text-gray-700 class adds a dark gray color to the label text, the text-2xl class makes the label text 2 times the size of the base font, the mb-2 class adds margin to the bottom of the label, the w-full class makes the input take up the full width of its container, the p-3 class adds padding to the input, the rounded-lg class adds rounded corners to the input, the bg-gray-200 class sets the background color to a light gray, the border-gray-300 class sets the border color to a medium gray, the focus:outline-none class removes the focus outline, the focus:bg-white class sets the background color to white on focus, and the focus:border-gray-500 class sets the border color to a dark gray on focus.

You can customize this input by modifying the classes used or by adding additional classes as needed. For example, you can use the placeholder-gray-500 class to set the placeholder text color to a medium gray, or the transition-colors class to add a smooth color transition when the input is focused.

Here is an example of a customized input:

<label class="block font-bold text-gray-700 text-2xl mb-2">
    Input label
</label>
<input type="text"
       class="block w-full p-3 rounded-lg bg-gray-200 border-gray-300 focus:outline-none focus:bg-white focus:border-gray-500 placeholder-gray-500 transition-colors duration-150">

In this example, the placeholder-gray-500 class sets the placeholder text color to a medium gray, and the transition-colors class adds a smooth color transition when the input is focused with a duration of 150 milliseconds.