FAQ page

By CeriumTeam

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 <link href=https://www.creative-tim.com/"https:////fonts.googleapis.com//css2?family=Quicksand:wght@500&display=swap\%22 rel=\"stylesheet\">\r\n <link href=https://www.creative-tim.com/"https:////fonts.googleapis.com//css2?family=Spartan:wght@600&display=swap\%22 rel=\"stylesheet\"> \r\n<\/head>\r\n \r\n<style>\r\n * {\r\n font-family: 'Quicksand', sans-serif;\r\n }\r\n<\/style> \r\n\r\n\r\n<body>\r\n\r\n <article id=\"the-article\">\r\n\r\n<div>\r\n <div class=\"mx-auto max-w-6xl\">\r\n <div class=\"p-2 rounded\">\r\n <div class=\"flex flex-col md:flex-row\">\r\n <div class=\"md:w-1\/3 p-4 text-sm\">\r\n\r\n <div class=\"sticky inset-x-0 top-0 left-0 py-12\">\r\n \r\n <div class=\"text-3xl text-green-400 mb-8\">Frequently asked questions.<\/div>\r\n <div class=\"mb-2\">Lorem Ipsum ?<\/div>\r\n <div class=\"text-xs text-gray-600\">See our FAQ for more details<\/div>\r\n\r\n <div class=\"relative text-gray-600 mt-8 lg:mr-16\">\r\n <input \r\n x-ref=\"searchField\"\r\n x-model=\"search\"\r\n x-on:keydown.window.prevent.slash=\"$refs.searchField.focus()\"\r\n type=\"search\" name=\"serch\" placeholder=\"Search\" class=\"bg-white w-full h-10 px-5 rounded-full text-sm focus:outline-none\">\r\n <button type=\"submit\" class=\"focus:outline-none absolute right-0 top-0 mt-3 mr-4\">\r\n <svg class=\"h-4 w-4 fill-current\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" version=\"1.1\" id=\"Capa_1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 56.966 56.966\" style=\"enable-background:new 0 0 56.966 56.966;\" xml:space=\"preserve\" width=\"512px\" height=\"512px\">\r\n <path d=\"M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92 c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17 s-17-7.626-17-17S14.61,6,23.984,6z\"\/>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <div class=\"md:w-2\/3 py-12 \">\r\n <div class=\"p-4\">\r\n\r\n <div class=\"item px-6 py-6\" x-data=\"{isOpen : false}\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center justify-between\" @click.prevent=\"isOpen = true\">\r\n <h4 :class=\"{'text-green-400 font-medium' : isOpen == true}\">Lorem Ipsum ?<\/h4>\r\n <svg \r\n :class=\"{'transform rotate-180' : isOpen == true}\"\r\n class=\"w-5 h-5 text-gray-500\"\r\n fill=\"none\" stroke-linecap=\"round\" \r\n stroke-linejoin=\"round\" stroke-width=\"2\" \r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/a>\r\n <div x-show=\"isOpen\" @click.away=\"isOpen = false\" class=\"mt-3\" :class=\"{'text-gray-600' : isOpen == true}\">\r\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"item px-6 py-6\" x-data=\"{isOpen : false}\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center justify-between\" @click.prevent=\"isOpen = true\">\r\n <h4 :class=\"{'text-green-400 font-medium' : isOpen == true}\">Lorem Ipsum ?<\/h4>\r\n <svg \r\n :class=\"{'transform rotate-180' : isOpen == true}\"\r\n class=\"w-5 h-5 text-gray-500\"\r\n fill=\"none\" stroke-linecap=\"round\" \r\n stroke-linejoin=\"round\" stroke-width=\"2\" \r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/a>\r\n <div x-show=\"isOpen\" @click.away=\"isOpen = false\" class=\"mt-3\" :class=\"{'text-gray-600' : isOpen == true}\">\r\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"item px-6 py-6\" x-data=\"{isOpen : false}\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center justify-between\" @click.prevent=\"isOpen = true\">\r\n <h4 :class=\"{'text-green-400 font-medium' : isOpen == true}\">Lorem Ipsum ?<\/h4>\r\n <svg \r\n :class=\"{'transform rotate-180' : isOpen == true}\"\r\n class=\"w-5 h-5 text-gray-500\"\r\n fill=\"none\" stroke-linecap=\"round\" \r\n stroke-linejoin=\"round\" stroke-width=\"2\" \r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/a>\r\n <div x-show=\"isOpen\" @click.away=\"isOpen = false\" class=\"mt-3\" :class=\"{'text-gray-600' : isOpen == true}\">\r\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"item px-6 py-6\" x-data=\"{isOpen : false}\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center justify-between\" @click.prevent=\"isOpen = true\">\r\n <h4 :class=\"{'text-green-400 font-medium' : isOpen == true}\">Lorem Ipsum ?<\/h4>\r\n <svg \r\n :class=\"{'transform rotate-180' : isOpen == true}\"\r\n class=\"w-5 h-5 text-gray-500\"\r\n fill=\"none\" stroke-linecap=\"round\" \r\n stroke-linejoin=\"round\" stroke-width=\"2\" \r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/a>\r\n <div x-show=\"isOpen\" @click.away=\"isOpen = false\" class=\"mt-3\" :class=\"{'text-gray-600' : isOpen == true}\">\r\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"item px-6 py-6\" x-data=\"{isOpen : false}\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center justify-between\" @click.prevent=\"isOpen = true\">\r\n <h4 :class=\"{'text-green-400 font-medium' : isOpen == true}\">Lorem Ipsum ?<\/h4>\r\n <svg \r\n :class=\"{'transform rotate-180' : isOpen == true}\"\r\n class=\"w-5 h-5 text-gray-500\"\r\n fill=\"none\" stroke-linecap=\"round\" \r\n stroke-linejoin=\"round\" stroke-width=\"2\" \r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/a>\r\n <div x-show=\"isOpen\" @click.away=\"isOpen = false\" class=\"mt-3\" :class=\"{'text-gray-600' : isOpen == true}\">\r\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"item px-6 py-6\" x-data=\"{isOpen : false}\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center justify-between\" @click.prevent=\"isOpen = true\">\r\n <h4 :class=\"{'text-green-400 font-medium' : isOpen == true}\">Lorem Ipsum ?<\/h4>\r\n <svg \r\n :class=\"{'transform rotate-180' : isOpen == true}\"\r\n class=\"w-5 h-5 text-gray-500\"\r\n fill=\"none\" stroke-linecap=\"round\" \r\n stroke-linejoin=\"round\" stroke-width=\"2\" \r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/a>\r\n <div x-show=\"isOpen\" @click.away=\"isOpen = false\" class=\"mt-3\" :class=\"{'text-gray-600' : isOpen == true}\">\r\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"item px-6 py-6\" x-data=\"{isOpen : false}\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center justify-between\" @click.prevent=\"isOpen = true\">\r\n <h4 :class=\"{'text-green-400 font-medium' : isOpen == true}\">Lorem Ipsum ?<\/h4>\r\n <svg \r\n :class=\"{'transform rotate-180' : isOpen == true}\"\r\n class=\"w-5 h-5 text-gray-500\"\r\n fill=\"none\" stroke-linecap=\"round\" \r\n stroke-linejoin=\"round\" stroke-width=\"2\" \r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/a>\r\n <div x-show=\"isOpen\" @click.away=\"isOpen = false\" class=\"mt-3\" :class=\"{'text-gray-600' : isOpen == true}\">\r\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"item px-6 py-6\" x-data=\"{isOpen : false}\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center justify-between\" @click.prevent=\"isOpen = true\">\r\n <h4 :class=\"{'text-green-400 font-medium' : isOpen == true}\">Lorem Ipsum ?<\/h4>\r\n <svg \r\n :class=\"{'transform rotate-180' : isOpen == true}\"\r\n class=\"w-5 h-5 text-gray-500\"\r\n fill=\"none\" stroke-linecap=\"round\" \r\n stroke-linejoin=\"round\" stroke-width=\"2\" \r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/a>\r\n <div x-show=\"isOpen\" @click.away=\"isOpen = false\" class=\"mt-3\" :class=\"{'text-gray-600' : isOpen == true}\">\r\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"item px-6 py-6\" x-data=\"{isOpen : false}\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center justify-between\" @click.prevent=\"isOpen = true\">\r\n <h4 :class=\"{'text-green-400 font-medium' : isOpen == true}\">Lorem Ipsum ?<\/h4>\r\n <svg \r\n :class=\"{'transform rotate-180' : isOpen == true}\"\r\n class=\"w-5 h-5 text-gray-500\"\r\n fill=\"none\" stroke-linecap=\"round\" \r\n stroke-linejoin=\"round\" stroke-width=\"2\" \r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/a>\r\n <div x-show=\"isOpen\" @click.away=\"isOpen = false\" class=\"mt-3\" :class=\"{'text-gray-600' : isOpen == true}\">\r\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"item px-6 py-6\" x-data=\"{isOpen : false}\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center justify-between\" @click.prevent=\"isOpen = true\">\r\n <h4 :class=\"{'text-green-400 font-medium' : isOpen == true}\">Lorem Ipsum ?<\/h4>\r\n <svg \r\n :class=\"{'transform rotate-180' : isOpen == true}\"\r\n class=\"w-5 h-5 text-gray-500\"\r\n fill=\"none\" stroke-linecap=\"round\" \r\n stroke-linejoin=\"round\" stroke-width=\"2\" \r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/a>\r\n <div x-show=\"isOpen\" @click.away=\"isOpen = false\" class=\"mt-3\" :class=\"{'text-gray-600' : isOpen == true}\">\r\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"item px-6 py-6\" x-data=\"{isOpen : false}\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center justify-between\" @click.prevent=\"isOpen = true\">\r\n <h4 :class=\"{'text-green-400 font-medium' : isOpen == true}\">Lorem Ipsum ?<\/h4>\r\n <svg \r\n :class=\"{'transform rotate-180' : isOpen == true}\"\r\n class=\"w-5 h-5 text-gray-500\"\r\n fill=\"none\" stroke-linecap=\"round\" \r\n stroke-linejoin=\"round\" stroke-width=\"2\" \r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/a>\r\n <div x-show=\"isOpen\" @click.away=\"isOpen = false\" class=\"mt-3\" :class=\"{'text-gray-600' : isOpen == true}\">\r\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"item px-6 py-6\" x-data=\"{isOpen : false}\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center justify-between\" @click.prevent=\"isOpen = true\">\r\n <h4 :class=\"{'text-green-400 font-medium' : isOpen == true}\">Lorem Ipsum ?<\/h4>\r\n <svg \r\n :class=\"{'transform rotate-180' : isOpen == true}\"\r\n class=\"w-5 h-5 text-gray-500\"\r\n fill=\"none\" stroke-linecap=\"round\" \r\n stroke-linejoin=\"round\" stroke-width=\"2\" \r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/a>\r\n <div x-show=\"isOpen\" @click.away=\"isOpen = false\" class=\"mt-3\" :class=\"{'text-gray-600' : isOpen == true}\">\r\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"item px-6 py-6\" x-data=\"{isOpen : false}\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center justify-between\" @click.prevent=\"isOpen = true\">\r\n <h4 :class=\"{'text-green-400 font-medium' : isOpen == true}\">Lorem Ipsum ?<\/h4>\r\n <svg \r\n :class=\"{'transform rotate-180' : isOpen == true}\"\r\n class=\"w-5 h-5 text-gray-500\"\r\n fill=\"none\" stroke-linecap=\"round\" \r\n stroke-linejoin=\"round\" stroke-width=\"2\" \r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/a>\r\n <div x-show=\"isOpen\" @click.away=\"isOpen = false\" class=\"mt-3\" :class=\"{'text-gray-600' : isOpen == true}\">\r\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"item px-6 py-6\" x-data=\"{isOpen : false}\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center justify-between\" @click.prevent=\"isOpen = true\">\r\n <h4 :class=\"{'text-green-400 font-medium' : isOpen == true}\">Lorem Ipsum ?<\/h4>\r\n <svg \r\n :class=\"{'transform rotate-180' : isOpen == true}\"\r\n class=\"w-5 h-5 text-gray-500\"\r\n fill=\"none\" stroke-linecap=\"round\" \r\n stroke-linejoin=\"round\" stroke-width=\"2\" \r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/a>\r\n <div x-show=\"isOpen\" @click.away=\"isOpen = false\" class=\"mt-3\" :class=\"{'text-gray-600' : isOpen == true}\">\r\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"item px-6 py-6\" x-data=\"{isOpen : false}\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center justify-between\" @click.prevent=\"isOpen = true\">\r\n <h4 :class=\"{'text-green-400 font-medium' : isOpen == true}\">Lorem Ipsum ?<\/h4>\r\n <svg \r\n :class=\"{'transform rotate-180' : isOpen == true}\"\r\n class=\"w-5 h-5 text-gray-500\"\r\n fill=\"none\" stroke-linecap=\"round\" \r\n stroke-linejoin=\"round\" stroke-width=\"2\" \r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/a>\r\n <div x-show=\"isOpen\" @click.away=\"isOpen = false\" class=\"mt-3\" :class=\"{'text-gray-600' : isOpen == true}\">\r\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"item px-6 py-6\" x-data=\"{isOpen : false}\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center justify-between\" @click.prevent=\"isOpen = true\">\r\n <h4 :class=\"{'text-green-400 font-medium' : isOpen == true}\">Lorem Ipsum ?<\/h4>\r\n <svg \r\n :class=\"{'transform rotate-180' : isOpen == true}\"\r\n class=\"w-5 h-5 text-gray-500\"\r\n fill=\"none\" stroke-linecap=\"round\" \r\n stroke-linejoin=\"round\" stroke-width=\"2\" \r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/a>\r\n <div x-show=\"isOpen\" @click.away=\"isOpen = false\" class=\"mt-3\" :class=\"{'text-gray-600' : isOpen == true}\">\r\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"item px-6 py-6\" x-data=\"{isOpen : false}\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center justify-between\" @click.prevent=\"isOpen = true\">\r\n <h4 :class=\"{'text-green-400 font-medium' : isOpen == true}\">Lorem Ipsum ?<\/h4>\r\n <svg \r\n :class=\"{'transform rotate-180' : isOpen == true}\"\r\n class=\"w-5 h-5 text-gray-500\"\r\n fill=\"none\" stroke-linecap=\"round\" \r\n stroke-linejoin=\"round\" stroke-width=\"2\" \r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/a>\r\n <div x-show=\"isOpen\" @click.away=\"isOpen = false\" class=\"mt-3\" :class=\"{'text-gray-600' : isOpen == true}\">\r\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"item px-6 py-6\" x-data=\"{isOpen : false}\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center justify-between\" @click.prevent=\"isOpen = true\">\r\n <h4 :class=\"{'text-green-400 font-medium' : isOpen == true}\">Lorem Ipsum ?<\/h4>\r\n <svg \r\n :class=\"{'transform rotate-180' : isOpen == true}\"\r\n class=\"w-5 h-5 text-gray-500\"\r\n fill=\"none\" stroke-linecap=\"round\" \r\n stroke-linejoin=\"round\" stroke-width=\"2\" \r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/a>\r\n <div x-show=\"isOpen\" @click.away=\"isOpen = false\" class=\"mt-3\" :class=\"{'text-gray-600' : isOpen == true}\">\r\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<\/article>\r\n\r\n<div\r\n\tx-data=\"scrollHandler(document.getElementById('the-article'))\"\r\n\tx-cloak\r\n\taria-hidden=\"true\"\r\n\t@scroll.window=\"calculateHeight(window.scrollY)\"\r\n\tclass=\"fixed h-screen w-1 hover:bg-gray-200 top-0 left-0 bg-gray-300\">\r\n\t<div :style=\"`max-height:${height}%`\" class=\"h-full bg-green-400\"><\/div>\r\n<\/div>\r\n\r\n<div\r\n\tid=\"alpine-devtools\"\r\n\tx-data=\"devtools()\"\r\n\tx-show=\"alpines.length\"\r\n\tx-init=\"start()\">\r\n<\/div>\r\n<script>\r\nfunction scrollHandler(element = null) {\r\n\treturn {\r\n\t\theight: 0,\r\n\t\telement: element,\r\n\t\tcalculateHeight(position) {\r\n\t\t\tconst distanceFromTop = this.element.offsetTop\r\n\t\t\tconst contentHeight = this.element.clientHeight\r\n\t\t\tconst visibleContent = contentHeight - window.innerHeight\r\n\t\t\tconst start = Math.max(0, position - distanceFromTop)\r\n\t\t\tconst percent = (start \/ visibleContent) * 100;\r\n\t\t\trequestAnimationFrame(() => {\r\n\t\t\t\tthis.height = percent;\r\n\t\t\t});\r\n\t\t},\r\n\t\tinit() {\r\n\t\t\tthis.element = this.element || document.body;\r\n\t\t\tthis.calculateHeight(window.scrollY);\r\n\t\t}\r\n\t};\r\n}\r\n\r\n<\/script>\r\n<\/body>","author_type":"App\\User","author_id":94,"collection_id":null,"fork_id":null,"votes":6,"score":"5.0","visits":12046,"popularity":1265,"slug":"animation-demos","approved":1,"created_at":"2020-12-26T00:00:00.000000Z","updated_at":"2024-09-19T04:19:35.000000Z","downloads":223,"code_views":3377,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":8705,"model_type":"App\\Component","model_id":830,"collection_name":"preview","name":"temp11611","file_name":"temp11611.png","mime_type":"image\/png","disk":"public","size":49805,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp11611___media_library_original_1280_957.png","temp11611___media_library_original_1070_800.png","temp11611___media_library_original_895_669.png","temp11611___media_library_original_749_560.png","temp11611___media_library_original_627_469.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvUnNJN1A3VjZOenpPVjNGa2Nxd0ZVV1dJL3UvaFFBWm9BWEFvQXEzQy9PS0FMTWYzZndvQVE5YUFIaWdDcGNnbVFZb0FzeC9kL0NnQkNPYUFQL1oiPgoJPC9pbWFnZT4KPC9zdmc+"}},"order_column":8518,"created_at":"2023-02-03T13:41:56.000000Z","updated_at":"2023-02-03T13:41:58.000000Z","conversions_disk":"public","uuid":"b02edc28-98dd-478d-869d-c0e642f73f3f","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/8705\/temp11611.png","preview_url":""}],"author":{"id":94,"name":"Mehmet Sa\u011f\u0131r","slug":"mehmet-sagir","bio":null,"avatar":"\/storage\/avatars\/GCaxuD4TpgLxxyCadnUZrD6quR24YwmmXwXAGiah.png","header":null,"created_at":"2019-09-17T10:42:10.000000Z","updated_at":"2021-06-27T12:09:36.000000Z"},"tags":[{"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":830,"tag_id":5}},{"id":81,"name":{"en":"Faq"},"description":"FAQ components allows website developers to integrate a dedicated section on a webpage or within an application, enabling visitors to access concise answers to common queries related to products, services, policies, or other pertinent topic","meta_description":"A well-constructed FAQ page offers significant advantages for both your business and its customers. Discover top-notch examples that can serve as inspiration for creating your own.","slug":{"en":"faq"},"type":null,"order_column":70,"created_at":"2023-11-14T13:33:58.000000Z","updated_at":"2023-11-14T13:33:58.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":830,"tag_id":81}}],"fork":null,"favorites":[{"id":3620,"name":"Sufod","slug":"sufod","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/7816743?v=4","header":null,"created_at":"2021-05-29T21:34:07.000000Z","updated_at":"2021-05-29T21:34:07.000000Z","pivot":{"component_id":830,"user_id":3620}},{"id":3854,"name":"rafszul","slug":"rafszul","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/1061573325988814849\/BTTrTKV0_normal.jpg","header":null,"created_at":"2021-06-13T22:59:26.000000Z","updated_at":"2021-06-13T22:59:26.000000Z","pivot":{"component_id":830,"user_id":3854}},{"id":4473,"name":"xoojulian","slug":"xoojulian","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/10708117?v=4","header":null,"created_at":"2021-08-03T02:17:38.000000Z","updated_at":"2021-08-03T02:17:38.000000Z","pivot":{"component_id":830,"user_id":4473}},{"id":3241,"name":"moneya","slug":"moneya","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/7353773?v=4","header":null,"created_at":"2021-04-28T15:37:06.000000Z","updated_at":"2021-04-28T15:37:06.000000Z","pivot":{"component_id":830,"user_id":3241}},{"id":9109,"name":"harsh","slug":"harsh","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/2bb5a389cfe200eec4d20105574c1afc","header":null,"created_at":"2022-09-20T14:04:09.000000Z","updated_at":"2022-09-20T14:04:09.000000Z","pivot":{"component_id":830,"user_id":9109}},{"id":14334,"name":"Shawon Farabi","slug":"shawon-farabi","bio":"Shawon Farabi is a Programmar","avatar":"\/storage\/avatars\/zJxVkFXs97R2D4EUCc0CZes9gQGsrLV9s0T2LQba.png","header":null,"created_at":"2023-09-25T01:45:40.000000Z","updated_at":"2024-01-30T16:10:55.000000Z","pivot":{"component_id":830,"user_id":14334}}]}" :edit="false"> Full screen Preview

Mehmet Sağır

1 component Profile On

FAQ page

Community Rate

Related components