Datepicker with TailwindCSS and AlpineJS

A fully working date picker

Share

/r/n <script src=https://www.creative-tim.com/"https:////cdn.jsdelivr.net//gh//alpinejs//alpine@v2.x.x//dist//alpine.js/" defer><\/script>\r\n\r\n <style>\r\n [x-cloak] {\r\n display: none;\r\n }\r\n <\/style>\r\n\r\n <div class=\"antialiased sans-serif\">\r\n <div x-data=\"app()\" x-init=\"[initDate(), getNoOfDays()]\" x-cloak>\r\n <div class=\"container mx-auto px-4 py-2 md:py-10\">\r\n <div class=\"mb-5 w-64\">\r\n\r\n <label for=\"datepicker\" class=\"font-bold mb-1 text-gray-700 block\">Select Date<\/label>\r\n <div class=\"relative\">\r\n <input type=\"hidden\" name=\"date\" x-ref=\"date\">\r\n <input \r\n type=\"text\"\r\n readonly\r\n x-model=\"datepickerValue\"\r\n @click=\"showDatepicker = !showDatepicker\"\r\n @keydown.escape=\"showDatepicker = false\"\r\n class=\"w-full pl-4 pr-10 py-3 leading-none rounded-lg shadow-sm focus:outline-none focus:shadow-outline text-gray-600 font-medium\"\r\n placeholder=\"Select date\">\r\n\r\n <div class=\"absolute top-0 right-0 px-3 py-2\">\r\n <svg class=\"h-6 w-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"\/>\r\n <\/svg>\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div \r\n class=\"bg-white mt-12 rounded-lg shadow p-4 absolute top-0 left-0\" \r\n style=\"width: 17rem\" \r\n x-show.transition=\"showDatepicker\"\r\n @click.away=\"showDatepicker = false\">\r\n\r\n <div class=\"flex justify-between items-center mb-2\">\r\n <div>\r\n <span x-text=\"MONTH_NAMES[month]\" class=\"text-lg font-bold text-gray-800\"><\/span>\r\n <span x-text=\"year\" class=\"ml-1 text-lg text-gray-600 font-normal\"><\/span>\r\n <\/div>\r\n <div>\r\n <button \r\n type=\"button\"\r\n class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full\" \r\n :class=\"{'cursor-not-allowed opacity-25': month == 0 }\"\r\n :disabled=\"month == 0 ? true : false\"\r\n @click=\"month--; getNoOfDays()\">\r\n <svg class=\"h-6 w-6 text-gray-500 inline-flex\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"\/>\r\n <\/svg> \r\n <\/button>\r\n <button \r\n type=\"button\"\r\n class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full\" \r\n :class=\"{'cursor-not-allowed opacity-25': month == 11 }\"\r\n :disabled=\"month == 11 ? true : false\"\r\n @click=\"month++; getNoOfDays()\">\r\n <svg class=\"h-6 w-6 text-gray-500 inline-flex\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"\/>\r\n <\/svg>\t\t\t\t\t\t\t\t\t \r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex flex-wrap mb-3 -mx-1\">\r\n <template x-for=\"(day, index) in DAYS\" :key=\"index\">\t\r\n <div style=\"width: 14.26%\" class=\"px-1\">\r\n <div\r\n x-text=\"day\" \r\n class=\"text-gray-800 font-medium text-center text-xs\"><\/div>\r\n <\/div>\r\n <\/template>\r\n <\/div>\r\n\r\n <div class=\"flex flex-wrap -mx-1\">\r\n <template x-for=\"blankday in blankdays\">\r\n <div \r\n style=\"width: 14.28%\"\r\n class=\"text-center border p-1 border-transparent text-sm\"\t\r\n ><\/div>\r\n <\/template>\t\r\n <template x-for=\"(date, dateIndex) in no_of_days\" :key=\"dateIndex\">\t\r\n <div style=\"width: 14.28%\" class=\"px-1 mb-1\">\r\n <div\r\n @click=\"getDateValue(date)\"\r\n x-text=\"date\"\r\n class=\"cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100\"\r\n :class=\"{'bg-blue-500 text-white': isToday(date) == true, 'text-gray-700 hover:bg-blue-200': isToday(date) == false }\"\t\r\n ><\/div>\r\n <\/div>\r\n <\/template>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\t \r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const MONTH_NAMES = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\r\n const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\r\n\r\n function app() {\r\n return {\r\n showDatepicker: false,\r\n datepickerValue: '',\r\n\r\n month: '',\r\n year: '',\r\n no_of_days: [],\r\n blankdays: [],\r\n days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],\r\n\r\n initDate() {\r\n let today = new Date();\r\n this.month = today.getMonth();\r\n this.year = today.getFullYear();\r\n this.datepickerValue = new Date(this.year, this.month, today.getDate()).toDateString();\r\n },\r\n\r\n isToday(date) {\r\n const today = new Date();\r\n const d = new Date(this.year, this.month, date);\r\n\r\n return today.toDateString() === d.toDateString() ? true : false;\r\n },\r\n\r\n getDateValue(date) {\r\n let selectedDate = new Date(this.year, this.month, date);\r\n this.datepickerValue = selectedDate.toDateString();\r\n\r\n this.$refs.date.value = selectedDate.getFullYear() +\"-\"+ ('0'+ selectedDate.getMonth()).slice(-2) +\"-\"+ ('0' + selectedDate.getDate()).slice(-2);\r\n\r\n console.log(this.$refs.date.value);\r\n\r\n this.showDatepicker = false;\r\n },\r\n\r\n getNoOfDays() {\r\n let daysInMonth = new Date(this.year, this.month + 1, 0).getDate();\r\n\r\n \/\/ find where to start calendar day of week\r\n let dayOfWeek = new Date(this.year, this.month).getDay();\r\n let blankdaysArray = [];\r\n for ( var i=1; i <= dayOfWeek; i++) {\r\n blankdaysArray.push(i);\r\n }\r\n\r\n let daysArray = [];\r\n for ( var i=1; i <= daysInMonth; i++) {\r\n daysArray.push(i);\r\n }\r\n\r\n this.blankdays = blankdaysArray;\r\n this.no_of_days = daysArray;\r\n }\r\n }\r\n }\r\n <\/script>\r\n <\/div>\r\n<\/div>","author_type":"App\\User","author_id":278,"collection_id":null,"fork_id":null,"votes":143,"score":"4.4","visits":114071,"popularity":20214,"slug":"datepicker-with-tailwindcss-and-alpinejs","approved":1,"created_at":"2020-04-08T06:07:05.000000Z","updated_at":"2024-09-19T05:11:09.000000Z","downloads":3879,"code_views":54021,"center":true,"notified":1,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/unpkg.com\/tailwindcss@1.2.0\/dist\/tailwind.min.css","should_tweet":1,"media":[{"id":1007,"model_type":"App\\Component","model_id":329,"collection_name":"preview","name":"temp81362","file_name":"temp81362.png","mime_type":"image\/png","disk":"public","size":30713,"manipulations":[],"custom_properties":{"generated_conversions":{"thumb":true,"ogimage":true}},"responsive_images":{"medialibrary_original":{"urls":["temp81362___medialibrary_original_1280_957.png","temp81362___medialibrary_original_1070_799.png","temp81362___medialibrary_original_895_669.png","temp81362___medialibrary_original_749_559.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FGd0FmQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvU0tXNlNIN3hBcjB6enhzZDdISTJGWUUwQVRCcUFGM1VBUXpXY2R3UG5GUksvUXFOdW95SFQ0b1czS09hejk0MHZFMGs4a0p6MXBlOEY0bGR3QzN5OUsxajVtYnRmUUtxeElVV0FLTEFGQUgvOWs9Ij4KCTwvaW1hZ2U+Cjwvc3ZnPg=="}},"order_column":991,"created_at":"2020-04-08T06:07:09.000000Z","updated_at":"2020-09-25T21:39:18.000000Z","conversions_disk":"public","uuid":"3de8dae0-8bf1-4c1c-9c11-fc539178ce2f","generated_conversions":null,"original_url":"https:\/\/tailwindcomponents.com\/storage\/1007\/temp81362.png","preview_url":""}],"author":{"id":278,"name":"mithicher","slug":"mithicher","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/653167205140434944\/M2z8w8DT_normal.png","header":null,"created_at":"2020-01-02T16:09:46.000000Z","updated_at":"2020-01-02T16:09:46.000000Z"},"tags":[{"id":15,"name":{"en":"Alpinejs"},"description":"Explore our components examples built with Tailwind & Alpinejs. Use the snippets to preview and copy\/paste the code.","meta_description":"Explore our components examples built with Tailwind & Alpinejs. Use the snippets to preview and copy\/paste the code.","slug":{"en":"alpinejs"},"type":null,"order_column":1,"created_at":"2021-02-16T17:13:07.000000Z","updated_at":"2023-10-27T13:23:58.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":329,"tag_id":15}},{"id":5,"name":{"en":"Widget"},"description":"Check out our collection of 500+ widget examples. Use our snippets to preview the code and spend less time re-inventing the wheel.","meta_description":"Check out our collection of 500+ widget examples. Use our snippets to preview the code and spend less time re-inventing the wheel.","slug":{"en":"widget"},"type":null,"order_column":14,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:16:36.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":329,"tag_id":5}},{"id":39,"name":{"en":"Datepicker"},"description":"See below our collection of Datepickers that you can add directly to your web project.","meta_description":"Visit our Datepickers collection that you can add to your Tailwind UI project to manage events and activities.","slug":{"en":"datepicker"},"type":null,"order_column":38,"created_at":"2022-08-31T14:26:27.000000Z","updated_at":"2022-12-21T11:01:11.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":329,"tag_id":39}}],"fork":null,"favorites":[{"id":3346,"name":"makanddream","slug":"makanddream","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/60671162?v=4","header":null,"created_at":"2021-05-06T22:20:49.000000Z","updated_at":"2021-05-06T22:20:49.000000Z","pivot":{"component_id":329,"user_id":3346}},{"id":3651,"name":"rammsesgit","slug":"rammsesgit","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/22653743?v=4","header":null,"created_at":"2021-05-31T13:11:56.000000Z","updated_at":"2021-05-31T13:11:56.000000Z","pivot":{"component_id":329,"user_id":3651}},{"id":920,"name":"yareyaredesuyo","slug":"yareyaredesuyo","bio":null,"avatar":"https:\/\/avatars0.githubusercontent.com\/u\/31843888?v=4","header":null,"created_at":"2020-07-14T12:37:37.000000Z","updated_at":"2020-07-14T12:37:37.000000Z","pivot":{"component_id":329,"user_id":920}},{"id":3779,"name":"pavlentij","slug":"pavlentij","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/971128?v=4","header":null,"created_at":"2021-06-08T11:45:28.000000Z","updated_at":"2021-06-08T11:45:28.000000Z","pivot":{"component_id":329,"user_id":3779}},{"id":3038,"name":"lohnsonok","slug":"lohnsonok","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/60504466?v=4","header":null,"created_at":"2021-04-11T20:40:20.000000Z","updated_at":"2021-04-11T20:40:20.000000Z","pivot":{"component_id":329,"user_id":3038}},{"id":3558,"name":"whoisthisstud","slug":"whoisthisstud","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/44807533?v=4","header":null,"created_at":"2021-05-25T15:23:04.000000Z","updated_at":"2021-05-25T15:23:04.000000Z","pivot":{"component_id":329,"user_id":3558}},{"id":3917,"name":"zuiderzee7","slug":"zuiderzee7","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/37395331?v=4","header":null,"created_at":"2021-06-18T04:44:25.000000Z","updated_at":"2021-06-18T04:44:25.000000Z","pivot":{"component_id":329,"user_id":3917}},{"id":3924,"name":"mizumizuriced","slug":"mizumizuriced","bio":null,"avatar":"\/storage\/avatars\/RXkz2hP4YDW31j93XUNVQ8HUwTEOGhc3SkIXiJeb.jpg","header":null,"created_at":"2021-06-18T13:42:01.000000Z","updated_at":"2021-06-23T11:42:59.000000Z","pivot":{"component_id":329,"user_id":3924}},{"id":3954,"name":"sahilofficial671","slug":"sahilofficial671","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/55436684?v=4","header":null,"created_at":"2021-06-21T08:23:41.000000Z","updated_at":"2021-06-21T08:23:41.000000Z","pivot":{"component_id":329,"user_id":3954}},{"id":4075,"name":"bajro17","slug":"bajro17","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/796e85a3ea9beb39317ff2b37e69fc9f","header":null,"created_at":"2021-06-30T12:35:21.000000Z","updated_at":"2023-01-28T23:48:32.000000Z","pivot":{"component_id":329,"user_id":4075}},{"id":2012,"name":"sergii","slug":"sergii","bio":null,"avatar":"https:\/\/avatars2.githubusercontent.com\/u\/641426?v=4","header":null,"created_at":"2021-01-19T10:36:31.000000Z","updated_at":"2021-01-19T10:36:31.000000Z","pivot":{"component_id":329,"user_id":2012}},{"id":3081,"name":"Taniform","slug":"taniform","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/7942529?v=4","header":null,"created_at":"2021-04-16T10:08:01.000000Z","updated_at":"2021-04-16T10:08:01.000000Z","pivot":{"component_id":329,"user_id":3081}},{"id":4200,"name":"Carl M","slug":"carl-m","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/9c2d9c73920c971cd33ca27b59f3e2a9","header":null,"created_at":"2021-07-12T03:37:13.000000Z","updated_at":"2021-07-12T03:37:13.000000Z","pivot":{"component_id":329,"user_id":4200}},{"id":4237,"name":"erkobridee","slug":"erkobridee","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/342471?v=4","header":null,"created_at":"2021-07-14T06:40:38.000000Z","updated_at":"2021-07-14T06:40:38.000000Z","pivot":{"component_id":329,"user_id":4237}},{"id":4430,"name":"Louie Lapig","slug":"louie-lapig","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/70d4d9c6154fd2ec50af326eb8959b51","header":null,"created_at":"2021-07-30T03:38:08.000000Z","updated_at":"2021-07-30T03:38:08.000000Z","pivot":{"component_id":329,"user_id":4430}},{"id":4527,"name":"kolin-newby","slug":"kolin-newby","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/43395763?v=4","header":null,"created_at":"2021-08-06T18:21:08.000000Z","updated_at":"2021-08-06T18:21:08.000000Z","pivot":{"component_id":329,"user_id":4527}},{"id":4124,"name":"Lino93","slug":"lino93","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/83257872?v=4","header":null,"created_at":"2021-07-05T01:53:30.000000Z","updated_at":"2021-07-05T01:53:30.000000Z","pivot":{"component_id":329,"user_id":4124}},{"id":4591,"name":"multiarts","slug":"multiarts","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/2017998?v=4","header":null,"created_at":"2021-08-13T05:09:35.000000Z","updated_at":"2021-08-13T05:09:35.000000Z","pivot":{"component_id":329,"user_id":4591}},{"id":4535,"name":"JackTPatterson","slug":"jacktpatterson","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/30124570?v=4","header":null,"created_at":"2021-08-07T19:36:38.000000Z","updated_at":"2021-08-07T19:36:38.000000Z","pivot":{"component_id":329,"user_id":4535}},{"id":4673,"name":"House2k","slug":"house2k","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/c9efcdfc134a791dbc9e393f263e4f0a","header":null,"created_at":"2021-08-18T22:40:44.000000Z","updated_at":"2021-08-18T22:40:44.000000Z","pivot":{"component_id":329,"user_id":4673}},{"id":4762,"name":"H. Kamran","slug":"h-kamran","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/a98030a051cffec0eb56748066f30d8c","header":null,"created_at":"2021-08-26T18:43:16.000000Z","updated_at":"2021-08-26T18:43:16.000000Z","pivot":{"component_id":329,"user_id":4762}},{"id":5124,"name":"kakhagh","slug":"kakhagh","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/7278525?v=4","header":null,"created_at":"2021-09-20T14:30:14.000000Z","updated_at":"2021-09-20T14:30:14.000000Z","pivot":{"component_id":329,"user_id":5124}},{"id":3260,"name":"KadekM","slug":"kadekm","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/4306279?v=4","header":null,"created_at":"2021-04-30T19:20:41.000000Z","updated_at":"2021-04-30T19:20:41.000000Z","pivot":{"component_id":329,"user_id":3260}},{"id":5627,"name":"Santiago Gorbea","slug":"santiago-gorbea","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/5938d6d330ce5376c798916e884162c8","header":null,"created_at":"2021-10-30T20:37:34.000000Z","updated_at":"2021-10-30T20:37:34.000000Z","pivot":{"component_id":329,"user_id":5627}},{"id":6099,"name":"codearemo","slug":"codearemo","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/23237200?v=4","header":null,"created_at":"2021-12-09T08:56:00.000000Z","updated_at":"2021-12-09T08:56:00.000000Z","pivot":{"component_id":329,"user_id":6099}},{"id":89,"name":"bendo01","slug":"bendo01","bio":null,"avatar":"https:\/\/avatars1.githubusercontent.com\/u\/275325?v=4","header":null,"created_at":"2019-09-15T15:38:13.000000Z","updated_at":"2019-09-15T15:38:13.000000Z","pivot":{"component_id":329,"user_id":89}},{"id":6545,"name":"lexprimost","slug":"lexprimost","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/5768206?v=4","header":null,"created_at":"2022-01-17T00:55:44.000000Z","updated_at":"2022-01-17T00:55:44.000000Z","pivot":{"component_id":329,"user_id":6545}},{"id":6695,"name":"Arijul Islam","slug":"arijul-islam","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/da91634e524611ff5f75e818755e9b92","header":null,"created_at":"2022-01-27T19:24:22.000000Z","updated_at":"2022-01-27T19:24:22.000000Z","pivot":{"component_id":329,"user_id":6695}},{"id":6593,"name":"enucem","slug":"enucem","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/2001287?v=4","header":null,"created_at":"2022-01-21T00:22:19.000000Z","updated_at":"2022-01-21T00:22:19.000000Z","pivot":{"component_id":329,"user_id":6593}},{"id":7582,"name":"kesiriTyota","slug":"kesirityota","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/23411879?v=4","header":null,"created_at":"2022-04-19T14:54:05.000000Z","updated_at":"2022-04-19T14:54:05.000000Z","pivot":{"component_id":329,"user_id":7582}},{"id":1514,"name":"Danny Festor","slug":"danny-festor","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/1ee7dd07cd7475effe60b31460a19234","header":null,"created_at":"2020-11-11T01:27:08.000000Z","updated_at":"2020-11-11T01:27:08.000000Z","pivot":{"component_id":329,"user_id":1514}},{"id":8112,"name":"nvcdv29","slug":"nvcdv29","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/69216296?v=4","header":null,"created_at":"2022-06-12T04:31:43.000000Z","updated_at":"2022-06-12T04:31:43.000000Z","pivot":{"component_id":329,"user_id":8112}},{"id":4275,"name":"xuling1979","slug":"xuling1979","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/84264857?v=4","header":null,"created_at":"2021-07-17T13:42:39.000000Z","updated_at":"2021-07-17T13:42:39.000000Z","pivot":{"component_id":329,"user_id":4275}},{"id":9057,"name":"TVBZ","slug":"tvbz","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/43469713?v=4","header":null,"created_at":"2022-09-14T18:12:44.000000Z","updated_at":"2022-09-14T18:12:44.000000Z","pivot":{"component_id":329,"user_id":9057}},{"id":9100,"name":"Matthew Fainman","slug":"matthew-fainman","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/e9646acdf1de773605f71761456c238b","header":null,"created_at":"2022-09-19T14:05:17.000000Z","updated_at":"2022-09-19T14:05:17.000000Z","pivot":{"component_id":329,"user_id":9100}},{"id":9173,"name":"Wycers","slug":"wycers","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/17094433?v=4","header":null,"created_at":"2022-09-26T03:59:50.000000Z","updated_at":"2022-09-26T03:59:50.000000Z","pivot":{"component_id":329,"user_id":9173}},{"id":4755,"name":"Osalumense","slug":"osalumense","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/43953425?v=4","header":null,"created_at":"2021-08-26T08:06:42.000000Z","updated_at":"2021-08-26T08:06:42.000000Z","pivot":{"component_id":329,"user_id":4755}},{"id":9406,"name":"alexandermitsyk","slug":"alexandermitsyk","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/15364563?v=4","header":null,"created_at":"2022-10-17T11:33:48.000000Z","updated_at":"2022-10-17T11:33:48.000000Z","pivot":{"component_id":329,"user_id":9406}},{"id":9519,"name":"alexanderladin","slug":"alexanderladin","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/89668275?v=4","header":null,"created_at":"2022-10-25T22:55:43.000000Z","updated_at":"2022-10-25T22:55:43.000000Z","pivot":{"component_id":329,"user_id":9519}},{"id":9975,"name":"WayayueGyee","slug":"wayayuegyee","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/70512209?v=4","header":null,"created_at":"2022-12-03T15:24:21.000000Z","updated_at":"2022-12-03T15:24:21.000000Z","pivot":{"component_id":329,"user_id":9975}},{"id":10044,"name":"Prem Whineray","slug":"prem-whineray","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/5254b117a13ce2967d0a05aa08af5476","header":null,"created_at":"2022-12-09T00:53:30.000000Z","updated_at":"2022-12-09T00:53:30.000000Z","pivot":{"component_id":329,"user_id":10044}},{"id":9604,"name":"vnwefo802","slug":"vnwefo802","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/95290205?v=4","header":null,"created_at":"2022-11-03T01:48:46.000000Z","updated_at":"2022-11-03T01:48:46.000000Z","pivot":{"component_id":329,"user_id":9604}},{"id":10204,"name":"BenitoRubenO","slug":"benitorubeno","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/1560417882676367362\/KHcjQxot_normal.jpg","header":null,"created_at":"2022-12-21T15:14:55.000000Z","updated_at":"2022-12-21T15:14:55.000000Z","pivot":{"component_id":329,"user_id":10204}},{"id":10347,"name":"KenJiang228","slug":"kenjiang228","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/113347270?v=4","header":null,"created_at":"2023-01-03T03:53:48.000000Z","updated_at":"2023-01-03T03:53:48.000000Z","pivot":{"component_id":329,"user_id":10347}},{"id":10381,"name":"cmontesvergara","slug":"cmontesvergara","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/33770974?v=4","header":null,"created_at":"2023-01-05T01:00:41.000000Z","updated_at":"2023-01-05T01:00:41.000000Z","pivot":{"component_id":329,"user_id":10381}},{"id":10594,"name":"tinaaa071","slug":"tinaaa071","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/122771951?v=4","header":null,"created_at":"2023-01-19T12:31:31.000000Z","updated_at":"2023-01-19T12:31:31.000000Z","pivot":{"component_id":329,"user_id":10594}},{"id":9880,"name":"mrrashidov","slug":"mrrashidov-1","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/22550874?v=4","header":null,"created_at":"2022-11-26T07:29:02.000000Z","updated_at":"2022-11-26T07:29:02.000000Z","pivot":{"component_id":329,"user_id":9880}},{"id":10984,"name":"karlgray","slug":"karlgray","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/8532504?v=4","header":null,"created_at":"2023-02-14T08:49:13.000000Z","updated_at":"2023-02-14T08:49:13.000000Z","pivot":{"component_id":329,"user_id":10984}},{"id":2786,"name":"chistel","slug":"chistel","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/46791424?v=4","header":null,"created_at":"2021-03-24T06:47:42.000000Z","updated_at":"2021-03-24T06:47:42.000000Z","pivot":{"component_id":329,"user_id":2786}},{"id":10483,"name":"galih56","slug":"galih56","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/33045630?v=4","header":null,"created_at":"2023-01-12T13:52:19.000000Z","updated_at":"2023-01-12T13:52:19.000000Z","pivot":{"component_id":329,"user_id":10483}},{"id":11730,"name":"erik hernandez","slug":"erik-hernandez","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/a0d301f1e6c90d26709b53ea90611e67","header":null,"created_at":"2023-04-02T03:47:02.000000Z","updated_at":"2023-04-02T03:47:02.000000Z","pivot":{"component_id":329,"user_id":11730}},{"id":11775,"name":"jakkph","slug":"jakkph","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/25721891?v=4","header":null,"created_at":"2023-04-05T19:42:14.000000Z","updated_at":"2023-04-05T19:42:14.000000Z","pivot":{"component_id":329,"user_id":11775}},{"id":12375,"name":"Sambhav242005","slug":"sambhav242005","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/85670285?v=4","header":null,"created_at":"2023-05-16T04:50:40.000000Z","updated_at":"2023-05-16T04:50:40.000000Z","pivot":{"component_id":329,"user_id":12375}},{"id":10356,"name":"PVarela11","slug":"pvarela11","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/73297605?v=4","header":null,"created_at":"2023-01-03T12:29:02.000000Z","updated_at":"2023-01-03T12:29:02.000000Z","pivot":{"component_id":329,"user_id":10356}},{"id":6147,"name":"Nahuelpack","slug":"nahuelpack","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/36615599?v=4","header":null,"created_at":"2021-12-13T19:42:48.000000Z","updated_at":"2021-12-13T19:42:48.000000Z","pivot":{"component_id":329,"user_id":6147}},{"id":13885,"name":"tbchand","slug":"tbchand","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/115986963?v=4","header":null,"created_at":"2023-08-30T10:26:35.000000Z","updated_at":"2023-08-30T10:26:35.000000Z","pivot":{"component_id":329,"user_id":13885}},{"id":13886,"name":"allanokothdev","slug":"allanokothdev","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/19547628?v=4","header":null,"created_at":"2023-08-30T10:34:02.000000Z","updated_at":"2023-08-30T10:34:02.000000Z","pivot":{"component_id":329,"user_id":13886}},{"id":749,"name":"henrikhedegaard","slug":"henrikhedegaard","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/1187278143570231296\/4cNhzgl1_normal.jpg","header":null,"created_at":"2020-06-01T20:18:41.000000Z","updated_at":"2020-06-01T20:18:41.000000Z","pivot":{"component_id":329,"user_id":749}},{"id":16159,"name":"ttlcrl","slug":"ttlcrl","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/56205458?v=4","header":null,"created_at":"2024-01-02T20:42:11.000000Z","updated_at":"2024-01-02T20:42:11.000000Z","pivot":{"component_id":329,"user_id":16159}},{"id":16445,"name":"wlhtea","slug":"wlhtea","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/115779315?v=4","header":null,"created_at":"2024-01-19T14:29:16.000000Z","updated_at":"2024-01-19T14:29:16.000000Z","pivot":{"component_id":329,"user_id":16445}},{"id":14974,"name":"hznutx","slug":"hznutx","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/126380434?v=4","header":null,"created_at":"2023-10-30T15:43:11.000000Z","updated_at":"2023-10-30T15:43:11.000000Z","pivot":{"component_id":329,"user_id":14974}},{"id":18520,"name":"Rauuwww","slug":"rauuwww","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/151777214?v=4","header":null,"created_at":"2024-04-29T20:19:01.000000Z","updated_at":"2024-04-29T20:19:01.000000Z","pivot":{"component_id":329,"user_id":18520}},{"id":5975,"name":"JCfUZQsq","slug":"jcfuzqsq","bio":"555","avatar":"https:\/\/www.gravatar.com\/avatar\/553f9e0f719254abcdf5b9bf51bc358c","header":null,"created_at":"2021-11-29T22:23:52.000000Z","updated_at":"2024-05-22T19:53:09.000000Z","pivot":{"component_id":329,"user_id":5975}}]}" :edit="false"> Full screen Preview

mithicher

14 components Profile On

Datepicker with TailwindCSS and AlpineJS

Community Rate

Related components