Phone Input with Icon 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="" <span="" inset-y-0="" left-0="" flex="" items-center="" pl-3\">\r\n="" <svg="" xmlns="\"http:\/\/www.w3.org\/2000\/svg\"" viewbox="\"0" 0="" 24="" 24\"="" fill="\"currentColor\"" h-4\">\r\n="" <path="" fill-rule="\"evenodd\"" d="\"M1.5" 4.5a3="" 3="" 1="" 3-3h1.372c.86="" 1.61.586="" 1.819="" 1.42l1.105="" 4.423a1.875="" 1.875="" 1-.694="" 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285="" 11.285="" 6.697="" 6.697c.103.038.25.009.352-.126l.97-1.293a1.875="" 1.955-.694l4.423="" 1.105c.834.209="" 1.42.959="" 1.42="" 1.82v19.5a3="" 1-3="" 3h-2.25c8.552="" 22.5="" 1.5="" 15.448="" 6.75v4.5z\"="" clip-rule="\"evenodd\"" \="" svg>\r\n="" span>\r\n="" <input\r\n="" id="\"contactNumber\"\r\n" h-10="" bg-transparent="" placeholder:text-slate-400="" border="" border-slate-200="" rounded="" pl-10="" pr-3="" transition="" duration-300="" ease="" focus:outline-none="" focus:border-slate-400="" hover:border-slate-400="" shadow-sm="" focus:shadow-md\"\r\n="" placeholder="\"e.g.," +1="" 123-456-7890\"\r\n="" pattern="\"^\\+\\d{1,3}\\s\\d{1,3}-\\d{3}-\\d{4}$\"\r\n" title="\"Phone" number="" must="" be="" in="" the="" format:="" maxlength="\"16\"\r\n" required\r\n="" div>\r\n="" <p="" text-xs="" text-slate-500\">\r\n="" include="" your="" country="" code="" for="" international="" numbers.\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":328,"popularity":9,"slug":"phone-input-with-icon","approved":1,"created_at":"2024-08-30t00:00:00.000000z","updated_at":"2024-11-13t02:38:48.000000z","downloads":2,"code_views":25,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\="" cdn.tailwindcss.com","should_tweet":0,"media":[{"id":12545,"model_type":"app\\component","model_id":7099,"collection_name":"preview","name":"temp80097","file_name":"temp80097.png","mime_type":"image\="" png","disk":"public","size":22502,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp80097___media_library_original_1280_957.png","temp80097___media_library_original_1070_800.png","temp80097___media_library_original_895_669.png"],"base64svg":"data:image\="" svg+xml;base64,pcfet0nuwvbfihn2zybqvujmsumgii0vl1czqy8vrfreifnwryaxljevl0voiiaiahr0cdovl3d3dy53my5vcmcvr3jhcghpy3mvu1zhlzeums9eveqvc3znmteuzhrkij4kphn2zyb2zxjzaw9upsixljeiihhtbg5zpsjodhrwoi8vd3d3lnczlm9yzy8ymdawl3n2zyigeg1sbnm6egxpbms9imh0dha6ly93d3cudzmub3jnlze5otkvegxpbmsiihhtbdpzcgfjzt0ichjlc2vydmuiihg9ijaicib5psiwiib2awv3qm94psiwidagmti4mca5ntcipgojpgltywdlihdpzhropsixmjgwiibozwlnahq9ijk1nyigegxpbms6ahjlzj0izgf0ytppbwfnzs9qcgvno2jhc2u2ncwvowovnefbuvnrwkpsz0fcqvffqvlbqmdbquqvl2dbn1exskzrvljqvwpvz1oyuxrhbkjswnlcmk1tnhdjq2gxyzjsdvp5qkpta2nnu2xcrlj5qjjprefwtencegrxrnnhwfi1suqwz09uqusvoxnbuxdbrefnsurbz0leqxdnrejbturcqvvjqlfvrujbvutcd2nhq0f3s0rbd0xdz3nmrfe0u0vbme9futrmq3hbv0vcrvrgqlvwrlf3uez4z1dgqmdtrkjvvs85c0frd0veqkfrrkjbvupcuvvkrkewtersuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvlzhbquvrz0fhqufnqxdfukfbsvjbuu1sqwyvrufcoefbquvgqvffqkfrrujbqufbqufbqufbqujbz01fqlfzsenba0tdly9fquxvuufbsujbd01dqkfnrkjruuvbqufczlffq0f3quvfuvvtsvrgqkjotljzuwnpy1jrewdar2hdq05dc2nfvlv0shdkre5py29jsknowvhhqmthslnzbktda3forfuytnpnnu9rtkvsvvpiu0vss1uxulzwbgrzv1zwalphvm1ammhwyw5omgrywjnlsgw2zzrtrmhvzulpwxftazvtvmxwzvltwnfpbzztbhbxzw9xyxf5czdtmxryztr1ynjddzhurnhzzkl5y3jtmdluvjf0zlkyzhjonhvqazvlym42t25xogzmejlqwdi5l2o1k3yvrufcoejbqu1cqvffqkfrrujbuuvbqufbqufbqujbz01fqlfzsenba0tdly9fquxvukfbsujbz1ffqxdrsejruuvbquvdzhdbqkfntvjcqvvotvfzu1fwruhzwevuswplqkncuknryud4d1frak0xthdgv0p5mffvv0pevghkzkvyr0jryuppy29lu28xtmpjne9ucersrvzhujboslnstlvwvlpyv0zsyvkyumxabwrvyvdwemrivjjkm2g1zw9lrghjv0donglkaxblvgxkv1dsnwlabxflanblv21wnmlwcxjlenrmvzj0n2k1dxnmrhhnwed4ogpkexrmvdfowfcxowpamnvmajvpwg01k2pwnnzmejlqwdi5l2o1k3yvyufbd0rbuufdrvfnukfeoeevu2l2vfbqrtndz0ezq2dcyuffufnnq25jrnljtffnzgi3z09ubwdsyuhtz0juelfbm3l4uufiqlfbngnvqwyvmle9psi+cgk8l2ltywdlpgo8l3n2zz4=""}},"order_column":2,"created_at":"2024-08-30T14:05:48.000000Z","updated_at":"2024-08-30T14:05:49.000000Z","conversions_disk":"public","uuid":"c151375d-310a-4b81-860c-22adf24c0756","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/12545\/temp80097.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":7099,"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="" 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":7099,"tag_id":101}}],"fork":null,"favorites":[]}"="" :edit="false"> Full screen Preview

Download