15+ Free Tailwind CSS Number Inputs for your Projects

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>15+ Free Tailwind CSS Number Inputs for your Projects</title> <link rel="stylesheet" href="/blog/assets/built/screen.css?v=bc77caee98"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Muli:400,400i,700,700i,800">  <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script> <script> if (localStorage.getItem('alto_dark') == 'true') { document.documentElement.classList.add('dark-mode'); } </script> <script> var ghosthunter_key = ''; ghost_root_url = ""; if (document.URL.includes('creative-tim.com')) { ghost_root_url = "/blog/ghost/api/v4"; ghosthunter_key = 'b431b45a35fd006e8befdf8855'; } else { ghost_root_url = "/blog/ghost/api/v4"; ghosthunter_key = '1c87ec6f195f4f728fc5e5d522'; } </script> <script> var gh_white_logo = 'https://s3.amazonaws.com/creativetim_bucket/static-assets/logo-ct-blog-white.png'; </script>  <style>.async-hide { opacity: 0 !important} </style> <script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date; h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer',4000, {'GTM-K9BGS8K':true});</script>  <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-46172202-22', 'auto', {allowLinker: true}); ga('set', 'anonymizeIp', true); ga('require', 'GTM-K9BGS8K'); ga('require', 'displayfeatures'); ga('require', 'linker'); ga('linker:autoLink', ["2checkout.com","avangate.com"]); </script>   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-NKDMSK6');</script>  <meta name="description" content="Here are 15+ free Tailwind CSS number inputs that cover a wide range of use cases, from simple counters and currency inputs to advanced forms with validation and interactive controls." /> <link rel="icon" href="/blog/favicon.png" type="image/png" /> <link rel="canonical" href="https://www.creative-tim.com/blog/tw-components/free-tailwind-css-number-inputs/" /> <meta name="referrer" content="no-referrer-when-downgrade" /> <link rel="amphtml" href="https://www.creative-tim.com/blog/tw-components/free-tailwind-css-number-inputs/amp/" /> <meta property="og:site_name" content="Creative Tim's Blog - Fully coded design resources for web developers" /> <meta property="og:type" content="article" /> <meta property="og:title" content="15+ Free Tailwind CSS Number Inputs for your Projects" /> <meta property="og:description" content="Here are 15+ free Tailwind CSS number inputs that cover a wide range of use cases, from simple counters and currency inputs to advanced forms with validation and interactive controls." /> <meta property="og:url" content="https://www.creative-tim.com/blog/tw-components/free-tailwind-css-number-inputs/" /> <meta property="og:image" content="https://www.creative-tim.com/blog/content/images/2024/09/free-tailwind-css-number-inputs-for-your-projects.jpg" /> <meta property="article:published_time" content="2024-09-02T12:44:41.000Z" /> <meta property="article:modified_time" content="2024-09-02T14:26:32.000Z" /> <meta property="article:tag" content="TW Components" /> <meta property="article:publisher" content="https://www.facebook.com/ghost" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="15+ Free Tailwind CSS Number Inputs for your Projects" /> <meta name="twitter:description" content="Here are 15+ free Tailwind CSS number inputs that cover a wide range of use cases, from simple counters and currency inputs to advanced forms with validation and interactive controls." /> <meta name="twitter:url" content="https://www.creative-tim.com/blog/tw-components/free-tailwind-css-number-inputs/" /> <meta name="twitter:image" content="https://www.creative-tim.com/blog/content/images/2024/09/free-tailwind-css-number-inputs-for-your-projects.jpg" /> <meta name="twitter:label1" content="Written by" /> <meta name="twitter:data1" content="Alexandra Murtaza" /> <meta name="twitter:label2" content="Filed under" /> <meta name="twitter:data2" content="TW Components" /> <meta name="twitter:site" content="@ghost" /> <meta property="og:image:width" content="991" /> <meta property="og:image:height" content="490" /> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "publisher": { "@type": "Organization", "name": "Creative Tim's Blog - Fully coded design resources for web developers", "url": "https://blogct.creative-tim.com/blog/", "logo": { "@type": "ImageObject", "url": "https://blogct.creative-tim.com/blog/content/images/2022/04/logo-creative-tim-black.png" } }, "author": { "@type": "Person", "name": "Alexandra Murtaza", "image": { "@type": "ImageObject", "url": "https://blogct.creative-tim.com/blog/content/images/2022/02/alexandra_murtaza.png", "width": 512, "height": 512 }, "url": "https://blogct.creative-tim.com/blog/author/alexandra-murtaza/", "sameAs": [] }, "headline": "15+ Free Tailwind CSS Number Inputs for your Projects", "url": "https://blogct.creative-tim.com/blog/tw-components/free-tailwind-css-number-inputs/", "datePublished": "2024-09-02T12:44:41.000Z", "dateModified": "2024-09-02T14:26:32.000Z", "image": { "@type": "ImageObject", "url": "https://blogct.creative-tim.com/blog/content/images/2024/09/free-tailwind-css-number-inputs-for-your-projects.jpg", "width": 991, "height": 490 }, "keywords": "TW Components", "description": "\n\nTailwind CSS is a popular framework for its utility-first approach, enabling\ndevelopers to create beautiful, responsive, and highly customizable user\ninterfaces with ease. Number inputs are essential components of any web form,\nwhether you're building a checkout form, a settings page, or a user profile\nsection.\n\nIn this collection, we showcase 15+ free Tailwind CSS number inputs that cover a\nwide range of use cases, from simple counters and currency inputs to advanced\nforms with validation and", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://blogct.creative-tim.com/blog/" } } </script> <meta name="generator" content="Ghost 4.7" /> <link rel="alternate" type="application/rss+xml" title="Creative Tim's Blog - Fully coded design resources for web developers" href="https://www.creative-tim.com/blog/rss/" /> <style> .kg-image, .aligncenter, .size-large { border-radius: 16px !important; } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism-tomorrow.min.css" integrity="sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXthvkSFWOoGGJgS2CW70VK5dQM5Oh+7ne47s74VTg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-theme-classic" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" /> <link rel="preconnect" href="https://H5FHEK3TTR-dsn.algolia.net" crossorigin /><style>:root {--ghost-accent-color: #00BBFF;}</style> </head> <body class="post-template tag-tw-components">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <div class="site"> <header class="site-header container" id="navbar"> <div class="navbar"> <div class="navbar-left"> <div class="burger hidden-lg hidden-xl absolute lg:relative right-1"></div> <a class="logo" href="https://www.creative-tim.com/" target="_blank"> <img class="logo-image" src="https://www.creative-tim.com/blog/content/images/2022/04/logo-creative-tim-black.png" alt="Creative Tim"> </a> <div class="sep hidden-xs hidden-sm hidden-sm"></div> <a class="" href="https://www.creative-tim.com/blog"> <span class="logo-text ml-4 md:ml-0 hidden md:block">Blog</span> </a> </div> <div class="navbar-right"> <div id="docsearch" class="w-12 md:w-32 lg:w-44 rounded-sm sm:mr-7 lg:mr-0 ml-0 md:ml-4"></div> <nav class="main-menu hidden-xs hidden-sm hidden-md"> <ul class="nav-list u-plain-list"> <li class="menu-item menu-item-home"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/"> Home </a> </li> <li class="menu-item menu-item-marketplace"> <a class="menu-item-link" href="https://www.creative-tim.com/"> Marketplace </a> </li> <li class="menu-item menu-item-tutorials"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/tutorial/"> Tutorials </a> </li> </ul> </nav> <div class="flex items-center mr-12 sm:mr-8 md:mr-6"> <div class="toggle-track"> <div class="toggle-moon"><i class="icon icon-brightness-2"></i></div> <div class="toggle-sun"><i class="icon icon-white-balance-sunny"></i></div> <div class="toggle-thumb"></div> </div> </div> </div> </div> </header> <div class="container mt-6"> <nav class="mb-8 md:mb-4 hidden md:block md:flex md:overflow-scroll md:items-center md:justify-between nav-secondary"> <ul class="nav-list u-plain-list whitespace-nowrap sm:overflow-auto lg:overflow-hidden pb-4"> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/resources/"> Resources </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/seo/"> SEO </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/startups/"> Startups </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/uiux-design/"> UI/UX Design </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/web-design/"> Web Design </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/web-development/"> Web Development </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/tiktok-learning/"> TikTok Learning </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/educational-tech/"> Educational Tech </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/web-3-0/"> Web 3 </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/crypto-news/"> Crypto News </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/blockchain/"> Blockchain </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/nft/"> NFT </a> </li> </ul> </nav> </div> <div class="site-content container"> <div class="row "> <div class="content-column col-xl-9 col-lg-9"> <div class="content-area"> <main class="site-main"> <article class="post tag-tw-components single-post"> <header class="post-header big-title container medium"> <h1 class="post-title">15+ Free Tailwind CSS Number Inputs for your Projects</h1> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-tw-components" href="https://www.creative-tim.com/blog/tw-components/" title="TW Components">TW Components</a> </span> <span class="post-meta-item post-meta-length"> 5 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-09-02"> Sep 2, 2024 </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-09-02"> Sep 2, 2024 </time> </span> </div> </header> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/tw-components/free-tailwind-css-number-inputs/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2024/09/free-tailwind-css-number-inputs-for-your-projects.jpg 400w, /blog/content/images/size/w750/2024/09/free-tailwind-css-number-inputs-for-your-projects.jpg 750w, /blog/content/images/size/w960/2024/09/free-tailwind-css-number-inputs-for-your-projects.jpg 960w, /blog/content/images/size/w1140/2024/09/free-tailwind-css-number-inputs-for-your-projects.jpg 1140w, /blog/content/images/size/w1920/2024/09/free-tailwind-css-number-inputs-for-your-projects.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2024/09/free-tailwind-css-number-inputs-for-your-projects.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="15+ Free Tailwind CSS Number Inputs for your Projects"> </a> </div> </div> <div class="post-content kg-canvas u-text-format"> <p></p><p>Tailwind CSS is a popular framework for its utility-first approach, enabling developers to create beautiful, responsive, and highly customizable user interfaces with ease. Number inputs are essential components of any web form, whether you're building a checkout form, a settings page, or a user profile section.</p> <p>In this collection, we showcase <strong>15+ free Tailwind CSS number inputs that cover a wide range of use cases</strong>, from simple counters and currency inputs to advanced forms with validation and interactive controls. Each input example is built with Tailwind CSS and HTML, offering clean designs, responsive layouts, and easy customization.</p> <p>These examples will help you streamline the process of adding sophisticated number inputs to your application, saving you time and effort while maintaining a high standard of design and functionality.</p> <h2 id="tailwind-css-number-input-examples">Tailwind CSS Number Input Examples</h2> <h3 id="1-number-input-with-select">1. Number Input with Select</h3> <figure class="kg-card kg-image-card"><img src="https://www.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.12.30.png" class="kg-image" alt="Number Input with Select" loading="lazy" width="970" height="202" srcset="https://www.creative-tim.com/blog/content/images/size/w600/2024/09/Screenshot-2024-09-02-at-12.12.30.png 600w, https://blogct.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.12.30.png 970w" sizes="(min-width: 720px) 720px"></figure><p>A basic number input field with a dropdown selector for choosing a number, allowing users to select a specific value from a list.</p> <p><strong>Features:</strong></p> <ul> <li>Responsive: Yes</li> <li>Made with: HTML, CSS, Tailwind</li> <li>React version: Yes</li> <li>Browser Compatibility: Chrome, Opera, Safari, Edge, Firefox</li> </ul> <p>➡️ <a href="https://www.creative-tim.com/twcomponents/component/number-input-with-select" target="_blank">Check Demo</a></p> <h3 id="2-zip-code-input">2. Zip Code Input</h3> <figure class="kg-card kg-image-card"><img src="https://www.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.12.38.png" class="kg-image" alt="tailwind Zip Code Input " loading="lazy" width="962" height="192" srcset="https://www.creative-tim.com/blog/content/images/size/w600/2024/09/Screenshot-2024-09-02-at-12.12.38.png 600w, https://blogct.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.12.38.png 962w" sizes="(min-width: 720px) 720px"></figure><p>An input field designed for entering zip codes, with validation support and an information tooltip to guide users in providing location-specific details.</p> <p><strong>Features:</strong></p> <ul> <li>Responsive: Yes</li> <li>Made with: HTML, CSS, Tailwind</li> <li>React version: Yes</li> <li>Browser Compatibility: Chrome, Opera, Safari, Edge, Firefox</li> </ul> <p>➡️ <a href="https://www.creative-tim.com/twcomponents/component/zip-code-input" target="_blank">Check Demo</a></p> <h3 id="3-phone-number-input">3. Phone Number Input</h3> <figure class="kg-card kg-image-card"><img src="https://www.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.12.45.png" class="kg-image" alt="tailwind phone number" loading="lazy" width="912" height="188" srcset="https://www.creative-tim.com/blog/content/images/size/w600/2024/09/Screenshot-2024-09-02-at-12.12.45.png 600w, https://blogct.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.12.45.png 912w" sizes="(min-width: 720px) 720px"></figure><p>A phone number input with a country code selector, providing an easy way for users to enter their phone numbers correctly with international formats.</p> <p><strong>Features:</strong></p> <ul> <li>Responsive: Yes</li> <li>Made with: HTML, CSS, Tailwind</li> <li>React version: Yes</li> <li>Browser Compatibility: Chrome, Opera, Safari, Edge, Firefox</li> </ul> <p>➡️ <a href="https://www.material-tailwind.com/docs/html/input-number#input-zip-code" target="_blank">Check Demo</a></p> <h3 id="4-input-with-amount-controls">4. Input with Amount Controls</h3> <figure class="kg-card kg-image-card"><img src="https://www.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.12.50.png" class="kg-image" alt="tailwind Input with Amount Controls" loading="lazy" width="762" height="210" srcset="https://www.creative-tim.com/blog/content/images/size/w600/2024/09/Screenshot-2024-09-02-at-12.12.50.png 600w, https://blogct.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.12.50.png 762w" sizes="(min-width: 720px) 720px"></figure><p>A numeric input field with increment (+) and decrement (-) buttons, allowing users to adjust the number conveniently using control buttons.</p> <p><strong>Features:</strong></p> <ul> <li>Responsive: Yes</li> <li>Made with: HTML, CSS, Tailwind</li> <li>React version: Yes</li> <li>Browser Compatibility: Chrome, Opera, Safari, Edge, Firefox</li> </ul> <p>➡️ <a href="https://www.creative-tim.com/twcomponents/component/input-with-control-buttons" target="_blank">Check Demo</a></p> <h3 id="5-input-with-controls-and-icons">5. Input with Controls and Icons</h3> <figure class="kg-card kg-image-card"><img src="https://www.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.12.56.png" class="kg-image" alt="tailwind Input with Controls and Icons" loading="lazy" width="976" height="246" srcset="https://www.creative-tim.com/blog/content/images/size/w600/2024/09/Screenshot-2024-09-02-at-12.12.56.png 600w, https://blogct.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.12.56.png 976w" sizes="(min-width: 720px) 720px"></figure><p>A member addition input field that combines numeric input with increment/decrement controls and icons, improving usability by allowing easy modifications of member counts.</p> <p><strong>Features:</strong></p> <ul> <li>Responsive: Yes</li> <li>Made with: HTML, CSS, Tailwind</li> <li>React version: Yes</li> <li>Browser Compatibility: Chrome, Opera, Safari, Edge, Firefox</li> </ul> <p>➡️ <a href="https://www.creative-tim.com/twcomponents/component/number-input-with-controls-and-icon" target="_blank">Check Demo</a></p> <h3 id="6-input-counter-with-buttons">6. Input Counter with Buttons</h3> <figure class="kg-card kg-image-card"><img src="https://www.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.13.02.png" class="kg-image" alt="tailwind Input Counter with Buttons" loading="lazy" width="1062" height="216" srcset="https://www.creative-tim.com/blog/content/images/size/w600/2024/09/Screenshot-2024-09-02-at-12.13.02.png 600w, https://blogct.creative-tim.com/blog/content/images/size/w1000/2024/09/Screenshot-2024-09-02-at-12.13.02.png 1000w, https://blogct.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.13.02.png 1062w" sizes="(min-width: 720px) 720px"></figure><p>A counter input field featuring increment (+) and decrement (-) buttons for quick adjustments to the quantity of items, suitable for scenarios involving quantity management.</p> <p><strong>Features:</strong></p> <ul> <li>Responsive: Yes</li> <li>Made with: HTML, CSS, Tailwind</li> <li>React version: Yes</li> <li>Browser Compatibility: Chrome, Opera, Safari, Edge, Firefox</li> </ul> <p>➡️ <a href="https://www.creative-tim.com/twcomponents/component/input-counter" target="_blank">Check Demo</a></p> <h3 id="7-input-currency">7. Input Currency</h3> <figure class="kg-card kg-image-card"><img src="https://www.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.13.09.png" class="kg-image" alt="tailwind Input Currency" loading="lazy" width="1094" height="198" srcset="https://www.creative-tim.com/blog/content/images/size/w600/2024/09/Screenshot-2024-09-02-at-12.13.09.png 600w, https://blogct.creative-tim.com/blog/content/images/size/w1000/2024/09/Screenshot-2024-09-02-at-12.13.09.png 1000w, https://blogct.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.13.09.png 1094w" sizes="(min-width: 720px) 720px"></figure><p>A currency input field with a dropdown for selecting the currency type, making it easier for users to enter and adjust monetary amounts in different currencies.</p> <p><strong>Features:</strong></p> <ul> <li>Responsive: Yes</li> <li>Made with: HTML, CSS, Tailwind</li> <li>React version: Yes</li> <li>Browser Compatibility: Chrome, Opera, Safari, Edge, Firefox</li> </ul> <p>➡️ <a href="https://www.creative-tim.com/twcomponents/component/input-with-currency" target="_blank">Check Demo</a></p> <h3 id="8-credit-card-input">8. Credit Card Input</h3> <figure class="kg-card kg-image-card"><img src="https://www.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.13.16.png" class="kg-image" alt="tailwind Credit Card Input " loading="lazy" width="1062" height="502" srcset="https://www.creative-tim.com/blog/content/images/size/w600/2024/09/Screenshot-2024-09-02-at-12.13.16.png 600w, https://blogct.creative-tim.com/blog/content/images/size/w1000/2024/09/Screenshot-2024-09-02-at-12.13.16.png 1000w, https://blogct.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.13.16.png 1062w" sizes="(min-width: 720px) 720px"></figure><p>A comprehensive credit card input form with fields for the cardholder’s name, card number, expiration date, and CVV, along with a purchase button, designed for secure payment processing.</p> <p><strong>Features:</strong></p> <ul> <li>Responsive: Yes</li> <li>Made with: HTML, CSS, Tailwind</li> <li>React version: Yes</li> <li>Browser Compatibility: Chrome, Opera, Safari, Edge, Firefox</li> </ul> <p>➡️ <a href="https://www.creative-tim.com/twcomponents/component/phone-input-with-authentication" target="_blank">Check Demo</a></p> <h3 id="9-one-time-password-input">9. One-time Password Input</h3> <figure class="kg-card kg-image-card"><img src="https://www.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.13.24.png" class="kg-image" alt="tailwind One-time Password Input " loading="lazy" width="1066" height="222" srcset="https://www.creative-tim.com/blog/content/images/size/w600/2024/09/Screenshot-2024-09-02-at-12.13.24.png 600w, https://blogct.creative-tim.com/blog/content/images/size/w1000/2024/09/Screenshot-2024-09-02-at-12.13.24.png 1000w, https://blogct.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.13.24.png 1066w" sizes="(min-width: 720px) 720px"></figure><p>An OTP input form with separate fields for each digit, guiding users to enter a 6-digit code received via SMS for authentication purposes, with options to resend the code if needed.</p> <p><strong>Features:</strong></p> <ul> <li>Responsive: Yes</li> <li>Made with: HTML, CSS, Tailwind</li> <li>React version: Yes</li> <li>Browser Compatibility: Chrome, Opera, Safari, Edge, Firefox</li> </ul> <p>➡️ <a href="https://www.material-tailwind.com/docs/html/input-number#input-one-time-password" target="_blank">Check Demo</a></p> <h3 id="10-currency-conversion-input">10. Currency Conversion Input</h3> <figure class="kg-card kg-image-card"><img src="https://www.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.13.33.png" class="kg-image" alt="tailwind Currency Conversion Input " loading="lazy" width="1074" height="562" srcset="https://www.creative-tim.com/blog/content/images/size/w600/2024/09/Screenshot-2024-09-02-at-12.13.33.png 600w, https://blogct.creative-tim.com/blog/content/images/size/w1000/2024/09/Screenshot-2024-09-02-at-12.13.33.png 1000w, https://blogct.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.13.33.png 1074w" sizes="(min-width: 720px) 720px"></figure><p>A dual-input component that allows users to convert amounts between two different currencies, featuring dropdown selectors for currency types and an exchange rate update timestamp for accurate conversions.</p> <p><strong>Features:</strong></p> <ul> <li>Responsive: Yes</li> <li>Made with: HTML, CSS, Tailwind</li> <li>React version: Yes</li> <li>Browser Compatibility: Chrome, Opera, Safari, Edge, Firefox</li> </ul> <p>➡️ <a href="https://www.creative-tim.com/twcomponents/component/password-input" target="_blank">Check Demo</a></p> <h3 id="11-simple-phone-input">11. Simple Phone Input</h3> <figure class="kg-card kg-image-card"><img src="https://www.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.24.28.png" class="kg-image" alt="tailwind Simple Phone Input" loading="lazy" width="1062" height="200" srcset="https://www.creative-tim.com/blog/content/images/size/w600/2024/09/Screenshot-2024-09-02-at-12.24.28.png 600w, https://blogct.creative-tim.com/blog/content/images/size/w1000/2024/09/Screenshot-2024-09-02-at-12.24.28.png 1000w, https://blogct.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.24.28.png 1062w" sizes="(min-width: 720px) 720px"></figure><p>A straightforward phone number input field that includes a placeholder for users to enter their contact number, highlighting the need to include the country code for international numbers.</p> <p><strong>Features:</strong></p> <ul> <li>Responsive: Yes</li> <li>Made with: HTML, CSS, Tailwind</li> <li>React version: Yes</li> <li>Browser Compatibility: Chrome, Opera, Safari, Edge, Firefox</li> </ul> <p>➡️ <a href="https://www.material-tailwind.com/docs/html/input-phone#input-simple-phone" target="_blank">Check Demo</a></p> <h3 id="12-phone-input-with-validation">12. Phone Input with Validation</h3> <figure class="kg-card kg-image-card"><img src="https://www.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.24.34.png" class="kg-image" alt="tailwind Phone Input with Validation" loading="lazy" width="1086" height="352" srcset="https://www.creative-tim.com/blog/content/images/size/w600/2024/09/Screenshot-2024-09-02-at-12.24.34.png 600w, https://blogct.creative-tim.com/blog/content/images/size/w1000/2024/09/Screenshot-2024-09-02-at-12.24.34.png 1000w, https://blogct.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.24.34.png 1086w" sizes="(min-width: 720px) 720px"></figure><p>An input field for phone numbers that includes real-time validation, providing feedback on whether the entered number meets the required format, improving user accuracy.</p> <p><strong>Features:</strong></p> <ul> <li>Responsive: Yes</li> <li>Made with: HTML, CSS, Tailwind</li> <li>React version: Yes</li> <li>Browser Compatibility: Chrome, Opera, Safari, Edge, Firefox</li> </ul> <p>➡️ <a href="https://www.material-tailwind.com/docs/html/input-phone#input-phone-validation" target="_blank">Check Demo</a></p> <h3 id="13-phone-input-with-icon">13. Phone Input with Icon</h3> <figure class="kg-card kg-image-card"><img src="https://www.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.24.40.png" class="kg-image" alt="tailwind Phone Input with Icon" loading="lazy" width="1076" height="188" srcset="https://www.creative-tim.com/blog/content/images/size/w600/2024/09/Screenshot-2024-09-02-at-12.24.40.png 600w, https://blogct.creative-tim.com/blog/content/images/size/w1000/2024/09/Screenshot-2024-09-02-at-12.24.40.png 1000w, https://blogct.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.24.40.png 1076w" sizes="(min-width: 720px) 720px"></figure><p>A phone input field featuring an icon of a phone next to the input box, making the field visually distinct and user-friendly by providing a familiar symbol.</p> <p><strong>Features:</strong></p> <ul> <li>Responsive: Yes</li> <li>Made with: HTML, CSS, Tailwind</li> <li>React version: Yes</li> <li>Browser Compatibility: Chrome, Opera, Safari, Edge, Firefox</li> </ul> <p>➡️ <a href="https://www.creative-tim.com/twcomponents/component/phone-input-with-icon" target="_blank">Check Demo</a></p> <h3 id="14-phone-input-with-country-code">14. Phone Input with Country Code</h3> <figure class="kg-card kg-image-card"><img src="https://www.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.24.46.png" class="kg-image" alt="tailwind Phone Input with Country Code" loading="lazy" width="1074" height="206" srcset="https://www.creative-tim.com/blog/content/images/size/w600/2024/09/Screenshot-2024-09-02-at-12.24.46.png 600w, https://blogct.creative-tim.com/blog/content/images/size/w1000/2024/09/Screenshot-2024-09-02-at-12.24.46.png 1000w, https://blogct.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.24.46.png 1074w" sizes="(min-width: 720px) 720px"></figure><p>A phone input field that includes a dropdown for selecting a country code, streamlining the process of entering international phone numbers accurately.</p> <p><strong>Features:</strong></p> <ul> <li>Responsive: Yes</li> <li>Made with: HTML, CSS, Tailwind</li> <li>React version: Yes</li> <li>Browser Compatibility: Chrome, Opera, Safari, Edge, Firefox</li> </ul> <p>➡️ <a href="https://www.creative-tim.com/twcomponents/component/phone-input-with-country-code" target="_blank">Check Demo</a></p> <h3 id="15-phone-input-with-floating-label">15. Phone Input with Floating Label</h3> <figure class="kg-card kg-image-card"><img src="https://www.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.28.09.png" class="kg-image" alt="tailwind Phone Input with Floating Label" loading="lazy" width="1084" height="214" srcset="https://www.creative-tim.com/blog/content/images/size/w600/2024/09/Screenshot-2024-09-02-at-12.28.09.png 600w, https://blogct.creative-tim.com/blog/content/images/size/w1000/2024/09/Screenshot-2024-09-02-at-12.28.09.png 1000w, https://blogct.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.28.09.png 1084w" sizes="(min-width: 720px) 720px"></figure><p>An input field with a label that floats above the input box when the user begins typing, keeping the input clean and ensuring that users know the expected format for entering phone numbers.</p> <p><strong>Features:</strong></p> <ul> <li>Responsive: Yes</li> <li>Made with: HTML, CSS, Tailwind</li> <li>React version: Yes</li> <li>Browser Compatibility: Chrome, Opera, Safari, Edge, Firefox</li> </ul> <p>➡️ <a href="https://www.creative-tim.com/twcomponents/component/phone-input-with-floating-label" target="_blank">Check Demo</a></p> <h3 id="16-phone-input-with-select">16. Phone Input with Select</h3> <figure class="kg-card kg-image-card"><img src="https://www.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.25.07.png" class="kg-image" alt="tailwind Phone Input with Select" loading="lazy" width="1084" height="196" srcset="https://www.creative-tim.com/blog/content/images/size/w600/2024/09/Screenshot-2024-09-02-at-12.25.07.png 600w, https://blogct.creative-tim.com/blog/content/images/size/w1000/2024/09/Screenshot-2024-09-02-at-12.25.07.png 1000w, https://blogct.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.25.07.png 1084w" sizes="(min-width: 720px) 720px"></figure><p>A phone input field that combines number input with a dropdown selector, allowing users to pick their country code and enter their phone number in one streamlined input area.</p> <p><strong>Features:</strong></p> <ul> <li>Responsive: Yes</li> <li>Made with: HTML, CSS, Tailwind</li> <li>React version: Yes</li> <li>Browser Compatibility: Chrome, Opera, Safari, Edge, Firefox</li> </ul> <p>➡️ <a href="https://www.material-tailwind.com/docs/html/input-phone#input-phone-number-with-select" target="_blank">Check Demo</a></p> <h3 id="17-phone-input-with-authentification-form">17. Phone Input with Authentification Form</h3> <figure class="kg-card kg-image-card"><img src="https://www.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.25.16.png" class="kg-image" alt="tailwind Phone Input with Authentification Form" loading="lazy" width="1088" height="372" srcset="https://www.creative-tim.com/blog/content/images/size/w600/2024/09/Screenshot-2024-09-02-at-12.25.16.png 600w, https://blogct.creative-tim.com/blog/content/images/size/w1000/2024/09/Screenshot-2024-09-02-at-12.25.16.png 1000w, https://blogct.creative-tim.com/blog/content/images/2024/09/Screenshot-2024-09-02-at-12.25.16.png 1088w" sizes="(min-width: 720px) 720px"></figure><p>An input field for entering a phone number as part of an authentication form, offering options for continuing via a traditional button or using alternative methods like signing in with Google.</p> <p><strong>Features:</strong></p> <ul> <li>Responsive: Yes</li> <li>Made with: HTML, CSS, Tailwind</li> <li>React version: Yes</li> <li>Browser Compatibility: Chrome, Opera, Safari, Edge, Firefox</li> </ul> <p>➡️ <a href="https://www.material-tailwind.com/docs/html/input-phone#input-phone-with-authentication-form" target="_blank">Check Demo</a></p>  </div> <div class="container medium"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-tw-components" href="/blog/tw-components/" title="TW Components">TW Components</a> </span> <div class="share u-hover-wrapper"> <a class="share-item share-facebook u-hover-item" href="https://www.facebook.com/sharer.php?u=https://www.creative-tim.com/blog/tw-components/free-tailwind-css-number-inputs/" target="_blank" rel="noopener"><i class="icon icon-facebook"></i></a> <a class="share-item share-twitter u-hover-item" href="https://twitter.com/intent/tweet?url=https://www.creative-tim.com/blog/tw-components/free-tailwind-css-number-inputs/&text=15%2B%20Free%20Tailwind%20CSS%20Number%20Inputs%20for%20your%20Projects" target="_blank" rel="noopener"><i class="icon icon-twitter"></i></a> <a class="share-item share-pinterest u-hover-item" href="https://pinterest.com/pin/create/button/?url=https://www.creative-tim.com/blog/tw-components/free-tailwind-css-number-inputs/&media=&description=15%2B%20Free%20Tailwind%20CSS%20Number%20Inputs%20for%20your%20Projects" target="_blank" rel="noopener" data-pin-do="none"><i class="icon icon-pinterest"></i></a> <a class="share-item share-linkedin u-hover-item" href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.creative-tim.com/blog/tw-components/free-tailwind-css-number-inputs/&title=15%2B%20Free%20Tailwind%20CSS%20Number%20Inputs%20for%20your%20Projects" target="_blank" rel="noopener"><i class="icon icon-linkedin"></i></a> <a class="share-item share-reddit u-hover-item" href="https://reddit.com/submit?url=https://www.creative-tim.com/blog/tw-components/free-tailwind-css-number-inputs/&title=15%2B%20Free%20Tailwind%20CSS%20Number%20Inputs%20for%20your%20Projects" target="_blank" rel="noopener"><i class="icon icon-reddit"></i></a> <a class="share-item share-pocket u-hover-item" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/tw-components/free-tailwind-css-number-inputs/" target="_blank" rel="noopener"><i class="icon icon-pocket"></i></a> </div> <section class="author"> <div class="author-image-placeholder u-placeholder"> <img class="author-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Alexandra Murtaza"> </div> <div class="author-wrapper"> <header class="author-header"> <div class="author-header-wrapper"> <h4 class="author-name">Alexandra Murtaza</h4> <div class="author-social"> <a class="author-social-item author-more" href="/blog/author/alexandra-murtaza/">More posts</a> </div> </div> </header> <div class="author-bio"></div> </div> </section> </div> </article> <div class="navigation container medium"> <div class="navigation-item navigation-previous"> <a class="navigation-item-link button-arrow button-arrow-left" href="/blog/educational-ui-ux/chat-app-design-tips-for-developers/"> <i class="button-arrow-icon icon icon-arrow-left"></i> Previous Post </a> </div> <div class="navigation-item navigation-next"> <a class="navigation-item-link button-arrow button-arrow-right" href="/blog/educational-ui-ux/website-chatbot-ui-design-examples/"> Next Post <i class="button-arrow-icon icon icon-arrow-right"></i> </a> </div> </div> <section class="related-posts container medium"> <h3 class="related-title"><span class="text">You might also like...</span></h3> <div class="row"> <div class="col-md-4 related-column"> <article class="post tag-tw-components"> <div class="post-media"> <div class="u-placeholder rectangle"> <a class="post-image-link" href="/blog/tw-components/top-free-tailwind-css-search-inputs-for-your-website/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2024/08/9-Top-Free-Tailwind-CSS-Search-Inputs-For-Your-Website.jpg 400w, /blog/content/images/size/w750/2024/08/9-Top-Free-Tailwind-CSS-Search-Inputs-For-Your-Website.jpg 750w, /blog/content/images/size/w960/2024/08/9-Top-Free-Tailwind-CSS-Search-Inputs-For-Your-Website.jpg 960w, /blog/content/images/size/w1140/2024/08/9-Top-Free-Tailwind-CSS-Search-Inputs-For-Your-Website.jpg 1140w, /blog/content/images/size/w1920/2024/08/9-Top-Free-Tailwind-CSS-Search-Inputs-For-Your-Website.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2024/08/9-Top-Free-Tailwind-CSS-Search-Inputs-For-Your-Website.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="9 Top Free Tailwind CSS Search Inputs for your Website"> </a> </div> </div> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/tw-components/top-free-tailwind-css-search-inputs-for-your-website/">9 Top Free Tailwind CSS Search Inputs for your Website</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-tw-components" href="https://www.creative-tim.com/blog/tw-components/" title="TW Components">TW Components</a> </span> <span class="post-meta-item post-meta-length"> 3 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-08-13"> Aug 13, 2024 </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-08-09"> Aug 9, 2024 </time> </span> </div> </header> </article> </div> <div class="col-md-4 related-column"> <article class="post tag-tw-components"> <div class="post-media"> <div class="u-placeholder rectangle"> <a class="post-image-link" href="/blog/tw-components/best-tailwind-css-responsive-menu-examples-to-use-now/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2024/08/6-Best-Tailwind-CSS-Responsive-Menu-Examples-To-Use-Now.jpg 400w, /blog/content/images/size/w750/2024/08/6-Best-Tailwind-CSS-Responsive-Menu-Examples-To-Use-Now.jpg 750w, /blog/content/images/size/w960/2024/08/6-Best-Tailwind-CSS-Responsive-Menu-Examples-To-Use-Now.jpg 960w, /blog/content/images/size/w1140/2024/08/6-Best-Tailwind-CSS-Responsive-Menu-Examples-To-Use-Now.jpg 1140w, /blog/content/images/size/w1920/2024/08/6-Best-Tailwind-CSS-Responsive-Menu-Examples-To-Use-Now.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2024/08/6-Best-Tailwind-CSS-Responsive-Menu-Examples-To-Use-Now.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="6 Best Tailwind CSS Responsive Menu Examples To Use Now"> </a> </div> </div> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/tw-components/best-tailwind-css-responsive-menu-examples-to-use-now/">6 Best Tailwind CSS Responsive Menu Examples To Use Now</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-tw-components" href="https://www.creative-tim.com/blog/tw-components/" title="TW Components">TW Components</a> </span> <span class="post-meta-item post-meta-length"> 2 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-08-13"> Aug 13, 2024 </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-08-09"> Aug 9, 2024 </time> </span> </div> </header> </article> </div> <div class="col-md-4 related-column"> <article class="post tag-tw-components"> <div class="post-media"> <div class="u-placeholder rectangle"> <a class="post-image-link" href="/blog/tw-components/how-to-install-tailwindcss-in-laravel-8/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2024/07/How-To-Install-Tailwindcss-In-Laravel-8-.png 400w, /blog/content/images/size/w750/2024/07/How-To-Install-Tailwindcss-In-Laravel-8-.png 750w, /blog/content/images/size/w960/2024/07/How-To-Install-Tailwindcss-In-Laravel-8-.png 960w, /blog/content/images/size/w1140/2024/07/How-To-Install-Tailwindcss-In-Laravel-8-.png 1140w, /blog/content/images/size/w1920/2024/07/How-To-Install-Tailwindcss-In-Laravel-8-.png 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2024/07/How-To-Install-Tailwindcss-In-Laravel-8-.png" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="How to Install Tailwind CSS in Laravel 8"> </a> </div> </div> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/tw-components/how-to-install-tailwindcss-in-laravel-8/">How to Install Tailwind CSS in Laravel 8</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-tw-components" href="https://www.creative-tim.com/blog/tw-components/" title="TW Components">TW Components</a> </span> <span class="post-meta-item post-meta-length"> 1 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-08-09"> Aug 9, 2024 </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-08-09"> Aug 9, 2024 </time> </span> </div> </header> </article> </div> </div> </section> </main> </div> </div> <div class="sidebar-column col-xl-3 col-lg-3 hidden-xs hidden-sm hidden-md"> <aside class="widget-area"> <div class="widget widget-mailchimp u-shadow"> <h4 class="widget-title">Join our newsletter</h4>  <div id="mc_embed_signup"> <form action="https://creative-tim.us3.list-manage.com/subscribe/post?u=ff98cdcf2e6a63f872c65dbfb&id=3ad01d6373&f_id=0092c2e1f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div id="mc_embed_signup_scroll"> <input type="email" value="" name="EMAIL" class="required email" placeholder="Enter your email..." id="mce-EMAIL"> <button class="button-arrow-icon" type="submit" name="subscribe" id="mc-embedded-subscribe"> <i class="icon icon-arrow-right"></i> </button> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div>  <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ff98cdcf2e6a63f872c65dbfb_3ad01d6373" tabindex="-1" value=""></div> </div> </form> </div>  </div> <div class="widget widget-tags u-shadow"> <h4 class="widget-title">Popuplar Tags</h4> <div class="tag-feed"> <div class="tag"> <a class="tag-link" href="/blog/web-design/"> <span class="tag-name">web design</span> <span class="tag-count">376</span> </a> </div> <div class="tag"> <a class="tag-link" href="/blog/web-development/"> <span class="tag-name">Web Development</span> <span class="tag-count">110</span> </a> </div> <div class="tag"> <a class="tag-link" href="/blog/tiktok-learning/"> <span class="tag-name">TikTok Learning</span> <span class="tag-count">87</span> </a> </div> <div class="tag"> <a class="tag-link" href="/blog/educational-tech/"> <span class="tag-name">Educational Tech</span> <span class="tag-count">83</span> </a> </div> <div class="tag"> <a class="tag-link" href="/blog/crypto-news/"> <span class="tag-name">Crypto News</span> <span class="tag-count">82</span> </a> </div> </div> </div> <div class="widget widget-recent u-shadow"> <h4 class="widget-title">Recent Posts</h4> <div class="recent-posts"> <article class="recent"> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/educational-ui-ux/mastering-ui-patterns-components/">Mastering UI Patterns: Essential Components Every Web Designer Should Know</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-length"> 8 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-11-18"> 6 days ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-11-18"> 6 days ago </time> </span> </div> </header> </article> <article class="recent"> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/educational-tech/the-new-material-tailwind-rebuilt/">Build and Ship Production-Ready UIs with the New Material Tailwind – Rebuilt & Refined</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-length"> 4 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-11-06"> 17 days ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-11-06"> 17 days ago </time> </span> </div> </header> </article> <article class="recent"> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/educational-tech/ssl-tls-inspection-critical-for-secure-web-access/">Why SSL/TLS Inspection is Critical for Secure Web Access</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-length"> 6 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-10-30"> 25 days ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-10-30"> 25 days ago </time> </span> </div> </header> </article> </div> </div> <div class="widget widget-recent u-shadow"> <h4 class="widget-title">Short Coding Tutorials</h4> <div class="recent-posts"> <article class="recent"> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/tiktok-learning/tiktok-tutorial-89-how-to-create-a-gravity-button-css/">TikTok Tutorial #89 - How to create a Gravity Button with CSS</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-length"> 3 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-03-01"> 9 months ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-01-30"> 10 months ago </time> </span> </div> </header> </article> <article class="recent"> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/tiktok-learning/tiktok-tutorial-88-how-to-create-a-payment-system/">TikTok Tutorial #88 - How to create a Payment system with CSS & JS</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-length"> 6 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-02-14"> 9 months ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-01-30"> 10 months ago </time> </span> </div> </header> </article> <article class="recent"> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/tiktok-learning/tiktok-tutorial-87-how-to-create-a-teeth-toggle/">TikTok Tutorial #87 - How to create a Teeth toggle</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-length"> 7 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-01-30"> 10 months ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-01-30"> 10 months ago </time> </span> </div> </header> </article> </div> </div></aside> </div> </div> </div> <footer class="site-footer container"> <div> <a class="logo" href="https://www.creative-tim.com/" target="_blank"> <img class="logo-image mb-5 lg:mb-32" src="https://localhost:2368/content/images/2023/02/logo-creative-tim-black.png" alt="Creative Tim"> <img class="logo-image white mb-5 lg:mb-32" src="https://s3.amazonaws.com/creativetim_bucket/static-assets/logo-ct-blog-white.png"> </a> <p class="text-sm text-gray-600 dark:text-gray-400 mb-5 lg:mb-0"> © <script>document.write(new Date().getFullYear())</script><a href="https://www.creative-tim.com/" target="_blank" rel="noopener">  Creative Tim</a>, made with ❤️ for a better web. </a> </p> </div> <ul class="nav block md:flex flex-row"> <li class="text-start sm:mb-0 mb-4"> <div> <h6 class="mb-4 text-sm font-semibold uppercase text-gray-600">Company</h6> <ul class="flex-column mr-6"> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/presentation" rel="nofollow" target="_blank"> About us </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/templates/free" rel="nofollow" target="_blank"> Freebies </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/templates/premium" rel="nofollow" target="_blank"> Premium </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/blog" rel="nofollow" target="_blank"> Blog </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/affiliates/new" rel="nofollow" target="_blank"> Affiliate Program </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/coupon" rel="nofollow" target="_blank"> Get coupon </a> </li> </ul> </div> </li> <li class="text-start md:ml-4 lg:ml-5 sm:mb-0 mb-4"> <div> <h6 class="mb-4 text-sm font-semibold uppercase text-gray-600">Help and Support</h6> <ul class="flex-column mr-6"> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/knowledge-center" rel="nofollow" target="_blank"> Knowledge Center </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/contact-us" target="_blank"> Contact Us </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/support-terms" target="_blank"> Premium Support </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/sponsorships" rel="nofollow" target="_blank"> Sponsorship </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/services/updivision?ref=astro-ecommerce" rel="nofollow" target="_blank"> Custom Development </a> </li> </ul> </div> </li> <li class="text-start lg:ml-5 md:ml-4 sm:mb-0 mb-4"> <div> <h6 class="mb-4 text-sm font-semibold uppercase text-gray-600">Legal</h6> <ul class="flex-column mr-6"> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/knowledge-center/terml-of-service/" rel="nofollow" target="_blank"> Terms & Conditions </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/knowledge-center/privacy-policy/" target="_blank"> Privacy Policy </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/license" target="_blank"> Licenses </a> </li> </ul> </div> </li> <li class="text-start lg:ml-5 md:ml-4 sm:mb-0 mb-4"> <div> <h6 class="mb-4 text-sm font-semibold uppercase text-gray-600">Resources</h6> <ul class="flex-column mr-6"> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/jobs" rel="nofollow" target="_blank">Jobs</a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/cheatsheet/bootstrap4" rel="nofollow" target="_blank">Bootstrap Cheat Sheet</a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/tools" rel="nofollow" target="_blank">Third-Party Tools</a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://iradesign.io/" rel="nofollow" target="_blank">Illustrations</a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/bits" rel="nofollow" target="_blank">Bits</a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.bluehost.com/?utm_medium=affiliate&irpid=105&clickid=P99C105S645N0B9A2D4499E0000V100&pb=affiliate_nonpromo&source=IR&utm_source=IR" rel="nofollow" target="_blank">Bluehost</a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.digitalocean.com/?refcode=276af09d9975&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=CopyPaste" rel="nofollow" target="_blank">Digital Ocean</a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/gallery/get-shit-done-pro" rel="nofollow" target="_blank">Made with Creative Tim</a> </li> </ul> </div> </li> </ul> </footer> </div> <div class="dimmer"></div> <div class="off-canvas"> <div class="canvas-close"> <i class="canvas-icon icon icon-window-close"></i> </div> <div class="mobile-menu"></div> </div> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"> </script> <script src="/blog/assets/built/main.min.js?v=bc77caee98"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js" integrity="sha512-9khQRAUBYEJDCDVP2yw3LRUQvjJ0Pjx0EShmaQjcHa6AXiOv6qHQu9lCAIR8O+/D8FtaCoJ2c0Tf9Xo7hYH01Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-fTl/qcO1VgvKtOMApX2PdZzkziyr2stM65GYPLGuYMnuMm1z2JLJG6XVU7C/mR+E7xBUqCivykuhlzfqxXBXbg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://polyfill.io/v3/polyfill.min.js?features=Promise%2CObject.entries%2CObject.assign"></script> <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.14.3/dist/algoliasearch.umd.js" integrity="sha256-xpIeHMyr5dPVIcLjKZ9plxUrg4lFJ11AMdoPLDEYtPk=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script> <script type="text/javascript"> docsearch({ container: '#docsearch', appId: 'H5FHEK3TTR', indexName: 'creative-tim', apiKey: 'a322bdccce45153c3270b08da1a1c6e7', debug: true }); </script> <script type="text/javascript"> var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("navbar").style.top = "0"; } else { document.getElementById("navbar").style.top = "-135px"; } prevScrollpos = currentScrollPos; } </script> </body> </html>

CINXE.COM

15+ Free Tailwind CSS Number Inputs for your Projects