Phone Input with Validation for Tailwind CSS

"="" \r\n="" w-full="" px-4="" py-2="" text-center="" text-slate-700="" transition-all\"\r\n="" >\r\n="" more="" components="" on="" <b>material="" tailwind<\="" b>.\r\n="" <\="" a>\r\n="" div>\r\n\r\n="" <div="" max-w-sm="" min-w-[200px]\">\r\n="" <label="" mb-1="" text-sm="" text-slate-800\">\r\n="" contact="" number\r\n="" label>\r\n="" <input\r\n="" id="\"contactNumber\"\r\n" h-10="" bg-transparent="" placeholder:text-green-500="" text-green-700="" border="" border-green-400="" rounded="" px-3="" transition="" duration-300="" ease="" focus:outline-none="" focus:border-green-500="" hover:border-green-500="" shadow-sm="" focus:shadow-md\"\r\n="" value="\"+1" 123-456-7890\"\r\n="" maxlength="\"16\"\r\n" title="\"Phone" number="" format:="" +1="" placeholder="\"e.g.," \="" <p="" items-center="" mt-2="" text-xs="" text-green-500\">\r\n="" great!="" your="" phone="" is="" valid.\r\n="" p>="" div>\r\n="" min-w-[200px]="" mt-5\">\r\n="" placeholder:text-red-500="" text-red-700="" border-red-400="" focus:border-red-500="" hover:border-red-500="" text-red-500\">\r\n="" <svg="" xmlns="\"http:\/\/www.w3.org\/2000\/svg\"" viewbox="\"0" 0="" 24="" 24\"="" fill="\"currentColor\"" h-5="" mr-2="" <path="" fill-rule="\"evenodd\"\r\n" 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="" 01.67="" 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75="" 11-.671-1.34l.041-.022zm12="" 9a.75.75="" 100-1.5.75.75="" 000="" 1.5z\"\r\n="" clip-rule="\"evenodd\"><\/path>\r\n" svg>\r\n="" please="" match="" the="" requested="" format.="" e.g.,="" 123-456-7890\r\n="" p>\r\n="" div>\r\n<\="" div>","author_type":"app\\user","author_id":19943,"collection_id":1,"fork_id":null,"votes":0,"score":"0.0","visits":174,"popularity":90,"slug":"phone-input-with-validation","approved":1,"created_at":"2024-08-30t00:00:00.000000z","updated_at":"2024-09-19t02:15:50.000000z","downloads":3,"code_views":38,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\="" cdn.tailwindcss.com","should_tweet":0,"media":[{"id":12546,"model_type":"app\\component","model_id":7098,"collection_name":"preview","name":"temp66485","file_name":"temp66485.png","mime_type":"image\="" png","disk":"public","size":31779,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp66485___media_library_original_1280_957.png","temp66485___media_library_original_1070_800.png","temp66485___media_library_original_895_669.png","temp66485___media_library_original_749_560.png"],"base64svg":"data:image\="" svg+xml;base64,pcfet0nuwvbfihn2zybqvujmsumgii0vl1czqy8vrfreifnwryaxljevl0voiiaiahr0cdovl3d3dy53my5vcmcvr3jhcghpy3mvu1zhlzeums9eveqvc3znmteuzhrkij4kphn2zyb2zxjzaw9upsixljeiihhtbg5zpsjodhrwoi8vd3d3lnczlm9yzy8ymdawl3n2zyigeg1sbnm6egxpbms9imh0dha6ly93d3cudzmub3jnlze5otkvegxpbmsiihhtbdpzcgfjzt0ichjlc2vydmuiihg9ijaicib5psiwiib2awv3qm94psiwidagmti4mca5ntcipgojpgltywdlihdpzhropsixmjgwiibozwlnahq9ijk1nyigegxpbms6ahjlzj0izgf0ytppbwfnzs9qcgvno2jhc2u2ncwvowovnefbuvnrwkpsz0fcqvffqvlbqmdbquqvl2dbn1exskzrvljqvwpvz1oyuxrhbkjswnlcmk1tnhdjq2gxyzjsdvp5qkpta2nnu2xcrlj5qjjprefwtencegrxrnnhwfi1suqwz09uqusvoxnbuxdbrefnsurbz0leqxdnrejbturcqvvjqlfvrujbvutcd2nhq0f3s0rbd0xdz3nmrfe0u0vbme9futrmq3hbv0vcrvrgqlvwrlf3uez4z1dgqmdtrkjvvs85c0frd0veqkfrrkjbvupcuvvkrkewtersuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvlzhbquvrz0fhqufnqxdfukfbsvjbuu1sqwyvrufcoefbquvgqvffqkfrrujbqufbqufbqufbqujbz01fqlfzsenba0tdly9fquxvuufbsujbd01dqkfnrkjruuvbqufczlffq0f3quvfuvvtsvrgqkjotljzuwnpy1jrewdar2hdq05dc2nfvlv0shdkre5py29jsknowvhhqmthslnzbktda3forfuytnpnnu9rtkvsvvpiu0vss1uxulzwbgrzv1zwalphvm1ammhwyw5omgrywjnlsgw2zzrtrmhvzulpwxftazvtvmxwzvltwnfpbzztbhbxzw9xyxf5czdtmxryztr1ynjddzhurnhzzkl5y3jtmdluvjf0zlkyzhjonhvqazvlym42t25xogzmejlqwdi5l2o1k3yvrufcoejbqu1cqvffqkfrrujbuuvbqufbqufbqujbz01fqlfzsenba0tdly9fquxvukfbsujbz1ffqxdrsejruuvbquvdzhdbqkfntvjcqvvotvfzu1fwruhzwevuswplqkncuknryud4d1frak0xthdgv0p5mffvv0pevghkzkvyr0jryuppy29lu28xtmpjne9ucersrvzhujboslnstlvwvlpyv0zsyvkyumxabwrvyvdwemrivjjkm2g1zw9lrghjv0donglkaxblvgxkv1dsnwlabxflanblv21wnmlwcxjlenrmvzj0n2k1dxnmrhhnwed4ogpkexrmvdfowfcxowpamnvmajvpwg01k2pwnnzmejlqwdi5l2o1k3yvyufbd0rbuufdrvfnukfeoeevu2c4q3zuufbjmmxdowfbqlprm1nnq1fjmefjzwxbr2zkrmpjrke0cfhiwnntz1hhs1lxc1domg9fs2vhqudhslnja1vgwezdqvvcy2rru2yvl1oipgojpc9pbwfnzt4kpc9zdmc+"}},"order_column":2,"created_at":"2024-08-30t14:07:05.000000z","updated_at":"2024-08-30t14:07:06.000000z","conversions_disk":"public","uuid":"20e9afc9-4331-48fe-8f16-ee0ce72428ee","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\="" tailwindcomponents.com\="" storage\="" 12546\="" temp66485.png","preview_url":""}],"author":{"id":19943,"name":"ale","slug":"ale-2","bio":null,"avatar":"https:\="" www.gravatar.com\="" avatar\="" 284fdb288be2f2e9668a366fcdd56dbd","header":null,"created_at":"2024-07-24t08:17:13.000000z","updated_at":"2024-07-24t08:17:13.000000z"},"tags":[{"id":12,"name":{"en":"inputs"},"description":"find="" inspiration="" with="" our="" collection="" of="" free="" input="" examples.="" copy="" and="" paste="" them="" into="" app="" spend="" less="" time="" coding.","meta_description":"find="" coding.","slug":{"en":"inputs"},"type":null,"order_column":6,"created_at":"2020-09-29t11:58:52.000000z","updated_at":"2022-08-01t16:21:48.000000z","pivot":{"taggable_type":"app\\component","taggable_id":7098,"tag_id":12}},{"id":101,"name":{"en":"number="" input"},"description":"utilize="" numeric="" component="" to="" assign="" numerical="" values="" within="" a="" form="" field,="" employing="" various="" styles,="" variants,="" layouts="" adaptable="" for="" product="" pages,="" forms,="" diverse="" interfaces.","meta_description":"utilize="" interfaces.","slug":{"en":"number-input"},"type":null,"order_column":90,"created_at":"2023-11-21t15:59:41.000000z","updated_at":"2023-11-21t15:59:41.000000z","pivot":{"taggable_type":"app\\component","taggable_id":7098,"tag_id":101}}],"fork":null,"favorites":[]}"="" :edit="false"> Full screen Preview

Download