We just released 290+ PRO Blocks for React and Tailwind CSS. Check them out
Tailwind CSS Input Number
Get started with our number input components styled with Tailwind CSS. Perfect for creating user-friendly numeric inputs in forms and applications, with support for validation and custom controls.
Basic Input Number with Select
Use this example to create a number input with select functionality. Combines Tailwind CSS form utilities with custom controls for a seamless user experience.
1<div class="w-full max-w-sm min-w-[200px]">
2 <div class="relative">
3 <select
4 class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow cursor-pointer appearance-none">
5 <option value="1">1</option>
6 <option value="2">2</option>
7 <option value="3">3</option>
8 <option value="4">4</option>
9 </select>
10 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.2" stroke="currentColor" class="h-5 w-5 ml-1 absolute top-2.5 right-2.5 text-slate-700">
11 <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
12 </svg>
13 </div>
14</div>
15Input Zip Code
Looking for a zip code input? This component provides a clean interface using Tailwind CSS validation utilities, complete with helper text for better user guidance.
Your text helps us to provide location-specific services.
1 <div class="w-full max-w-sm min-w-[200px]">
2 <label class="block mb-1 text-sm text-slate-800 font-semibold antialiased">
3 Enter Zip Code
4 </label>
5 <input type="number" inputmode="numeric" class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow" placeholder="ZIP code (02011)" maxlength="5" id="zipInput" />
6 <p class="flex items-center mt-2 text-xs text-slate-500">
7 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 mr-2">
8 <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd"></path>
9 </svg>
10 Your text helps us to provide location-specific services.
11 </p>
12</div>
13
14<script>
15 document.getElementById('zipInput').addEventListener('input', function (e) {
16 // Limit to 5 digits by updating the value manually
17 const input = e.target;
18 input.value = input.value.slice(0, 5);
19 });
20</script>
21Input Phone Number
Transform your phone inputs with this example featuring Tailwind CSS dropdown integration. The country code selector adds international support to your forms.
1 <div class="w-full max-w-sm min-w-[200px] mt-4">
2 <label class="block mb-1 text-sm text-slate-800 font-semibold antialiased">
3 Enter Phone Number
4 </label>
5 <div class="relative mt-2">
6 <div class="absolute top-2 left-0 flex items-center pl-3">
7 <button id="dropdownButton" class="h-full text-sm flex items-center bg-transparent text-slate-700 focus:outline-none">
8 <span id="dropdownSpan">+33</span>
9 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4 ml-1">
10 <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
11 </svg>
12 </button>
13 <div class="h-6 border-l border-slate-200 ml-2"></div>
14 <div id="dropdownMenu" class="min-w-[150px] absolute left-0 w-full mt-10 hidden bg-white border border-slate-200 rounded-md shadow-lg z-10">
15 <ul id="dropdownOptions">
16 <li class="px-4 py-2 text-slate-600 hover:bg-slate-50 text-sm cursor-pointer" data-value="+33">
17 France (+33)
18 </li>
19 <li class="px-4 py-2 text-slate-600 hover:bg-slate-50 text-sm cursor-pointer" data-value="+49">
20 Germany (+49)
21 </li>
22 <li class="px-4 py-2 text-slate-600 hover:bg-slate-50 text-sm cursor-pointer" data-value="+34">
23 Spain (+34)
24 </li>
25 <li class="px-4 py-2 text-slate-600 hover:bg-slate-50 text-sm cursor-pointer" data-value="+1">
26 USA (+1)
27 </li>
28 </ul>
29 </div>
30 </div>
31 <input type="tel" class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pr-3 pl-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow" placeholder="324-456-2323" pattern="[0-9]*" inputmode="numeric" maxlength="12" id="phoneNumberInput" />
32 </div>
33</div>
34
35<script>
36 // Toggle dropdown menu visibility
37 document.getElementById('dropdownButton').addEventListener('click', function (event) {
38 event.stopPropagation(); // Prevent event bubbling
39 const dropdownMenu = document.getElementById('dropdownMenu');
40 dropdownMenu.classList.toggle('hidden');
41 });
42
43 // Update country code when an option is selected
44 document.getElementById('dropdownOptions').addEventListener('click', function (event) {
45 if (event.target.tagName === 'LI') {
46 const dataValue = event.target.getAttribute('data-value');
47 document.getElementById('dropdownSpan').textContent = dataValue;
48 document.getElementById('dropdownMenu').classList.add('hidden');
49 }
50 });
51
52 // Close the dropdown if clicked outside
53 document.addEventListener('click', function (event) {
54 const dropdownMenu = document.getElementById('dropdownMenu');
55 const isClickInside =
56 document.getElementById('dropdownButton').contains(event.target) ||
57 dropdownMenu.contains(event.target);
58
59 if (!isClickInside) {
60 dropdownMenu.classList.add('hidden');
61 }
62 });
63
64 // Limit input to numeric values only and restrict length
65 document.getElementById('phoneNumberInput').addEventListener('input', function (e) {
66 // Ensure only numeric values
67 e.target.value = e.target.value.replace(/\D/g, '').slice(0, 12); // Limit to 12 digits
68 });
69</script>
70Input with Amount Control Buttons
Check out this numeric stepper built with Tailwind CSS flex utilities. Features increment and decrement buttons for precise quantity control.
Adjust the number using the + and - controls.
1<div class="w-[250px] max-w-sm relative mt-4">
2 <label class="block mb-1 text-sm text-slate-800 font-semibold antialiased">
3 Select Amount
4 </label>
5 <div class="relative">
6 <button
7 id="decreaseButton"
8 class="absolute right-9 top-1 rounded bg-slate-800 p-1.5 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
9 type="button">
10 <svg
11 xmlns="http://www.w3.org/2000/svg"
12 viewBox="0 0 16 16"
13 fill="currentColor"
14 class="w-4 h-4">
15 <path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
16 </svg>
17 </button>
18 <input
19 id="amountInput"
20 type="number"
21 value="0"
22 class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-3 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
23 />
24 <button
25 id="increaseButton"
26 class="absolute right-1 top-1 rounded bg-slate-800 p-1.5 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
27 type="button">
28 <svg
29 xmlns="http://www.w3.org/2000/svg"
30 viewBox="0 0 16 16"
31 fill="currentColor"
32 class="w-4 h-4">
33 <path
34 d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
35 />
36 </svg>
37 </button>
38 </div>
39 <p class="flex items-center mt-2 text-xs text-slate-400">
40 Adjust the number using the + and - controls.
41 </p>
42</div>
43
44<script>
45 // Select the elements
46 const amountInput = document.getElementById('amountInput');
47 const increaseButton = document.getElementById('increaseButton');
48 const decreaseButton = document.getElementById('decreaseButton');
49
50 // Increase the value
51 increaseButton.addEventListener('click', () => {
52 amountInput.value = parseInt(amountInput.value) + 1;
53 });
54
55 // Decrease the value and prevent going below 0
56 decreaseButton.addEventListener('click', () => {
57 amountInput.value = Math.max(0, parseInt(amountInput.value) - 1);
58 });
59</script>
60Input Control with Icons
Use this example when you need icon-enhanced controls. Built with Tailwind CSS grid and icon utilities for intuitive member management.
Adjust the number using the + and - controls.
1<div class="w-[250px] max-w-sm relative mt-4">
2 <label class="block mb-1 text-sm text-slate-600">Select Amount</label>
3 <div class="relative">
4 <button
5 id="decreaseButton"
6 class="absolute right-9 top-1 rounded bg-slate-800 p-1.5 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
7 type="button"
8 >
9 <svg
10 xmlns="http://www.w3.org/2000/svg"
11 viewBox="0 0 16 16"
12 fill="currentColor"
13 class="w-4 h-4"
14 >
15 <path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
16 </svg>
17 </button>
18
19 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="absolute w-5 h-5 top-2.5 left-2.5 text-slate-600">
20 <path d="M4.5 6.375a4.125 4.125 0 1 1 8.25 0 4.125 4.125 0 0 1-8.25 0ZM14.25 8.625a3.375 3.375 0 1 1 6.75 0 3.375 3.375 0 0 1-6.75 0ZM1.5 19.125a7.125 7.125 0 0 1 14.25 0v.003l-.001.119a.75.75 0 0 1-.363.63 13.067 13.067 0 0 1-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 0 1-.364-.63l-.001-.122ZM17.25 19.128l-.001.144a2.25 2.25 0 0 1-.233.96 10.088 10.088 0 0 0 5.06-1.01.75.75 0 0 0 .42-.643 4.875 4.875 0 0 0-6.957-4.611 8.586 8.586 0 0 1 1.71 5.157v.003Z"></path>
21 </svg>
22
23 <input
24 id="amountInput"
25 type="number"
26 value="0"
27 class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-10 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
28 />
29 <button
30 id="increaseButton"
31 class="absolute right-1 top-1 rounded bg-slate-800 p-1.5 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
32 type="button"
33 >
34 <svg
35 xmlns="http://www.w3.org/2000/svg"
36 viewBox="0 0 16 16"
37 fill="currentColor"
38 class="w-4 h-4"
39 >
40 <path
41 d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
42 />
43 </svg>
44 </button>
45 </div>
46 <p class="flex items-center mt-2 text-xs text-slate-400">
47 Adjust the number using the + and - controls.
48 </p>
49</div>
50
51<script>
52 // Select the elements
53 const amountInput = document.getElementById('amountInput');
54 const increaseButton = document.getElementById('increaseButton');
55 const decreaseButton = document.getElementById('decreaseButton');
56
57 // Increase the value
58 increaseButton.addEventListener('click', () => {
59 amountInput.value = parseInt(amountInput.value) + 1;
60 });
61
62 // Decrease the value and prevent going below 0
63 decreaseButton.addEventListener('click', () => {
64 amountInput.value = Math.max(0, parseInt(amountInput.value) - 1);
65 });
66</script>
67Input Counter with Plain Buttons
A minimalist counter design perfect for e-commerce. Combines Tailwind CSS button utilities with smooth interactions for quantity selection.
Adjust the number using the + and - controls.
1 <div class="w-[250px] max-w-sm relative mt-4">
2 <label class="block text-sm font-semibold antialiased text-slate-800 mb-2">
3 Select Amount
4 </label>
5 <div class="relative">
6 <button id="decreaseButton" class="absolute right-9 top-1 rounded-md border border-transparent p-1.5 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">
7 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
8 <path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
9 </svg>
10 </button>
11 <input id="amountInput" type="number" value="0" class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-3 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" />
12 <button id="increaseButton" class="absolute right-1 top-1 rounded-md border border-transparent p-1.5 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">
13 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
14 <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
15 </svg>
16 </button>
17 </div>
18 <p class="flex items-center mt-2 text-xs text-slate-400">
19 Adjust the number using the + and - controls.
20 </p>
21</div>
22
23<script>
24 // Select the elements
25 const amountInput = document.getElementById('amountInput');
26 const increaseButton = document.getElementById('increaseButton');
27 const decreaseButton = document.getElementById('decreaseButton');
28
29 // Increase the value
30 increaseButton.addEventListener('click', () => {
31 amountInput.value = parseInt(amountInput.value) + 1;
32 });
33
34 // Decrease the value and prevent going below 0
35 decreaseButton.addEventListener('click', () => {
36 amountInput.value = Math.max(0, parseInt(amountInput.value) - 1);
37 });
38</script>
39Input Currency
Need a currency input? This component showcases Tailwind CSS select integration with support for multiple currencies like USD, EUR, and CHF.
1 <div class="w-full max-w-sm min-w-[200px] mt-4">
2 <label class="block mb-2 text-sm font-semibold antialiased text-slate-800">
3 Amount You Send
4 </label>
5 <div class="relative mt-2">
6 <input class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-3 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" type="number" placeholder="1,000" />
7 <div class="absolute top-2 right-0 flex items-center pr-3">
8 <div class="h-6 border-l border-slate-200 mr-2"></div>
9 <button id="dropdownButton" class="h-full text-sm flex items-center bg-transparent text-slate-700 focus:outline-none">
10 <span id="dropdownSpan">
11 USD
12 </span>
13 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4 ml-1">
14 <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
15 </svg>
16 </button>
17 <div id="dropdownMenu" class="min-w-[150px] overflow-hidden absolute left-0 w-full mt-10 hidden w-full bg-white border border-slate-200 rounded-md shadow-lg z-10">
18 <ul id="dropdownOptions">
19 <li class="px-4 py-2 text-slate-600 hover:bg-slate-50 text-sm cursor-pointer" data-value="USD">
20 USD
21 </li>
22 <li class="px-4 py-2 text-slate-600 hover:bg-slate-50 text-sm cursor-pointer" data-value="EUR">
23 EUR
24 </li>
25 <li class="px-4 py-2 text-slate-600 hover:bg-slate-50 text-sm cursor-pointer" data-value="CAD">
26 CAD
27 </li>
28 <li class="px-4 py-2 text-slate-600 hover:bg-slate-50 text-sm cursor-pointer" data-value="RON">
29 RON
30 </li>
31 </ul>
32 </div>
33 </div>
34 </div>
35</div>
36
37<script>
38 document.getElementById('dropdownButton').addEventListener('click', function() {
39 var dropdownMenu = document.getElementById('dropdownMenu');
40 if (dropdownMenu.classList.contains('hidden')) {
41 dropdownMenu.classList.remove('hidden');
42 } else {
43 dropdownMenu.classList.add('hidden');
44 }
45 });
46
47 document.getElementById('dropdownOptions').addEventListener('click', function(event) {
48 if (event.target.tagName === 'LI') {
49 const dataValue = event.target.getAttribute('data-value');
50 document.getElementById('dropdownSpan').textContent = dataValue;
51 document.getElementById('dropdownMenu').classList.add('hidden');
52 }
53 });
54
55 document.addEventListener('click', function(event) {
56 var isClickInside = document.getElementById('dropdownButton').contains(event.target) || document.getElementById('dropdownMenu').contains(event.target);
57 var dropdownMenu = document.getElementById('dropdownMenu');
58
59 if (!isClickInside) {
60 dropdownMenu.classList.add('hidden');
61 }
62 });
63</script>Input Credit Card
Transform your payment forms with this comprehensive credit card input. Features Tailwind CSS grid layout for organized card information entry.
1 <div class="w-full max-w-sm min-w-[200px] mt-4">
2 <label class="block mb-2 text-sm font-semibold antialiased text-slate-800">
3 Cardholder Name
4 </label>
5 <input class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-3 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow" type="text" placeholder="e.g John Doe" />
6
7 <label class="block mb-2 text-sm font-semibold antialiased text-slate-800 mt-4">
8 Card Number
9 </label>
10 <input class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-3 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow" type="text" id="cardNumber" placeholder="1234 5678 9012 3456" maxlength="19" oninput="formatCardNumber(this)" />
11
12 <div class="flex">
13 <div class="w-full md:w-8/12 mr-4">
14 <label class="block mb-2 text-sm font-semibold antialiased text-slate-800 mt-4">
15 Expiration Date
16 </label>
17 <input class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-3 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow" type="text" placeholder="MM/YY" maxlength="5" pattern="\d{2}/\d{2}" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\d{2})(\d{1,2})/, '$1/$2').substring(0, 5);" />
18 </div>
19 <div class="w-full md:w-4/12">
20 <label class="block mb-2 text-sm font-semibold antialiased text-slate-800 mt-4">
21 CVV
22 </label>
23 <input class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-3 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow" type="text" placeholder="123" maxlength="3" pattern="\d{3}" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');" />
24 </div>
25 </div>
26
27 <button class="w-full mt-4 rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
28 Purchase Now
29 </button>
30</div>
31
32<script>
33 function formatCardNumber(input) {
34 const value = input.value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
35 const formattedValue = value.match(/.{1,4}/g)?.join(' ') || value;
36 input.value = formattedValue;
37 }
38</script>
39Input One-time Password
Enhance your authentication flow with this OTP input. Built using Tailwind CSS flex utilities for a clean, segmented code entry experience.
Enter the 6-digit OTP sent to +1 123-456-7890
-
Did not receive the code? Resend
1<div class="flex flex-col items-center space-y-4">
2 <p class="text-sm text-slate-600">
3 Enter the 6-digit OTP sent to <span class="font-bold">+1 123-456-7890</span>
4 </p>
5
6 <div class="flex items-center space-x-2">
7 <input type="text" maxlength="1" class="w-10 h-10 bg-transparent text-center placeholder:text-slate-400 text-slate-700 text-lg border border-slate-200 rounded-md transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow" oninput="handleChange(this, 0)" onkeydown="handleBackspace(event, 0)" />
8 <input type="text" maxlength="1" class="w-10 h-10 bg-transparent text-center placeholder:text-slate-400 text-slate-700 text-lg border border-slate-200 rounded-md transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow" oninput="handleChange(this, 1)" onkeydown="handleBackspace(event, 1)" />
9 <input type="text" maxlength="1" class="w-10 h-10 bg-transparent text-center placeholder:text-slate-400 text-slate-700 text-lg border border-slate-200 rounded-md transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow" oninput="handleChange(this, 2)" onkeydown="handleBackspace(event, 2)" />
10 <span class="text-2xl mx-2 text-slate-700">-</span>
11 <input type="text" maxlength="1" class="w-10 h-10 bg-transparent text-center placeholder:text-slate-400 text-slate-700 text-lg border border-slate-200 rounded-md transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow" oninput="handleChange(this, 3)" onkeydown="handleBackspace(event, 3)" />
12 <input type="text" maxlength="1" class="w-10 h-10 bg-transparent text-center placeholder:text-slate-400 text-slate-700 text-lg border border-slate-200 rounded-md transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow" oninput="handleChange(this, 4)" onkeydown="handleBackspace(event, 4)" />
13 <input type="text" maxlength="1" class="w-10 h-10 bg-transparent text-center placeholder:text-slate-400 text-slate-700 text-lg border border-slate-200 rounded-md transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow" oninput="handleChange(this, 5)" onkeydown="handleBackspace(event, 5)" />
14 </div>
15
16 <p class="text-xs text-slate-400 mt-4">
17 Did not receive the code? <span class="font-bold cursor-pointer">Resend</span>
18 </p>
19</div>
20
21<script>
22 const inputs = document.querySelectorAll('input[type="text"]');
23
24 function handleChange(input, index) {
25 const value = input.value.replace(/[^0-9]/g, ''); // Allow only digits
26 input.value = value; // Set the value in the current input
27 if (value && index < inputs.length - 1) {
28 inputs[index + 1].focus(); // Move to the next input
29 }
30 }
31
32 function handleBackspace(event, index) {
33 if (event.key === 'Backspace' && !event.currentTarget.value && index > 0) {
34 inputs[index - 1].focus(); // Move to the previous input
35 }
36 }
37</script>Input Currency Conversion
Check out this dynamic currency converter using Tailwind CSS form utilities. The intuitive swap button makes currency conversion a breeze.
Enter the amount you wish to convert and select the desired currency.
Rates are updated every hour to provide the most accurate conversions.
Last updated: July 30, 2024, 3:00 PM
1 <div class="w-full max-w-xl mx-auto mt-4">
2 <p class="text-slate-500 mb-4">
3 Enter the amount you wish to convert and select the desired currency.
4 </p>
5 <div class="flex flex-col items-center justify-between">
6 <!-- From Input -->
7 <div class="w-full max-w-xs min-w-[200px] mt-4">
8 <label class="block font-semibold antialiased text-slate-800 mb-2">
9 From
10 </label>
11 <div class="relative mt-2">
12 <input class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-3 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" type="number" placeholder="1,000" />
13 <div class="absolute top-2 right-0 flex items-center pr-3">
14 <div class="h-6 border-l border-slate-200 mr-2"></div>
15 <button class="dropdownButton h-full text-sm flex items-center bg-transparent text-slate-700 focus:outline-none">
16 <span class="dropdownSpan">USD</span>
17 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4 ml-1">
18 <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
19 </svg>
20 </button>
21 <div class="dropdownMenu min-w-[150px] overflow-hidden absolute left-0 w-full mt-10 hidden w-full bg-white border border-slate-200 rounded-md shadow-lg z-10">
22 <ul class="dropdownOptions">
23 <li class="px-4 py-2 text-slate-800 hover:bg-slate-100 text-sm cursor-pointer" data-value="USD">
24 USD
25 </li>
26 <li class="px-4 py-2 text-slate-800 hover:bg-slate-100 text-sm cursor-pointer" data-value="EUR">
27 EUR
28 </li>
29 <li class="px-4 py-2 text-slate-800 hover:bg-slate-100 text-sm cursor-pointer" data-value="CAD">
30 CAD
31 </li>
32 <li class="px-4 py-2 text-slate-800 hover:bg-slate-100 text-sm cursor-pointer" data-value="RON">
33 RON
34 </li>
35 </ul>
36 </div>
37 </div>
38 </div>
39 </div>
40
41 <!-- Swap Icon -->
42 <div class="flex items-center justify-center mt-6">
43 <button class="rounded-full border border-slate-300 p-2.5 text-center text-sm transition-all shadow-sm hover:shadow-lg text-slate-600 hover:text-white hover:bg-slate-800 hover:border-slate-800 focus:text-white focus:bg-slate-800 focus:border-slate-800 active:border-slate-800 active:text-white active:bg-slate-800 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
44 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
45 <path fill-rule="evenodd" d="M13.78 10.47a.75.75 0 0 1 0 1.06l-2.25 2.25a.75.75 0 0 1-1.06 0l-2.25-2.25a.75.75 0 1 1 1.06-1.06l.97.97V5.75a.75.75 0 0 1 1.5 0v5.69l.97-.97a.75.75 0 0 1 1.06 0ZM2.22 5.53a.75.75 0 0 1 0-1.06l2.25-2.25a.75.75 0 0 1 1.06 0l2.25 2.25a.75.75 0 0 1-1.06 1.06l-.97-.97v5.69a.75.75 0 0 1-1.5 0V4.56l-.97.97a.75.75 0 0 1-1.06 0Z" clip-rule="evenodd" />
46 </svg>
47 </button>
48 </div>
49
50 <!-- To Input -->
51 <div class="w-full max-w-xs min-w-[200px] -mt-2">
52 <label class="block font-semibold antialiased text-slate-800 mb-2">
53 To
54 </label>
55 <div class="relative mt-2">
56 <input class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-3 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-800 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-300 shadow-sm focus:shadow appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" type="number" placeholder="1,000" />
57 <div class="absolute top-2 right-0 flex items-center pr-3">
58 <div class="h-6 border-l border-slate-200 mr-2"></div>
59 <button class="dropdownButton h-full text-sm flex items-center bg-transparent text-slate-700 focus:outline-none">
60 <span class="dropdownSpan">EUR</span>
61 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4 ml-1">
62 <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
63 </svg>
64 </button>
65 <div class="dropdownMenu min-w-[150px] overflow-hidden absolute left-0 w-full mt-10 hidden w-full bg-white border border-slate-200 rounded-md shadow-lg z-10">
66 <ul class="dropdownOptions">
67 <li class="px-4 py-2 text-slate-600 hover:bg-slate-50 text-sm cursor-pointer" data-value="USD">
68 USD
69 </li>
70 <li class="px-4 py-2 text-slate-600 hover:bg-slate-50 text-sm cursor-pointer" data-value="EUR">
71 EUR
72 </li>
73 <li class="px-4 py-2 text-slate-600 hover:bg-slate-50 text-sm cursor-pointer" data-value="CAD">
74 CAD
75 </li>
76 <li class="px-4 py-2 text-slate-600 hover:bg-slate-50 text-sm cursor-pointer" data-value="RON">
77 RON
78 </li>
79 </ul>
80 </div>
81 </div>
82 </div>
83 </div>
84 </div>
85
86 <!-- Last Updated Text -->
87 <div class="mt-8 text-slate-400 text-sm">
88 <p>
89 Rates are updated every hour to provide the most accurate conversions.
90 </p>
91 <p class="mt-1">
92 <b>Last updated</b>: July 30, 2024, 3:00 PM
93 </p>
94 </div>
95</div>
96
97<script>
98 // Function to handle dropdown toggle
99 document.querySelectorAll('.dropdownButton').forEach(button => {
100 button.addEventListener('click', function() {
101 const dropdownMenu = this.nextElementSibling;
102 dropdownMenu.classList.toggle('hidden');
103 });
104 });
105
106 // Function to handle dropdown item selection
107 document.querySelectorAll('.dropdownOptions').forEach(dropdown => {
108 dropdown.addEventListener('click', function(event) {
109 if (event.target.tagName === 'LI') {
110 const dataValue = event.target.getAttribute('data-value');
111 const dropdownSpan = this.closest('.relative').querySelector('.dropdownSpan');
112 dropdownSpan.textContent = dataValue;
113 this.closest('.dropdownMenu').classList.add('hidden');
114 }
115 });
116 });
117
118 // Close dropdown if clicked outside
119 document.addEventListener('click', function(event) {
120 document.querySelectorAll('.dropdownMenu').forEach(dropdownMenu => {
121 if (!dropdownMenu.closest('.relative').contains(event.target)) {
122 dropdownMenu.classList.add('hidden');
123 }
124 });
125 });
126</script>
127
128