Tailwind CSS & Alpine.js Profile page

Profile page made using Tailwind CSS, Alpine.js and Chart.js

Share

/r/n <script defer src=https://www.creative-tim.com/"https:////unpkg.com//alpinejs@3.x.x//dist//cdn.min.js/">/r/n <script src=https://www.creative-tim.com/"https:////cdnjs.cloudflare.com//ajax//libs//Chart.js//3.5.1//chart.min.js/">/r/n/r/n/r/n <div class=\"h-full bg-gray-200 p-8\">\r\n <div class=\"bg-white rounded-lg shadow-xl pb-8\">\r\n <div x-data=\"{ openSettings: false }\" class=\"absolute right-12 mt-4 rounded\">\r\n <button @click=\"openSettings = !openSettings\" class=\"border border-gray-400 p-2 rounded text-gray-300 hover:text-gray-300 bg-gray-100 bg-opacity-10 hover:bg-opacity-20\" title=\"Settings\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4\" fill=\"currentColor\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z\"><\/path>\r\n <\/svg>\r\n <\/button>\r\n <div x-show=\"openSettings\" @click.away=\"openSettings = false\" class=\"bg-white absolute right-0 w-40 py-2 mt-1 border border-gray-200 shadow-2xl\" style=\"display: none;\">\r\n <div class=\"py-2 border-b\">\r\n <p class=\"text-gray-400 text-xs px-6 uppercase mb-1\">Settings<\/p>\r\n <button class=\"w-full flex items-center px-6 py-1.5 space-x-2 hover:bg-gray-200\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 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.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z\"><\/path>\r\n <\/svg>\r\n <span class=\"text-sm text-gray-700\">Share Profile<\/span>\r\n <\/button>\r\n <button class=\"w-full flex items-center py-1.5 px-6 space-x-2 hover:bg-gray-200\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 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=\"M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636\"><\/path>\r\n <\/svg>\r\n <span class=\"text-sm text-gray-700\">Block User<\/span>\r\n <\/button>\r\n <button class=\"w-full flex items-center py-1.5 px-6 space-x-2 hover:bg-gray-200\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 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=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path>\r\n <\/svg>\r\n <span class=\"text-sm text-gray-700\">More Info<\/span>\r\n <\/button>\r\n <\/div>\r\n <div class=\"py-2\">\r\n <p class=\"text-gray-400 text-xs px-6 uppercase mb-1\">Feedback<\/p>\r\n <button class=\"w-full flex items-center py-1.5 px-6 space-x-2 hover:bg-gray-200\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 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=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"><\/path>\r\n <\/svg>\r\n <span class=\"text-sm text-gray-700\">Report<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"w-full h-[250px]\">\r\n <img src=https://www.creative-tim.com/"https:////vojislavd.com//ta-template-demo//assets//img//profile-background.jpg/" class=\"w-full h-full rounded-tl-lg rounded-tr-lg\">\r\n <\/div>\r\n <div class=\"flex flex-col items-center -mt-20\">\r\n <img src=https://www.creative-tim.com/"https:////vojislavd.com//ta-template-demo//assets//img//profile.jpg/" class=\"w-40 border-4 border-white rounded-full\">\r\n <div class=\"flex items-center space-x-2 mt-2\">\r\n <p class=\"text-2xl\">Amanda Ross<\/p>\r\n <span class=\"bg-blue-500 rounded-full p-1\" title=\"Verified\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"text-gray-100 h-2.5 w-2.5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"4\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <\/div>\r\n <p class=\"text-gray-700\">Senior Software Engineer at Tailwind CSS<\/p>\r\n <p class=\"text-sm text-gray-500\">New York, USA<\/p>\r\n <\/div>\r\n <div class=\"flex-1 flex flex-col items-center lg:items-end justify-end px-8 mt-2\">\r\n <div class=\"flex items-center space-x-4 mt-2\">\r\n <button class=\"flex items-center bg-blue-600 hover:bg-blue-700 text-gray-100 px-4 py-2 rounded text-sm space-x-2 transition duration-100\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path d=\"M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z\"><\/path>\r\n <\/svg>\r\n <span>Connect<\/span>\r\n <\/button>\r\n <button class=\"flex items-center bg-blue-600 hover:bg-blue-700 text-gray-100 px-4 py-2 rounded text-sm space-x-2 transition duration-100\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M18 5v8a2 2 0 01-2 2h-5l-5 4v-4H4a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2zM7 8H5v2h2V8zm2 0h2v2H9V8zm6 0h-2v2h2V8z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <span>Message<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"my-4 flex flex-col 2xl:flex-row space-y-4 2xl:space-y-0 2xl:space-x-4\">\r\n <div class=\"w-full flex flex-col 2xl:w-1\/3\">\r\n <div class=\"flex-1 bg-white rounded-lg shadow-xl p-8\">\r\n <h4 class=\"text-xl text-gray-900 font-bold\">Personal Info<\/h4>\r\n <ul class=\"mt-2 text-gray-700\">\r\n <li class=\"flex border-y py-2\">\r\n <span class=\"font-bold w-24\">Full name:<\/span>\r\n <span class=\"text-gray-700\">Amanda S. Ross<\/span>\r\n <\/li>\r\n <li class=\"flex border-b py-2\">\r\n <span class=\"font-bold w-24\">Birthday:<\/span>\r\n <span class=\"text-gray-700\">24 Jul, 1991<\/span>\r\n <\/li>\r\n <li class=\"flex border-b py-2\">\r\n <span class=\"font-bold w-24\">Joined:<\/span>\r\n <span class=\"text-gray-700\">10 Jan 2022 (25 days ago)<\/span>\r\n <\/li>\r\n <li class=\"flex border-b py-2\">\r\n <span class=\"font-bold w-24\">Mobile:<\/span>\r\n <span class=\"text-gray-700\">(123) 123-1234<\/span>\r\n <\/li>\r\n <li class=\"flex border-b py-2\">\r\n <span class=\"font-bold w-24\">Email:<\/span>\r\n <span class=\"text-gray-700\">amandaross@example.com<\/span>\r\n <\/li>\r\n <li class=\"flex border-b py-2\">\r\n <span class=\"font-bold w-24\">Location:<\/span>\r\n <span class=\"text-gray-700\">New York, US<\/span>\r\n <\/li>\r\n <li class=\"flex border-b py-2\">\r\n <span class=\"font-bold w-24\">Languages:<\/span>\r\n <span class=\"text-gray-700\">English, Spanish<\/span>\r\n <\/li>\r\n <li class=\"flex items-center border-b py-2 space-x-2\">\r\n <span class=\"font-bold w-24\">Elsewhere:<\/span>\r\n <a href=https://www.creative-tim.com/"#\" title=\"Facebook\">\r\n <svg class=\"w-5 h-5\" id=\"Layer_1\" data-name=\"Layer 1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 506.86 506.86\"><defs><style>.cls-1{fill:#1877f2;}.cls-2{fill:#fff;}<\/style><\/defs><path class=\"cls-1\" d=\"M506.86,253.43C506.86,113.46,393.39,0,253.43,0S0,113.46,0,253.43C0,379.92,92.68,484.77,213.83,503.78V326.69H149.48V253.43h64.35V197.6c0-63.52,37.84-98.6,95.72-98.6,27.73,0,56.73,5,56.73,5v62.36H334.33c-31.49,0-41.3,19.54-41.3,39.58v47.54h70.28l-11.23,73.26H293V503.78C414.18,484.77,506.86,379.92,506.86,253.43Z\"><\/path><path class=\"cls-2\" d=\"M352.08,326.69l11.23-73.26H293V205.89c0-20,9.81-39.58,41.3-39.58h31.95V104s-29-5-56.73-5c-57.88,0-95.72,35.08-95.72,98.6v55.83H149.48v73.26h64.35V503.78a256.11,256.11,0,0,0,79.2,0V326.69Z\"><\/path><\/svg>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"#\" title=\"Twitter\">\r\n <svg class=\"w-5 h-5\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 333333 333333\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\" image-rendering=\"optimizeQuality\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"><path d=\"M166667 0c92048 0 166667 74619 166667 166667s-74619 166667-166667 166667S0 258715 0 166667 74619 0 166667 0zm90493 110539c-6654 2976-13822 4953-21307 5835 7669-4593 13533-11870 16333-20535-7168 4239-15133 7348-23574 9011-6787-7211-16426-11694-27105-11694-20504 0-37104 16610-37104 37101 0 2893 320 5722 949 8450-30852-1564-58204-16333-76513-38806-3285 5666-5022 12109-5022 18661v4c0 12866 6532 24246 16500 30882-6083-180-11804-1876-16828-4626v464c0 17993 12789 33007 29783 36400-3113 845-6400 1313-9786 1313-2398 0-4709-247-7007-665 4746 14736 18448 25478 34673 25791-12722 9967-28700 15902-46120 15902-3006 0-5935-184-8860-534 16466 10565 35972 16684 56928 16684 68271 0 105636-56577 105636-105632 0-1630-36-3209-104-4806 7251-5187 13538-11733 18514-19185l17-17-3 2z\" fill=\"#1da1f2\"><\/path><\/svg>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"#\" title=\"LinkedIn\">\r\n <svg class=\"w-5 h-5\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 333333 333333\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\" image-rendering=\"optimizeQuality\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"><path d=\"M166667 0c92048 0 166667 74619 166667 166667s-74619 166667-166667 166667S0 258715 0 166667 74619 0 166667 0zm-18220 138885h28897v14814l418 1c4024-7220 13865-14814 28538-14814 30514-1 36157 18989 36157 43691v50320l-30136 1v-44607c0-10634-221-24322-15670-24322-15691 0-18096 11575-18096 23548v45382h-30109v-94013zm-20892-26114c0 8650-7020 15670-15670 15670s-15672-7020-15672-15670 7022-15670 15672-15670 15670 7020 15670 15670zm-31342 26114h31342v94013H96213v-94013z\" fill=\"#0077b5\"><\/path><\/svg>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"#\" title=\"Github\">\r\n <svg class=\"w-5 h-5\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"0\" height=\"0\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\" image-rendering=\"optimizeQuality\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" viewBox=\"0 0 640 640\"><path d=\"M319.988 7.973C143.293 7.973 0 151.242 0 327.96c0 141.392 91.678 261.298 218.826 303.63 16.004 2.964 21.886-6.957 21.886-15.414 0-7.63-.319-32.835-.449-59.552-89.032 19.359-107.8-37.772-107.8-37.772-14.552-36.993-35.529-46.831-35.529-46.831-29.032-19.879 2.209-19.442 2.209-19.442 32.126 2.245 49.04 32.954 49.04 32.954 28.56 48.922 74.883 34.76 93.131 26.598 2.882-20.681 11.15-34.807 20.315-42.803-71.08-8.067-145.797-35.516-145.797-158.14 0-34.926 12.52-63.485 32.965-85.88-3.33-8.078-14.291-40.606 3.083-84.674 0 0 26.87-8.61 88.029 32.8 25.512-7.075 52.878-10.642 80.056-10.76 27.2.118 54.614 3.673 80.162 10.76 61.076-41.386 87.922-32.8 87.922-32.8 17.398 44.08 6.485 76.631 3.154 84.675 20.516 22.394 32.93 50.953 32.93 85.879 0 122.907-74.883 149.93-146.117 157.856 11.481 9.921 21.733 29.398 21.733 59.233 0 42.792-.366 77.28-.366 87.804 0 8.516 5.764 18.473 21.992 15.354 127.076-42.354 218.637-162.274 218.637-303.582 0-176.695-143.269-319.988-320-319.988l-.023.107z\"><\/path><\/svg>\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"flex-1 bg-white rounded-lg shadow-xl mt-4 p-8\">\r\n <h4 class=\"text-xl text-gray-900 font-bold\">Activity log<\/h4>\r\n <div class=\"relative px-4\">\r\n <div class=\"absolute h-full border border-dashed border-opacity-20 border-secondary\"><\/div>\r\n\r\n \r\n <div class=\"flex items-center w-full my-6 -ml-1.5\">\r\n <div class=\"w-1\/12 z-10\">\r\n <div class=\"w-3.5 h-3.5 bg-blue-600 rounded-full\"><\/div>\r\n <\/div>\r\n <div class=\"w-11\/12\">\r\n <p class=\"text-sm\">Profile informations changed.<\/p>\r\n <p class=\"text-xs text-gray-500\">3 min ago<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n\r\n \r\n <div class=\"flex items-center w-full my-6 -ml-1.5\">\r\n <div class=\"w-1\/12 z-10\">\r\n <div class=\"w-3.5 h-3.5 bg-blue-600 rounded-full\"><\/div>\r\n <\/div>\r\n <div class=\"w-11\/12\">\r\n <p class=\"text-sm\">\r\n Connected with <a href=https://www.creative-tim.com/"#\" class=\"text-blue-600 font-bold\">Colby Covington<\/a>.<\/p>\r\n <p class=\"text-xs text-gray-500\">15 min ago<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n\r\n \r\n <div class=\"flex items-center w-full my-6 -ml-1.5\">\r\n <div class=\"w-1\/12 z-10\">\r\n <div class=\"w-3.5 h-3.5 bg-blue-600 rounded-full\"><\/div>\r\n <\/div>\r\n <div class=\"w-11\/12\">\r\n <p class=\"text-sm\">Invoice <a href=https://www.creative-tim.com/"#\" class=\"text-blue-600 font-bold\">#4563<\/a> was created.<\/p>\r\n <p class=\"text-xs text-gray-500\">57 min ago<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n\r\n \r\n <div class=\"flex items-center w-full my-6 -ml-1.5\">\r\n <div class=\"w-1\/12 z-10\">\r\n <div class=\"w-3.5 h-3.5 bg-blue-600 rounded-full\"><\/div>\r\n <\/div>\r\n <div class=\"w-11\/12\">\r\n <p class=\"text-sm\">\r\n Message received from <a href=https://www.creative-tim.com/"#\" class=\"text-blue-600 font-bold\">Cecilia Hendric<\/a>.<\/p>\r\n <p class=\"text-xs text-gray-500\">1 hour ago<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n\r\n \r\n <div class=\"flex items-center w-full my-6 -ml-1.5\">\r\n <div class=\"w-1\/12 z-10\">\r\n <div class=\"w-3.5 h-3.5 bg-blue-600 rounded-full\"><\/div>\r\n <\/div>\r\n <div class=\"w-11\/12\">\r\n <p class=\"text-sm\">New order received <a href=https://www.creative-tim.com/"#\" class=\"text-blue-600 font-bold\">#OR9653<\/a>.<\/p>\r\n <p class=\"text-xs text-gray-500\">2 hours ago<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n\r\n \r\n <div class=\"flex items-center w-full my-6 -ml-1.5\">\r\n <div class=\"w-1\/12 z-10\">\r\n <div class=\"w-3.5 h-3.5 bg-blue-600 rounded-full\"><\/div>\r\n <\/div>\r\n <div class=\"w-11\/12\">\r\n <p class=\"text-sm\">\r\n Message received from <a href=https://www.creative-tim.com/"#\" class=\"text-blue-600 font-bold\">Jane Stillman<\/a>.<\/p>\r\n <p class=\"text-xs text-gray-500\">2 hours ago<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col w-full 2xl:w-2\/3\">\r\n <div class=\"flex-1 bg-white rounded-lg shadow-xl p-8\">\r\n <h4 class=\"text-xl text-gray-900 font-bold\">About<\/h4>\r\n <p class=\"mt-2 text-gray-700\">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt voluptates obcaecati numquam error et ut fugiat asperiores. Sunt nulla ad incidunt laboriosam, laudantium est unde natus cum numquam, neque facere. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, magni odio magnam commodi sunt ipsum eum! Voluptas eveniet aperiam at maxime, iste id dicta autem odio laudantium eligendi commodi distinctio!<\/p>\r\n <\/div>\r\n <div class=\"flex-1 bg-white rounded-lg shadow-xl mt-4 p-8\">\r\n <h4 class=\"text-xl text-gray-900 font-bold\">Statistics<\/h4>\r\n \r\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8 mt-4\">\r\n <div class=\"px-6 py-6 bg-gray-100 border border-gray-300 rounded-lg shadow-xl\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-bold text-sm text-indigo-600\">Total Revenue<\/span>\r\n <span class=\"text-xs bg-gray-200 hover:bg-gray-500 text-gray-500 hover:text-gray-200 px-2 py-1 rounded-lg transition duration-200 cursor-default\">7 days<\/span>\r\n <\/div>\r\n <div class=\"flex items-center justify-between mt-6\">\r\n <div>\r\n <svg class=\"w-12 h-12 p-2.5 bg-indigo-400 bg-opacity-20 rounded-full text-indigo-600 border border-indigo-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1\" d=\"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path><\/svg>\r\n <\/div>\r\n <div class=\"flex flex-col\">\r\n <div class=\"flex items-end\">\r\n <span class=\"text-2xl 2xl:text-3xl font-bold\">$8,141<\/span>\r\n <div class=\"flex items-center ml-2 mb-1\">\r\n <svg class=\"w-5 h-5 text-green-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"><\/path><\/svg>\r\n <span class=\"font-bold text-sm text-gray-500 ml-0.5\">3%<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"px-6 py-6 bg-gray-100 border border-gray-300 rounded-lg shadow-xl\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-bold text-sm text-green-600\">New Orders<\/span>\r\n <span class=\"text-xs bg-gray-200 hover:bg-gray-500 text-gray-500 hover:text-gray-200 px-2 py-1 rounded-lg transition duration-200 cursor-default\">7 days<\/span>\r\n <\/div>\r\n <div class=\"flex items-center justify-between mt-6\">\r\n <div>\r\n <svg class=\"w-12 h-12 p-2.5 bg-green-400 bg-opacity-20 rounded-full text-green-600 border border-green-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1\" d=\"M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z\"><\/path><\/svg>\r\n <\/div>\r\n <div class=\"flex flex-col\">\r\n <div class=\"flex items-end\">\r\n <span class=\"text-2xl 2xl:text-3xl font-bold\">217<\/span>\r\n <div class=\"flex items-center ml-2 mb-1\">\r\n <svg class=\"w-5 h-5 text-green-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"><\/path><\/svg>\r\n <span class=\"font-bold text-sm text-gray-500 ml-0.5\">5%<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"px-6 py-6 bg-gray-100 border border-gray-300 rounded-lg shadow-xl\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-bold text-sm text-blue-600\">New Connections<\/span>\r\n <span class=\"text-xs bg-gray-200 hover:bg-gray-500 text-gray-500 hover:text-gray-200 px-2 py-1 rounded-lg transition duration-200 cursor-default\">7 days<\/span>\r\n <\/div>\r\n <div class=\"flex items-center justify-between mt-6\">\r\n <div>\r\n <svg class=\"w-12 h-12 p-2.5 bg-blue-400 bg-opacity-20 rounded-full text-blue-600 border border-blue-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"><\/path><\/svg>\r\n <\/div>\r\n <div class=\"flex flex-col\">\r\n <div class=\"flex items-end\">\r\n <span class=\"text-2xl 2xl:text-3xl font-bold\">54<\/span>\r\n <div class=\"flex items-center ml-2 mb-1\">\r\n <svg class=\"w-5 h-5 text-green-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"><\/path><\/svg>\r\n <span class=\"font-bold text-sm text-gray-500 ml-0.5\">7%<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mt-4\">\r\n <canvas id=\"verticalBarChart\" style=\"display: block; box-sizing: border-box; height: 414px; width: 828px;\" width=\"1656\" height=\"828\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white rounded-lg shadow-xl p-8\">\r\n <div class=\"flex items-center justify-between\">\r\n <h4 class=\"text-xl text-gray-900 font-bold\">Connections (532)<\/h4>\r\n <a href=https://www.creative-tim.com/"#\" title=\"View All\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6 text-gray-500 hover:text-gray-700\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z\"><\/path>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <div class=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 gap-8 mt-8\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex flex-col items-center justify-center text-gray-800 hover:text-blue-600\" title=\"View Profile\">\r\n <img src=https://www.creative-tim.com/"https:////vojislavd.com//ta-template-demo//assets//img//connections//connection1.jpg/" class=\"w-16 rounded-full\">\r\n <p class=\"text-center font-bold text-sm mt-1\">Diane Aguilar<\/p>\r\n <p class=\"text-xs text-gray-500 text-center\">UI\/UX Design at Upwork<\/p>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex flex-col items-center justify-center text-gray-800 hover:text-blue-600\" title=\"View Profile\">\r\n <img src=https://www.creative-tim.com/"https:////vojislavd.com//ta-template-demo//assets//img//connections//connection2.jpg/" class=\"w-16 rounded-full\">\r\n <p class=\"text-center font-bold text-sm mt-1\">Frances Mather<\/p>\r\n <p class=\"text-xs text-gray-500 text-center\">Software Engineer at Facebook<\/p>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex flex-col items-center justify-center text-gray-800 hover:text-blue-600\" title=\"View Profile\">\r\n <img src=https://www.creative-tim.com/"https:////vojislavd.com//ta-template-demo//assets//img//connections//connection3.jpg/" class=\"w-16 rounded-full\">\r\n <p class=\"text-center font-bold text-sm mt-1\">Carlos Friedrich<\/p>\r\n <p class=\"text-xs text-gray-500 text-center\">Front-End Developer at Tailwind CSS<\/p>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex flex-col items-center justify-center text-gray-800 hover:text-blue-600\" title=\"View Profile\">\r\n <img src=https://www.creative-tim.com/"https:////vojislavd.com//ta-template-demo//assets//img//connections//connection4.jpg/" class=\"w-16 rounded-full\">\r\n <p class=\"text-center font-bold text-sm mt-1\">Donna Serrano<\/p>\r\n <p class=\"text-xs text-gray-500 text-center\">System Engineer at Tesla<\/p>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex flex-col items-center justify-center text-gray-800 hover:text-blue-600\" title=\"View Profile\">\r\n <img src=https://www.creative-tim.com/"https:////vojislavd.com//ta-template-demo//assets//img//connections//connection5.jpg/" class=\"w-16 rounded-full\">\r\n <p class=\"text-center font-bold text-sm mt-1\">Randall Tabron<\/p>\r\n <p class=\"text-xs text-gray-500 text-center\">Software Developer at Upwork<\/p>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex flex-col items-center justify-center text-gray-800 hover:text-blue-600\" title=\"View Profile\">\r\n <img src=https://www.creative-tim.com/"https:////vojislavd.com//ta-template-demo//assets//img//connections//connection6.jpg/" class=\"w-16 rounded-full\">\r\n <p class=\"text-center font-bold text-sm mt-1\">John McCleary<\/p>\r\n <p class=\"text-xs text-gray-500 text-center\">Software Engineer at Laravel<\/p>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex flex-col items-center justify-center text-gray-800 hover:text-blue-600\" title=\"View Profile\">\r\n <img src=https://www.creative-tim.com/"https:////vojislavd.com//ta-template-demo//assets//img//connections//connection7.jpg/" class=\"w-16 rounded-full\">\r\n <p class=\"text-center font-bold text-sm mt-1\">Amanda Noble<\/p>\r\n <p class=\"text-xs text-gray-500 text-center\">Graphic Designer at Tailwind CSS<\/p>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex flex-col items-center justify-center text-gray-800 hover:text-blue-600\" title=\"View Profile\">\r\n <img src=https://www.creative-tim.com/"https:////vojislavd.com//ta-template-demo//assets//img//connections//connection8.jpg/" class=\"w-16 rounded-full\">\r\n <p class=\"text-center font-bold text-sm mt-1\">Christine Drew<\/p>\r\n <p class=\"text-xs text-gray-500 text-center\">Senior Android Developer at Google<\/p>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex flex-col items-center justify-center text-gray-800 hover:text-blue-600\" title=\"View Profile\">\r\n <img src=https://www.creative-tim.com/"https:////vojislavd.com//ta-template-demo//assets//img//connections//connection9.jpg/" class=\"w-16 rounded-full\">\r\n <p class=\"text-center font-bold text-sm mt-1\">Lucas Bell<\/p>\r\n <p class=\"text-xs text-gray-500 text-center\">Creative Writer at Upwork<\/p>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex flex-col items-center justify-center text-gray-800 hover:text-blue-600\" title=\"View Profile\">\r\n <img src=https://www.creative-tim.com/"https:////vojislavd.com//ta-template-demo//assets//img//connections//connection10.jpg/" class=\"w-16 rounded-full\">\r\n <p class=\"text-center font-bold text-sm mt-1\">Debra Herring<\/p>\r\n <p class=\"text-xs text-gray-500 text-center\">Co-Founder at Alpine.js<\/p>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex flex-col items-center justify-center text-gray-800 hover:text-blue-600\" title=\"View Profile\">\r\n <img src=https://www.creative-tim.com/"https:////vojislavd.com//ta-template-demo//assets//img//connections//connection11.jpg/" class=\"w-16 rounded-full\">\r\n <p class=\"text-center font-bold text-sm mt-1\">Benjamin Farrior<\/p>\r\n <p class=\"text-xs text-gray-500 text-center\">Software Engineer Lead at Microsoft<\/p>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex flex-col items-center justify-center text-gray-800 hover:text-blue-600\" title=\"View Profile\">\r\n <img src=https://www.creative-tim.com/"https:////vojislavd.com//ta-template-demo//assets//img//connections//connection12.jpg/" class=\"w-16 rounded-full\">\r\n <p class=\"text-center font-bold text-sm mt-1\">Maria Heal<\/p>\r\n <p class=\"text-xs text-gray-500 text-center\">Linux System Administrator at Twitter<\/p>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex flex-col items-center justify-center text-gray-800 hover:text-blue-600\" title=\"View Profile\">\r\n <img src=https://www.creative-tim.com/"https:////vojislavd.com//ta-template-demo//assets//img//connections//connection13.jpg/" class=\"w-16 rounded-full\">\r\n <p class=\"text-center font-bold text-sm mt-1\">Edward Ice<\/p>\r\n <p class=\"text-xs text-gray-500 text-center\">Customer Support at Instagram<\/p>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex flex-col items-center justify-center text-gray-800 hover:text-blue-600\" title=\"View Profile\">\r\n <img src=https://www.creative-tim.com/"https:////vojislavd.com//ta-template-demo//assets//img//connections//connection14.jpg/" class=\"w-16 rounded-full\">\r\n <p class=\"text-center font-bold text-sm mt-1\">Jeffery Silver<\/p>\r\n <p class=\"text-xs text-gray-500 text-center\">Software Engineer at Twitter<\/p>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex flex-col items-center justify-center text-gray-800 hover:text-blue-600\" title=\"View Profile\">\r\n <img src=https://www.creative-tim.com/"https:////vojislavd.com//ta-template-demo//assets//img//connections//connection15.jpg/" class=\"w-16 rounded-full\">\r\n <p class=\"text-center font-bold text-sm mt-1\">Jennifer Schultz<\/p>\r\n <p class=\"text-xs text-gray-500 text-center\">Project Manager at Google<\/p>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex flex-col items-center justify-center text-gray-800 hover:text-blue-600\" title=\"View Profile\">\r\n <img src=https://www.creative-tim.com/"https:////vojislavd.com//ta-template-demo//assets//img//connections//connection16.jpg/" class=\"w-16 rounded-full\">\r\n <p class=\"text-center font-bold text-sm mt-1\">Joseph Marlatt<\/p>\r\n <p class=\"text-xs text-gray-500 text-center\">Team Lead at Facebook<\/p>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n\r\n const DATA_SET_VERTICAL_BAR_CHART_1 = [68.106, 26.762, 94.255, 72.021, 74.082, 64.923, 85.565, 32.432, 54.664, 87.654, 43.013, 91.443];\r\n\r\n const labels_vertical_bar_chart = ['January', 'February', 'Mart', 'April', 'May', 'Jun', 'July', 'August', 'September', 'October', 'November', 'December'];\r\n\r\n const dataVerticalBarChart= {\r\n labels: labels_vertical_bar_chart,\r\n datasets: [\r\n {\r\n label: 'Revenue',\r\n data: DATA_SET_VERTICAL_BAR_CHART_1,\r\n borderColor: 'rgb(54, 162, 235)',\r\n backgroundColor: 'rgba(54, 162, 235, 0.5)',\r\n }\r\n ]\r\n };\r\n const configVerticalBarChart = {\r\n type: 'bar',\r\n data: dataVerticalBarChart,\r\n options: {\r\n responsive: true,\r\n plugins: {\r\n legend: {\r\n position: 'top',\r\n },\r\n title: {\r\n display: true,\r\n text: 'Last 12 Months'\r\n }\r\n }\r\n },\r\n };\r\n\r\n var verticalBarChart = new Chart(\r\n document.getElementById('verticalBarChart'),\r\n configVerticalBarChart\r\n );\r\n <\/script>\r\n<\/body>\r\n<\/html>","author_type":"App\\User","author_id":9885,"collection_id":null,"fork_id":null,"votes":6,"score":"4.5","visits":11309,"popularity":1377,"slug":"tailwind-css-alpinejs-profile-page","approved":1,"created_at":"2022-11-26T15:34:36.000000Z","updated_at":"2024-09-19T05:29:45.000000Z","downloads":276,"code_views":3877,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":1,"media":[{"id":8630,"model_type":"App\\Component","model_id":4179,"collection_name":"preview","name":"temp98743","file_name":"temp98743.png","mime_type":"image\/png","disk":"public","size":272012,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp98743___media_library_original_1280_957.png","temp98743___media_library_original_1070_800.png","temp98743___media_library_original_895_669.png","temp98743___media_library_original_749_560.png","temp98743___media_library_original_627_469.png","temp98743___media_library_original_524_392.png","temp98743___media_library_original_439_328.png","temp98743___media_library_original_367_274.png","temp98743___media_library_original_307_230.png","temp98743___media_library_original_257_192.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEE0TDRqL0NQNHFTK0xKRnM3V1o0WFBEQlRpdnRvMUtISnF6NU5Pck52UXRlSGZoUjhSZkNjbjIzVjRaUkNvejkwMXJTcVlXTDVwdlE4dkdReGRSY2xKYW5RTDRTOFgrTUNKSXJXZllPakJUWHRRV0FxUjU0cytYclJ6VEN1eVZ6UThOL0N2eHRiNjdFV3Q1a1JUMUttc01SVXdxaGFMT3JBVnN4VTA2a2REOUxiYTJzSlNOMXJHemp1VkZmbW5OSS9XMUdLNkNheDRXMC9YTFV3VDJzYlJudHRwT1RZK1ZYdlloMHp3YnB1aVdaaHRiS0pRQng4b3JTTlNTMHVSS25HVzZLRDZWTXN6TWJTTUpucUZGZHNwd2Nkem5WS3oyTlcyWUt5anZYbjJ1ZFZ6ZnQxK1VacUN5ZllLQUt0OG84azAwSm4vOWs9Ij4KCTwvaW1hZ2U+Cjwvc3ZnPg=="}},"order_column":8443,"created_at":"2023-02-03T12:38:47.000000Z","updated_at":"2023-02-03T12:38:50.000000Z","conversions_disk":"public","uuid":"5d32d7e1-abd6-45f5-84fd-543f3a985797","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/8630\/temp98743.png","preview_url":""}],"author":{"id":9885,"name":"Vojislav","slug":"vojislav","bio":"vojislavd.com","avatar":"\/storage\/avatars\/08FshKjpg7ZTAVrkoXe1Ioer3Q3BhvGmaVcoBn9z.jpg","header":null,"created_at":"2022-11-26T14:39:21.000000Z","updated_at":"2022-11-26T15:35:42.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":4179,"tag_id":15}},{"id":7,"name":{"en":"Pages"},"description":"Looking to get the work done faster? Choose from our collection of 500+ fully coded page examples that are built using the popular CSS framework - Tailwind CSS. Get started or get inspired!","meta_description":"Choose from our collection of 500+ fully coded page examples that are built using the popular CSS framework - Tailwind CSS","slug":{"en":"pages"},"type":null,"order_column":10,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:13:03.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":4179,"tag_id":7}},{"id":76,"name":{"en":"Charts"},"description":"Create stunning data visualizations effortlessly using Tailwind CSS Chart Components. Enhance your web apps with beautiful charts and graphs.","meta_description":"Visit our Tailwind CSS Chart component examples that you can add to your web project to create awesome web apps.","slug":{"en":"charts"},"type":null,"order_column":65,"created_at":"2023-10-16T13:57:35.000000Z","updated_at":"2023-10-16T13:57:35.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":4179,"tag_id":76}}],"fork":null,"favorites":[{"id":4536,"name":"paramjeet-dhiman","slug":"paramjeet-dhiman","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/86948618?v=4","header":null,"created_at":"2021-08-08T03:47:42.000000Z","updated_at":"2021-08-08T03:47:42.000000Z","pivot":{"component_id":4179,"user_id":4536}},{"id":5683,"name":"meringuekhalil","slug":"meringuekhalil","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/944567032695095296\/gU55PnS5_normal.jpg","header":null,"created_at":"2021-11-04T14:04:08.000000Z","updated_at":"2021-11-04T14:04:08.000000Z","pivot":{"component_id":4179,"user_id":5683}},{"id":9641,"name":"zariyat","slug":"zariyat","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/43960753?v=4","header":null,"created_at":"2022-11-06T15:01:56.000000Z","updated_at":"2022-11-06T15:01:56.000000Z","pivot":{"component_id":4179,"user_id":9641}},{"id":9635,"name":"Xiao215","slug":"xiao215","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/53898107?v=4","header":null,"created_at":"2022-11-05T18:01:31.000000Z","updated_at":"2022-11-05T18:01:31.000000Z","pivot":{"component_id":4179,"user_id":9635}},{"id":722,"name":"adampatterson","slug":"adampatterson","bio":null,"avatar":"https:\/\/avatars0.githubusercontent.com\/u\/31537?v=4","header":null,"created_at":"2020-05-25T08:06:26.000000Z","updated_at":"2020-05-25T08:06:26.000000Z","pivot":{"component_id":4179,"user_id":722}},{"id":8358,"name":"sahilnetic","slug":"sahilnetic","bio":"Try Appmojo, A repository of Free opensource React Native Component. : www.appmojo.site\r\nPersonal Website : www.sahilnetic.xyz","avatar":"\/storage\/avatars\/cEnStg2aN03H2eeQmVa99t5J3SRlMj3xBwkM1GZU.jpg","header":"\/storage\/headers\/eOrJw3m9yvguNw4or0OxqbO5wEbKFa13nqxaWKYH.png","created_at":"2022-07-07T16:27:21.000000Z","updated_at":"2022-08-10T13:25:22.000000Z","pivot":{"component_id":4179,"user_id":8358}},{"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":4179,"user_id":4755}},{"id":10295,"name":"tanle25","slug":"tanle25","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/81272790?v=4","header":null,"created_at":"2022-12-28T13:41:19.000000Z","updated_at":"2022-12-28T13:41:19.000000Z","pivot":{"component_id":4179,"user_id":10295}},{"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":4179,"user_id":10381}},{"id":10348,"name":"gsmatheus","slug":"gsmatheus","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/33672883?v=4","header":null,"created_at":"2023-01-03T04:02:07.000000Z","updated_at":"2023-01-03T04:02:07.000000Z","pivot":{"component_id":4179,"user_id":10348}},{"id":5957,"name":"AdrianQuinonez","slug":"adrianquinonez","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/71469926?v=4","header":null,"created_at":"2021-11-28T22:51:58.000000Z","updated_at":"2021-11-28T22:51:58.000000Z","pivot":{"component_id":4179,"user_id":5957}},{"id":10213,"name":"hadjamagamy","slug":"hadjamagamy","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/115471672?v=4","header":null,"created_at":"2022-12-22T07:16:20.000000Z","updated_at":"2022-12-22T07:16:20.000000Z","pivot":{"component_id":4179,"user_id":10213}},{"id":10555,"name":"deibypena","slug":"deibypena","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/79470892?v=4","header":null,"created_at":"2023-01-17T18:50:34.000000Z","updated_at":"2023-01-17T18:50:34.000000Z","pivot":{"component_id":4179,"user_id":10555}},{"id":10432,"name":"NOtSCAMer","slug":"notscamer","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/fa1a60503860c97e0f323cce87048053","header":null,"created_at":"2023-01-09T10:35:34.000000Z","updated_at":"2023-01-09T10:35:34.000000Z","pivot":{"component_id":4179,"user_id":10432}},{"id":10634,"name":"Kuferl","slug":"kuferl","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/2822340?v=4","header":null,"created_at":"2023-01-22T11:48:35.000000Z","updated_at":"2023-01-22T11:48:35.000000Z","pivot":{"component_id":4179,"user_id":10634}},{"id":368,"name":"khatabwedaa","slug":"khatabwedaa","bio":"Web designer & developer https:\/\/merakiui.com.","avatar":"\/storage\/avatars\/ckQ2aybMQQJgUPv1HOe9XbpNmQmltLlWyy4CSVuJ.jpg","header":"\/storage\/headers\/mGwrFeXBOBPoz7DhAt98sH59byb7HUxdsTd3tVYB.png","created_at":"2020-02-15T10:59:29.000000Z","updated_at":"2023-05-01T07:26:40.000000Z","pivot":{"component_id":4179,"user_id":368}},{"id":11046,"name":"Francisco Joubert","slug":"francisco-joubert","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/99af37ea78fa876dc94e1445a94399ca","header":null,"created_at":"2023-02-17T20:09:13.000000Z","updated_at":"2023-02-17T20:09:13.000000Z","pivot":{"component_id":4179,"user_id":11046}},{"id":1447,"name":"mattdanielbrown","slug":"mattdanielbrown","bio":null,"avatar":"https:\/\/avatars3.githubusercontent.com\/u\/19757863?v=4","header":null,"created_at":"2020-10-29T16:32:49.000000Z","updated_at":"2020-10-29T16:32:49.000000Z","pivot":{"component_id":4179,"user_id":1447}},{"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":4179,"user_id":10204}},{"id":11966,"name":"Erdogan Gulsoy","slug":"erdogan-gulsoy","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/7d6cdac30f73c3887c83802503a1320b","header":null,"created_at":"2023-04-17T12:27:56.000000Z","updated_at":"2023-04-17T12:27:56.000000Z","pivot":{"component_id":4179,"user_id":11966}},{"id":1434,"name":"Matt","slug":"matt","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/2098eb6a3d48b22ed0692849699c795a","header":null,"created_at":"2020-10-27T13:11:58.000000Z","updated_at":"2020-10-27T13:11:58.000000Z","pivot":{"component_id":4179,"user_id":1434}},{"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":4179,"user_id":12375}},{"id":13512,"name":"sayedfazil","slug":"sayedfazil","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/129251418?v=4","header":null,"created_at":"2023-08-04T05:44:14.000000Z","updated_at":"2023-08-04T05:44:14.000000Z","pivot":{"component_id":4179,"user_id":13512}},{"id":13712,"name":"MatheusVSN","slug":"matheusvsn","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/125493278?v=4","header":null,"created_at":"2023-08-18T15:02:03.000000Z","updated_at":"2023-08-18T15:02:03.000000Z","pivot":{"component_id":4179,"user_id":13712}},{"id":13644,"name":"Gunndroid","slug":"gunndroid","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/106714549?v=4","header":null,"created_at":"2023-08-13T22:45:31.000000Z","updated_at":"2023-08-13T22:45:31.000000Z","pivot":{"component_id":4179,"user_id":13644}},{"id":13781,"name":"TokyoAlone","slug":"tokyoalone","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/139533361?v=4","header":null,"created_at":"2023-08-23T07:31:42.000000Z","updated_at":"2023-08-23T07:31:42.000000Z","pivot":{"component_id":4179,"user_id":13781}},{"id":8280,"name":"NdekoCode","slug":"ndekocode","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/85836702?v=4","header":"\/storage\/headers\/3FqzEebO3eZi51EIVGBz9z4Z9OfkfxfX63Dtgga5.png","created_at":"2022-06-28T15:31:22.000000Z","updated_at":"2023-09-08T17:49:11.000000Z","pivot":{"component_id":4179,"user_id":8280}},{"id":6715,"name":"Jao99","slug":"jao99","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/86388032?v=4","header":null,"created_at":"2022-01-29T03:39:35.000000Z","updated_at":"2022-01-29T03:39:35.000000Z","pivot":{"component_id":4179,"user_id":6715}},{"id":13092,"name":"patinthehat","slug":"patinthehat","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/5508707?v=4","header":null,"created_at":"2023-07-05T22:32:33.000000Z","updated_at":"2023-07-05T22:32:33.000000Z","pivot":{"component_id":4179,"user_id":13092}},{"id":15204,"name":"guidodf98","slug":"guidodf98","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/70726903?v=4","header":null,"created_at":"2023-11-12T04:11:15.000000Z","updated_at":"2023-11-12T04:11:15.000000Z","pivot":{"component_id":4179,"user_id":15204}},{"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":4179,"user_id":4237}},{"id":14574,"name":"hiepit2k3","slug":"hiepit2k3","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/101326070?v=4","header":null,"created_at":"2023-10-08T03:43:04.000000Z","updated_at":"2023-10-08T03:43:04.000000Z","pivot":{"component_id":4179,"user_id":14574}},{"id":16032,"name":"hudaputrasantosa","slug":"hudaputrasantosa","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/55727003?v=4","header":null,"created_at":"2023-12-25T11:15:44.000000Z","updated_at":"2023-12-25T11:15:44.000000Z","pivot":{"component_id":4179,"user_id":16032}},{"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":4179,"user_id":3558}},{"id":6940,"name":"123ApplePie","slug":"123applepie","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/73269263?v=4","header":null,"created_at":"2022-02-21T13:49:46.000000Z","updated_at":"2022-02-21T13:49:46.000000Z","pivot":{"component_id":4179,"user_id":6940}},{"id":17589,"name":"Elliotoplit","slug":"elliotoplit","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/95361161?v=4","header":null,"created_at":"2024-03-15T06:28:57.000000Z","updated_at":"2024-03-15T06:28:57.000000Z","pivot":{"component_id":4179,"user_id":17589}},{"id":18378,"name":"zakialawi_","slug":"zakialawi","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/1731752978980478978\/43w2e3K8_normal.jpg","header":null,"created_at":"2024-04-22T11:08:10.000000Z","updated_at":"2024-04-22T11:08:10.000000Z","pivot":{"component_id":4179,"user_id":18378}},{"id":17778,"name":"trentbrew","slug":"trentbrew","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/32501733?v=4","header":null,"created_at":"2024-03-23T07:51:30.000000Z","updated_at":"2024-03-23T07:51:30.000000Z","pivot":{"component_id":4179,"user_id":17778}},{"id":19224,"name":"Noodleman9570","slug":"noodleman9570","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/98560787?v=4","header":null,"created_at":"2024-06-06T19:23:00.000000Z","updated_at":"2024-06-06T19:23:00.000000Z","pivot":{"component_id":4179,"user_id":19224}},{"id":20150,"name":"nicolasjrz","slug":"nicolasjrz-1","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/61887365?v=4","header":null,"created_at":"2024-08-14T15:26:13.000000Z","updated_at":"2024-08-14T15:26:13.000000Z","pivot":{"component_id":4179,"user_id":20150}},{"id":6441,"name":"dhil","slug":"dhil","bio":null,"avatar":"\/storage\/avatars\/ubxaDiYYw3Z2tlxx4XKYPnCaTHa1ZiYfb3ZwSLHA.jpg","header":null,"created_at":"2022-01-09T07:18:43.000000Z","updated_at":"2022-01-09T07:23:40.000000Z","pivot":{"component_id":4179,"user_id":6441}}]}" :edit="false"> Full screen Preview

Vojislav

19 components

Tailwind CSS & Alpine.js Profile page

Community Rate

Related components