CINXE.COM

<!DOCTYPE html><html lang="en"><head><style>.async-hide { opacity: 0 !important} </style><script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date; h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer',4000, {'GTM-K9BGS8K':true});</script><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-46172202-22', 'auto', {allowLinker: true}); ga('set', 'anonymizeIp', true); ga('require', 'GTM-K9BGS8K'); ga('require', 'displayfeatures'); ga('require', 'linker'); ga('linker:autoLink', ["2checkout.com","avangate.com"]);</script><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-NKDMSK6');</script><link rel="canonical" href="https://www.creative-tim.com/product/notus-nextjs"/><meta name="keywords" content="free template, free kit, free dashboard, free webapp, free web app, freebie, free, kit, dashboard, webapp, we bapp, starter kit, starter dashboard, starter admin, starter webapp, starter web app, tailwind, tailwindcss, html kit, nextjs kit, html dashboard, nextjs dashboard, html webapp, nextjs webapp html web app, nextjs web app, notus, notus webapp, notus nextjs, notus javascript, notus kit, notus dashboard, notus admin"/><meta name="description" content="Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin. Let Notus NextJS amaze you with its cool features and build tools and get your project to a whole new level."/><meta itemProp="name" content="Notus NextJS by Creative Tim"/><meta itemProp="description" content="Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin. Let Notus NextJS amaze you with its cool features and build tools and get your project to a whole new level."/><meta itemProp="image" content="https://s3.amazonaws.com/creativetim_bucket/products/393/original/opt_notus_nextjs_thumbnail.jpg"/><meta name="twitter:card" content="product"/><meta name="twitter:site" content="@creativetim"/><meta name="twitter:title" content="Notus NextJS by Creative Tim"/><meta name="twitter:description" content="Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin. Let Notus NextJS amaze you with its cool features and build tools and get your project to a whole new level."/><meta name="twitter:creator" content="@creativetim"/><meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/393/original/opt_notus_nextjs_thumbnail.jpg"/><meta property="fb:app_id" content="655968634437471"/><meta property="og:title" content="Notus NextJS by Creative Tim"/><meta property="og:type" content="article"/><meta property="og:url" content="http://demos.creative-tim.com/now-ui-dashboard-pro/examples/dashboard.html"/><meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/393/original/opt_notus_nextjs_thumbnail.jpg"/><meta property="og:description" content="Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin. Let Notus NextJS amaze you with its cool features and build tools and get your project to a whole new level."/><meta property="og:site_name" content="Creative Tim"/><meta charSet="utf-8"/><meta name="theme-color" content="#000000"/><link rel="shortcut icon" href="https://demos.creative-tim.com/notus-nextjs/img/brand/favicon.ico"/><link rel="apple-touch-icon" sizes="76x76" href="https://demos.creative-tim.com/notus-nextjs/img/brand/apple-icon.png"/><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><title>Notus NextJS by Creative Tim</title><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTTfWur0PDbZWPr7Pmq8K3jiDp0_xUziI"></script><meta name="next-head-count" content="4"/><link rel="preload" href="/notus-nextjs/_next/static/css/3049f579541971ad3b60.css" as="style"/><link rel="stylesheet" href="/notus-nextjs/_next/static/css/3049f579541971ad3b60.css" data-n-g=""/><noscript data-n-css=""></noscript><link rel="preload" href="/notus-nextjs/_next/static/chunks/main-a51003f81fcf4135537f.js" as="script"/><link rel="preload" href="/notus-nextjs/_next/static/chunks/webpack-50bee04d1dc61f8adf5b.js" as="script"/><link rel="preload" href="/notus-nextjs/_next/static/chunks/framework.9d524150d48315f49e80.js" as="script"/><link rel="preload" href="/notus-nextjs/_next/static/chunks/commons.31a07ecb9c23896d37ed.js" as="script"/><link rel="preload" href="/notus-nextjs/_next/static/chunks/pages/_app-2dd074098290cc8a97e8.js" as="script"/><link rel="preload" href="/notus-nextjs/_next/static/chunks/05cc48844e3982d1138af1c6a095ca1dd66524ba.2ff9e362802b227602bc.js" as="script"/><link rel="preload" href="/notus-nextjs/_next/static/chunks/pages/index-99df2fb83e0026081b21.js" as="script"/></head><body class="text-blueGray-700 antialiased"><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" title="JavaScript Enable" style="display:none;visibility:hidden"></iframe></noscript><div id="page-transition"></div><div id="__next"><nav class="top-0 fixed z-50 w-full flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-white shadow"><div class="container px-4 mx-auto flex flex-wrap items-center justify-between"><div class="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start"><a class="text-blueGray-700 text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase" href="#pablo">Notus NextJS</a><button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button"><i class="fas fa-bars"></i></button></div><div class="lg:flex flex-grow items-center bg-white lg:bg-opacity-0 lg:shadow-none hidden" id="example-navbar-warning"><ul class="flex flex-col lg:flex-row list-none mr-auto"><li class="flex items-center"><a class="hover:text-blueGray-500 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="https://www.creative-tim.com/learning-lab/tailwind/nextjs/overview/notus?ref=nnjs-index-navbar"><i class="text-blueGray-400 far fa-file-alt text-lg leading-lg mr-2"></i> Docs</a></li></ul><ul class="flex flex-col lg:flex-row list-none lg:ml-auto"><li class="flex items-center"><a class="hover:text-blueGray-500 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="#pablo">Demo Pages</a><div class="hidden bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48"><span class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400">Admin Layout</span><a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700">Dashboard</a><a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700">Settings</a><a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700">Tables</a><a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700">Maps</a><div class="h-0 mx-4 my-2 border border-solid border-blueGray-100"></div><span class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400">Auth Layout</span><a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700">Login</a><a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700">Register</a><div class="h-0 mx-4 my-2 border border-solid border-blueGray-100"></div><span class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400">No Layout</span><a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700">Landing</a><a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700">Profile</a></div></li><li class="flex items-center"><a class="hover:text-blueGray-500 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-nextjs%2F" target="_blank"><i class="text-blueGray-400 fab fa-facebook text-lg leading-lg "></i><span class="lg:hidden inline-block ml-2">Share</span></a></li><li class="flex items-center"><a class="hover:text-blueGray-500 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-nextjs%2F&text=Start%20your%20development%20with%20a%20Free%20Tailwind%20CSS%20and%20NextJS%20UI%20Kit%20and%20Admin.%20Let%20Notus%20NextJS%20amaze%20you%20with%20its%20cool%20features%20and%20build%20tools%20and%20get%20your%20project%20to%20a%20whole%20new%20level." target="_blank"><i class="text-blueGray-400 fab fa-twitter text-lg leading-lg "></i><span class="lg:hidden inline-block ml-2">Tweet</span></a></li><li class="flex items-center"><a class="hover:text-blueGray-500 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="https://github.com/creativetimofficial/notus-nextjs?ref=nnjs-index-navbar" target="_blank"><i class="text-blueGray-400 fab fa-github text-lg leading-lg "></i><span class="lg:hidden inline-block ml-2">Star</span></a></li><li class="flex items-center"><a class="bg-blueGray-700 text-white active:bg-blueGray-600 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-lg outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3 ease-linear transition-all duration-150" href="https://www.creative-tim.com/product/notus-nextjs?ref=nnjs-index" target="_blank"><i class="fas fa-arrow-alt-circle-down"></i> Download</a></li></ul></div></div></nav><section class="header relative pt-16 items-center flex h-screen max-h-860-px"><div class="container mx-auto items-center flex flex-wrap"><div class="w-full md:w-8/12 lg:w-6/12 xl:w-6/12 px-4"><div class="pt-32 sm:pt-0"><h2 class="font-semibold text-4xl text-blueGray-600">Notus NextJS - A beautiful extension for Tailwind CSS.</h2><p class="mt-4 text-lg leading-relaxed text-blueGray-500">Notus NextJS is Free and Open Source. It does not change any of the CSS from <a href="https://tailwindcss.com/?ref=creativetim" class="text-blueGray-600" target="_blank" rel="noopener noreferrer">Tailwind CSS</a>. It features multiple HTML elements and it comes with dynamic components for ReactJS, Vue and Angular.</p><div class="mt-12"><a href="https://www.creative-tim.com/learning-lab/tailwind/nextjs/overview/notus?ref=nnjs-index" target="_blank" class="get-started text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-blueGray-400 active:bg-blueGray-500 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150">Get started</a><a href="https://github.com/creativetimofficial/notus-nextjs?ref=nnjs-index" class="github-star ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-blueGray-700 active:bg-blueGray-600 uppercase text-sm shadow hover:shadow-lg" target="_blank">Github Star</a></div></div></div></div><img class="absolute top-0 b-auto right-0 pt-16 sm:w-6/12 -mt-48 sm:mt-0 w-10/12 max-h-860-px" src="https://demos.creative-tim.com/notus-nextjs/img/pattern_nextjs.png" alt="..."/></section><section class="mt-48 md:mt-40 pb-40 relative bg-blueGray-100"><div class="-mt-20 top-0 bottom-auto left-0 right-0 w-full absolute h-20" style="transform:translateZ(0)"><svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.1" viewBox="0 0 2560 100" x="0" y="0"><polygon class="text-blueGray-100 fill-current" points="2560 0 2560 100 0 100"></polygon></svg></div><div class="container mx-auto"><div class="flex flex-wrap items-center"><div class="w-10/12 md:w-6/12 lg:w-4/12 px-12 md:px-4 mr-auto ml-auto -mt-32"><div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-blueGray-700"><img alt="..." src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80" class="w-full align-middle rounded-t-lg"/><blockquote class="relative p-8 mb-4"><svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block h-95-px -top-94-px"><polygon points="-30,95 583,95 583,65" class="text-blueGray-700 fill-current"></polygon></svg><h4 class="text-xl font-bold text-white">Great for your awesome project</h4><p class="text-md font-light mt-2 text-white">Putting together a page has never been easier than matching together pre-made components. From landing pages presentation to login areas, you can easily customise and built your pages.</p></blockquote></div></div><div class="w-full md:w-6/12 px-4"><div class="flex flex-wrap"><div class="w-full md:w-6/12 px-4"><div class="relative flex flex-col mt-4"><div class="px-4 py-5 flex-auto"><div class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"><i class="fas fa-sitemap"></i></div><h6 class="text-xl mb-1 font-semibold">CSS Components</h6><p class="mb-4 text-blueGray-500">Notus NextJS comes with a huge number of Fully Coded CSS components.</p></div></div><div class="relative flex flex-col min-w-0"><div class="px-4 py-5 flex-auto"><div class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"><i class="fas fa-drafting-compass"></i></div><h6 class="text-xl mb-1 font-semibold">JavaScript Components</h6><p class="mb-4 text-blueGray-500">We also feature many dynamic components for React, NextJS, Vue and Angular.</p></div></div></div><div class="w-full md:w-6/12 px-4"><div class="relative flex flex-col min-w-0 mt-4"><div class="px-4 py-5 flex-auto"><div class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"><i class="fas fa-newspaper"></i></div><h6 class="text-xl mb-1 font-semibold">Pages</h6><p class="mb-4 text-blueGray-500">This extension also comes with 3 sample pages. They are fully coded so you can start working instantly.</p></div></div><div class="relative flex flex-col min-w-0"><div class="px-4 py-5 flex-auto"><div class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"><i class="fas fa-file-alt"></i></div><h6 class="text-xl mb-1 font-semibold">Documentation</h6><p class="mb-4 text-blueGray-500">Built by developers for developers. You will love how easy is to to work with Notus NextJS.</p></div></div></div></div></div></div></div><div class="container mx-auto overflow-hidden pb-20"><div class="flex flex-wrap items-center"><div class="w-full md:w-4/12 px-12 md:px-4 ml-auto mr-auto mt-48"><div class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"><i class="fas fa-sitemap text-xl"></i></div><h3 class="text-3xl mb-2 font-semibold leading-normal">CSS Components</h3><p class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-600">Every element that you need in a product comes built in as a component. All components fit perfectly with each other and can have different colours.</p><div class="block pb-6"><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2">Buttons</span><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2">Inputs</span><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2">Labels</span><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2">Menus</span><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2">Navbars</span><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2">Pagination</span><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2">Progressbars</span><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2">Typography</span></div><a href="https://www.creative-tim.com/learning-lab/tailwind/nextjs/alerts/notus?ref=nnjs-index" target="_blank" class="font-bold text-blueGray-700 hover:text-blueGray-500 ease-linear transition-all duration-150">View All <i class="fa fa-angle-double-right ml-1 leading-relaxed"></i></a></div><div class="w-full md:w-5/12 px-4 mr-auto ml-auto mt-32"><div class="relative flex flex-col min-w-0 w-full mb-6 mt-48 md:mt-0"><img alt="..." src="https://demos.creative-tim.com/notus-nextjs/img/component-btn.png" class="w-full align-middle rounded absolute shadow-lg max-w-100-px left-145-px -top-29-px z-3"/><img alt="..." src="https://demos.creative-tim.com/notus-nextjs/img/component-profile-card.png" class="w-full align-middle rounded-lg absolute shadow-lg max-w-210-px left-260-px -top-160-px"/><img alt="..." src="https://demos.creative-tim.com/notus-nextjs/img/component-info-card.png" class="w-full align-middle rounded-lg absolute shadow-lg max-w-180-px left-40-px -top-225-px z-2"/><img alt="..." src="https://demos.creative-tim.com/notus-nextjs/img/component-info-2.png" class="w-full align-middle rounded-lg absolute shadow-2xl max-w-200-px -left-50-px top-25-px"/><img alt="..." src="https://demos.creative-tim.com/notus-nextjs/img/component-menu.png" class="w-full align-middle rounded absolute shadow-lg max-w-580-px -left-20-px top-210-px"/><img alt="..." src="https://demos.creative-tim.com/notus-nextjs/img/component-btn-pink.png" class="w-full align-middle rounded absolute shadow-xl max-w-120-px left-195-px top-95-px"/></div></div></div><div class="flex flex-wrap items-center pt-32"><div class="w-full md:w-6/12 px-4 mr-auto ml-auto mt-32"><div class="justify-center flex flex-wrap relative"><div class="my-4 w-full lg:w-6/12 px-4"><a href="https://www.creative-tim.com/learning-lab/tailwind/svelte/alerts/notus?ref=vtw-index" target="_blank"><div class="bg-red-600 shadow-lg rounded-lg text-center p-8"><img alt="..." class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/svelte.jpg"/><p class="text-lg text-white mt-4 font-semibold">Svelte</p></div></a><a href="https://www.creative-tim.com/learning-lab/tailwind/react/alerts/notus?ref=vtw-index" target="_blank"><div class="bg-lightBlue-500 shadow-lg rounded-lg text-center p-8 mt-8"><img alt="..." class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/react.jpg"/><p class="text-lg text-white mt-4 font-semibold">ReactJS</p></div></a><a href="https://www.creative-tim.com/learning-lab/tailwind/nextjs/alerts/notus?ref=vtw-index" target="_blank"><div class="bg-blueGray-700 shadow-lg rounded-lg text-center p-8 mt-8"><img alt="..." class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/nextjs.jpg"/><p class="text-lg text-white mt-4 font-semibold">NextJS</p></div></a></div><div class="my-4 w-full lg:w-6/12 px-4 lg:mt-16"><a href="https://www.creative-tim.com/learning-lab/tailwind/js/alerts/notus?ref=vtw-index" target="_blank"><div class="bg-yellow-500 shadow-lg rounded-lg text-center p-8"><img alt="..." class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/js.png"/><p class="text-lg text-white mt-4 font-semibold">JavaScript</p></div></a><a href="https://www.creative-tim.com/learning-lab/tailwind/angular/alerts/notus?ref=vtw-index" target="_blank"><div class="bg-red-700 shadow-lg rounded-lg text-center p-8 mt-8"><img alt="..." class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/angular.jpg"/><p class="text-lg text-white mt-4 font-semibold">Angular</p></div></a><a href="https://www.creative-tim.com/learning-lab/tailwind/vue/alerts/notus?ref=vtw-index" target="_blank"><div class="bg-emerald-500 shadow-lg rounded-lg text-center p-8 mt-8"><img alt="..." class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/vue.jpg"/><p class="text-lg text-white mt-4 font-semibold">Vue.js</p></div></a></div></div></div><div class="w-full md:w-4/12 px-12 md:px-4 ml-auto mr-auto mt-48"><div class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"><i class="fas fa-drafting-compass text-xl"></i></div><h3 class="text-3xl mb-2 font-semibold leading-normal">Javascript Components</h3><p class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-600">In order to create a great User Experience some components require JavaScript. In this way you can manipulate the elements on the page and give more options to your users.</p><p class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-600">We created a set of Components that are dynamic and come to help you.</p><div class="block pb-6"><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2">Alerts</span><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2">Dropdowns</span><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2">Menus</span><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2">Modals</span><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2">Navbars</span><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2">Popovers</span><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2">Tabs</span><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2">Tooltips</span></div><a href="https://www.creative-tim.com/learning-lab/tailwind/nextjs/alerts/notus?ref=nnjs-index" target="_blank" class="font-bold text-blueGray-700 hover:text-blueGray-500 ease-linear transition-all duration-150">View all <i class="fa fa-angle-double-right ml-1 leading-relaxed"></i></a></div></div></div><div class="container mx-auto px-4 pb-32 pt-48"><div class="items-center flex flex-wrap"><div class="w-full md:w-5/12 ml-auto px-12 md:px-4"><div class="md:pr-12"><div class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"><i class="fas fa-file-alt text-xl"></i></div><h3 class="text-3xl font-semibold">Complex Documentation</h3><p class="mt-4 text-lg leading-relaxed text-blueGray-500">This extension comes a lot of fully coded examples that help you get started faster. You can adjust the colors and also the programming language. You can change the text and images and you're good to go.</p><ul class="list-none mt-6"><li class="py-2"><div class="flex items-center"><div><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-blueGray-50 mr-3"><i class="fas fa-fingerprint"></i></span></div><div><h4 class="text-blueGray-500">Built by Developers for Developers</h4></div></div></li><li class="py-2"><div class="flex items-center"><div><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-blueGray-50 mr-3"><i class="fab fa-html5"></i></span></div><div><h4 class="text-blueGray-500">Carefully crafted code for Components</h4></div></div></li><li class="py-2"><div class="flex items-center"><div><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-blueGray-50 mr-3"><i class="far fa-paper-plane"></i></span></div><div><h4 class="text-blueGray-500">Dynamic Javascript Components</h4></div></div></li></ul></div></div><div class="w-full md:w-6/12 mr-auto px-4 pt-24 md:pt-0"><img alt="..." class="max-w-full rounded-lg shadow-xl" style="transform:scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) rotate(2deg)" src="https://demos.creative-tim.com/notus-nextjs/img/documentation.png"/></div></div></div><div class="justify-center text-center flex flex-wrap mt-24"><div class="w-full md:w-6/12 px-12 md:px-4"><h2 class="font-semibold text-4xl">Beautiful Example Pages</h2><p class="text-lg leading-relaxed mt-4 mb-4 text-blueGray-500">Notus NextJS is a completly new product built using our past experience in web templates. Take the examples we made for you and start playing with them.</p></div></div></section><section class="block relative z-1 bg-blueGray-600"><div class="container mx-auto"><div class="justify-center flex flex-wrap"><div class="w-full lg:w-12/12 px-4 -mt-24"><div class="flex flex-wrap"><div class="w-full lg:w-4/12 px-4"><h5 class="text-xl font-semibold pb-4 text-center">Login Page</h5><div class="hover:-mt-4 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg ease-linear transition-all duration-150"><img alt="..." class="align-middle border-none max-w-full h-auto rounded-lg" src="https://demos.creative-tim.com/notus-nextjs/img/login.jpg"/></div></div><div class="w-full lg:w-4/12 px-4"><h5 class="text-xl font-semibold pb-4 text-center">Profile Page</h5><div class="hover:-mt-4 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg ease-linear transition-all duration-150"><img alt="..." class="align-middle border-none max-w-full h-auto rounded-lg" src="https://demos.creative-tim.com/notus-nextjs/img/profile.jpg"/></div></div><div class="w-full lg:w-4/12 px-4"><h5 class="text-xl font-semibold pb-4 text-center">Landing Page</h5><div class="hover:-mt-4 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg ease-linear transition-all duration-150"><img alt="..." class="align-middle border-none max-w-full h-auto rounded-lg" src="https://demos.creative-tim.com/notus-nextjs/img/landing.jpg"/></div></div></div></div></div></div></section><section class="py-20 bg-blueGray-600 overflow-hidden"><div class="container mx-auto pb-64"><div class="flex flex-wrap justify-center"><div class="w-full md:w-5/12 px-12 md:px-4 ml-auto mr-auto md:mt-64"><div class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"><i class="fas fa-code-branch text-xl"></i></div><h3 class="text-3xl mb-2 font-semibold leading-normal text-white">Open Source</h3><p class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-400">Since <a href="https://tailwindcss.com/?ref=creative" class="text-blueGray-300" target="_blank">Tailwind CSS</a> is an open source project we wanted to continue this movement too. You can give this version a try to feel the design and also test the quality of the code!</p><p class="text-lg font-light leading-relaxed mt-0 mb-4 text-blueGray-400">Get it free on Github and please help us spread the news with a Star!</p><a href="https://github.com/creativetimofficial/notus-nextjs?ref=nnjs-index" target="_blank" class="github-star mt-4 inline-block text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-blueGray-700 active:bg-blueGray-600 uppercase text-sm shadow hover:shadow-lg">Github Star</a></div><div class="w-full md:w-4/12 px-4 mr-auto ml-auto mt-32 relative"><i class="fab fa-github text-blueGray-700 absolute text-55 -top-150-px -right-100 left-auto opacity-80"></i></div></div></div></section><section class="pb-16 bg-blueGray-200 relative pt-32"><div class="-mt-20 top-0 bottom-auto left-0 right-0 w-full absolute h-20" style="transform:translateZ(0)"><svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.1" viewBox="0 0 2560 100" x="0" y="0"><polygon class="text-blueGray-200 fill-current" points="2560 0 2560 100 0 100"></polygon></svg></div><div class="container mx-auto"><div class="flex flex-wrap justify-center bg-white shadow-xl rounded-lg -mt-64 py-16 px-12 relative z-10"><div class="w-full text-center lg:w-8/12"><p class="text-4xl text-center"><span role="img" aria-label="love">馃槏</span></p><h3 class="font-semibold text-3xl">Do you love this Starter Kit?</h3><p class="text-blueGray-500 text-lg leading-relaxed mt-4 mb-4">Cause if you do, it can be yours now. Hit the buttons below to navigate to get the Free version for your next project. Build a new web app or give an old project a new look!</p><div class="sm:block flex flex-col mt-10"><a href="https://www.creative-tim.com/learning-lab/tailwind/nextjs/overview/notus?ref=nnjs-index" target="_blank" class="get-started text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-2 bg-blueGray-400 active:bg-blueGray-500 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150">Get started</a><a href="https://github.com/creativetimofficial/notus-nextjs?ref=nnjs-index" target="_blank" class="github-star sm:ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-blueGray-700 active:bg-blueGray-600 uppercase text-sm shadow hover:shadow-lg"><i class="fab fa-github text-lg mr-1"></i><span>Help With a Star</span></a></div><div class="text-center mt-16"></div></div></div></div></section><footer class="relative bg-blueGray-200 pt-8 pb-6"><div class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20 h-20" style="transform:translateZ(0)"><svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.1" viewBox="0 0 2560 100" x="0" y="0"><polygon class="text-blueGray-200 fill-current" points="2560 0 2560 100 0 100"></polygon></svg></div><div class="container mx-auto px-4"><div class="flex flex-wrap text-center lg:text-left"><div class="w-full lg:w-6/12 px-4"><h4 class="text-3xl font-semibold">Let's keep in touch!</h4><h5 class="text-lg mt-0 mb-2 text-blueGray-600">Find us on any of these platforms, we respond 1-2 business days.</h5><div class="mt-6 lg:mb-0 mb-6"><button class="bg-white text-lightBlue-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2" type="button"><i class="fab fa-twitter"></i></button><button class="bg-white text-lightBlue-600 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2" type="button"><i class="fab fa-facebook-square"></i></button><button class="bg-white text-pink-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2" type="button"><i class="fab fa-dribbble"></i></button><button class="bg-white text-blueGray-800 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2" type="button"><i class="fab fa-github"></i></button></div></div><div class="w-full lg:w-6/12 px-4"><div class="flex flex-wrap items-top mb-6"><div class="w-full lg:w-4/12 px-4 ml-auto"><span class="block uppercase text-blueGray-500 text-sm font-semibold mb-2">Useful Links</span><ul class="list-unstyled"><li><a class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm" href="https://www.creative-tim.com/presentation?ref=nnjs-footer">About Us</a></li><li><a class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm" href="https://blog.creative-tim.com?ref=nnjs-footer">Blog</a></li><li><a class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm" href="https://www.github.com/creativetimofficial?ref=nnjs-footer">Github</a></li><li><a class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm" href="https://www.creative-tim.com/bootstrap-themes/free?ref=nnjs-footer">Free Products</a></li></ul></div><div class="w-full lg:w-4/12 px-4"><span class="block uppercase text-blueGray-500 text-sm font-semibold mb-2">Other Resources</span><ul class="list-unstyled"><li><a class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm" href="https://github.com/creativetimofficial/notus-nextjs/blob/main/LICENSE.md?ref=nnjs-footer">MIT License</a></li><li><a class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm" href="https://creative-tim.com/terms?ref=nnjs-footer">Terms & Conditions</a></li><li><a class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm" href="https://creative-tim.com/privacy?ref=nnjs-footer">Privacy Policy</a></li><li><a class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm" href="https://creative-tim.com/contact-us?ref=nnjs-footer">Contact Us</a></li></ul></div></div></div></div><hr class="my-6 border-blueGray-300"/><div class="flex flex-wrap items-center md:justify-between justify-center"><div class="w-full md:w-4/12 px-4 mx-auto text-center"><div class="text-sm text-blueGray-500 font-semibold py-1">Copyright 漏 2021 Notus NextJS by <a href="https://www.creative-tim.com?ref=nnjs-footer" class="text-blueGray-500 hover:text-blueGray-800">Creative Tim</a>.</div></div></div></div></footer></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"z8WabyzGUjxiGMkXCiJyn","assetPrefix":"/notus-nextjs","nextExport":true,"isFallback":false,"appGip":true}</script><script nomodule="" src="/notus-nextjs/_next/static/chunks/polyfills-462676b8e60afb64d330.js"></script><script src="/notus-nextjs/_next/static/chunks/main-a51003f81fcf4135537f.js" async=""></script><script src="/notus-nextjs/_next/static/chunks/webpack-50bee04d1dc61f8adf5b.js" async=""></script><script src="/notus-nextjs/_next/static/chunks/framework.9d524150d48315f49e80.js" async=""></script><script src="/notus-nextjs/_next/static/chunks/commons.31a07ecb9c23896d37ed.js" async=""></script><script src="/notus-nextjs/_next/static/chunks/pages/_app-2dd074098290cc8a97e8.js" async=""></script><script src="/notus-nextjs/_next/static/chunks/05cc48844e3982d1138af1c6a095ca1dd66524ba.2ff9e362802b227602bc.js" async=""></script><script src="/notus-nextjs/_next/static/chunks/pages/index-99df2fb83e0026081b21.js" async=""></script><script src="/notus-nextjs/_next/static/z8WabyzGUjxiGMkXCiJyn/_buildManifest.js" async=""></script><script src="/notus-nextjs/_next/static/z8WabyzGUjxiGMkXCiJyn/_ssgManifest.js" async=""></script></body></html>