Notus Design System PRO by Creative Tim | Premium UI Kit and Admin for Tailwind CSS

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="theme-color" content="#000000"> <title> Notus Design System PRO by Creative Tim | Premium UI Kit and Admin for Tailwind CSS </title>   <link rel="canonical" href="https://www.creative-tim.com/product/notus-design-system-pro" />  <meta name="keywords" content="pro template, pro kit, pro dashboard, pro webapp, pro web app, npm package, npm library, pro library, pro, kit, dashboard, webapp, we bapp, starter kit, starter dashboard, starter admin, starter webapp, starter web app, tailwind, tailwindcss, html kit, tailwind kit, html dashboard, html dashboard, html webapp, html web app, tailwind web app, notus, notus webapp, notus html, notus javascript, notus kit, notus dashboard, notus admin, notus design system html"> <meta name="description" content="Start your development with a Premium Tailwind CSS and HTML UI Kit and Admin components library. Let Notus Design System PRO amaze you with its cool features and build tools and get your project to a whole new level.">  <meta name="twitter:card" content="product"> <meta name="twitter:site" content="@creativetim"> <meta name="twitter:title" content="Notus Design System PRO by Creative Tim"> <meta name="twitter:description" content="Start your development with a Premium Tailwind CSS and HTML UI Kit and Admin components library. Let Notus Design System PRO 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://raw.githubusercontent.com/creativetimofficial/public-assets/master/notus-design-system-pro/notus-design-system-pro.jpg">  <meta property="fb:app_id" content="655968634437471"> <meta property="og:title" content="Notus Design System PRO by Creative Tim" /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://www.creative-tim.com/product/notus-design-system-pro-html" /> <meta property="og:image" content="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/notus-design-system-pro/notus-design-system-pro.jpg" /> <meta property="og:description" content="Start your development with a Premium Tailwind CSS and HTML UI Kit and Admin components library. Let Notus Design System PRO 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 name="description" content="Notus Design System PRO by Creative Tim | Premium UI Kit and Admin for Tailwind CSS"> <link rel="shortcut icon" href="./assets/img/favicon.ico"> <link rel="apple-touch-icon" sizes="76x76" href="./assets/img/favicon.ico"> <link rel="stylesheet" href="./assets/styles/tailwind.min.css"> <link rel="stylesheet" href="./assets/styles/fontawesome/css/all.min.css" /> <link rel="stylesheet" href="./assets/styles/highlight.css" />  <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>  </head> <body class="text-blueGray-700 antialiased">   <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <div class="bg-white docs-components-wrapper">  <nav class="fixed top-0 w-full bg-blueGray-900 flex flex-wrap items-center justify-between px-2 py-3 z-9999"> <div class="w-full px-4 mx-auto flex flex-wrap items-center justify-between max-h-screen-70 overflow-y-auto"> <div class="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start"> <a class="text-white text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase" href="/notus-design-system-pro">Notus Design System PRO</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" onclick="toggleNavbar('example-collapse-navbar')"> <i class="text-white fas fa-bars"></i> </button> </div> <div class="lg:flex flex-grow items-center bg-white lg:bg-transparent lg:shadow-none hidden"> <ul class="flex flex-col lg:flex-row list-none mr-auto lg:items-center"> <li> <a class="hover:opacity-75 lg:text-white px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out text-blueGray-800" href="https://www.creative-tim.com/learning-lab/tailwind/js/overview/notus" target="_blank">Documentation</a> </li> <li> <div class="inline-block group"> <a class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-200 ease-in-out text-white" href="javascript:;">Components <i class="ml-1 fas fa-caret-down"></i></a> <div class=" block absolute origin-top-left bg-white text-base float-left p-2 pt-0 list-none text-left rounded-lg shadow-lg w-48 transition-all duration-200 ease-in-out transform scale-0 opacity-0 group-hover:opacity-100 group-hover:scale-100 border"> <div class="flex flex-wrap max-lg:pl-4 py-2"> <div class="w-full"> <div class="pl-0"> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./#presentation-id">Presentation</a> </div> </div> <div class="w-full"> <div class="pl-0"> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./#admin-id">Admin</a> </div> </div> <div class="w-full"> <div class="pl-0"> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./#e-commerce-id">E-commerce</a> </div> </div> <div class="w-full"> <div class="pl-0"> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./#blog-id">Blog</a> </div> </div> <div class="w-full"> <div class="pl-0"> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./#authentication-id">Authentication</a> </div> </div> <div class="w-full"> <div class="pl-0"> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./#misc-id">Misc</a> </div> </div> <div class="w-full"> <div class="pl-0"> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./#error-id">Error</a> </div> </div> </div> </div> </div> </li> <li> <div class="inline-block group"> <a class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-200 ease-in-out text-white" href="javascript:;">Example Pages <i class="ml-1 fas fa-caret-down"></i></a> <div class=" block absolute origin-top-left bg-white text-base float-left p-2 pt-0 list-none text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-0 opacity-0 group-hover:opacity-100 group-hover:scale-100 border"> <div class="flex flex-wrap max-lg:pl-4"> <div class="w-full"> <p class="uppercase font-bold text-xs px-3 pt-6 pb-2 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Pages</p> <div class="pl-0"> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./example/chat/chat.html">Chat</a> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./example/checkout/checkout.html">Checkout</a> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./example/e-commerce/e-commerce.html">E-Commerce</a> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./example/invoice/invoice.html">Invoice</a> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./example/pricing/pricing.html">Pricing</a> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./example/product/product.html">Product</a> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./example/profile/profile.html">Profile </a> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./example/settings/settings.html">Settings </a> </div> </div> </div> </div> </div> </li> </ul> <ul class="flex flex-col lg:flex-row list-none lg:ml-auto lg:items-center"> <li> <a class="text-blueGray-800 hover:text-blueGray-600 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="javascript:;"><i class="text-blueGray-500 lg:text-white fab fa-facebook text-lg leading-lg "></i><span class="lg:hidden inline-block ml-2">Share</span></a> </li> <li> <a class="text-blueGray-800 hover:text-blueGray-600 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="javascript:;"><i class="text-blueGray-500 lg:text-white fab fa-twitter text-lg leading-lg "></i><span class="lg:hidden inline-block ml-2">Tweet</span></a> </li> <li> <a class="text-blueGray-800 hover:text-blueGray-600 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="javascript:;"><i class="text-blueGray-500 lg:text-white fab fa-github text-lg leading-lg "></i><span class="lg:hidden inline-block ml-2">Star</span></a> </li> <li> <a href="https://www.creative-tim.com/product/notus-js" class="text-xs px-4 py-2 shadow hover:shadow-md text-white bg-blueGray-800 border-blueGray-800 active:bg-blueGray-900 active:border-blueGray-900 rounded outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold mr-2">Check FREE</a> </li> <li> <a href="https://www.creative-tim.com/product/notus-design-system-pro" class="text-xs px-4 py-2 shadow hover:shadow-md text-blueGray-800 bg-blueGray-100 border-blueGray-100 active:bg-blueGray-300 active:border-blueGray-300 rounded outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold">Buy PRO</a> </li> </ul> </div>  <div class="flex-grow items-center bg-white lg:bg-transparent lg:shadow-none rounded block pt-1 pb-4 hidden" id="example-collapse-navbar"> <ul class="flex flex-col lg:flex-row list-none mr-auto lg:items-center"> <li> <a class="hover:opacity-75 lg:text-white px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out text-blueGray-800" href="https://www.creative-tim.com/learning-lab/tailwind/js/overview/notus" target=" ">Documentation</a> </li> <li> <div class="inline-block group"> <a class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-200 ease-in-out text-blueGray-800" href="javascript:;">Components <i class="ml-1 fas fa-caret-down"></i> </a> <div class=" block absolute origin-top bg-white text-base float-left p-2 pt-0 list-none text-left rounded-lg shadow-lg w-48 transition-all duration-200 ease-in-out transform scale-0 opacity-0 group-hover:opacity-100 group-hover:scale-100 border ml-3"> <div class="flex flex-wrap max-lg:pl-4 py-2"> <div class="w-full"> <div class="pl-0"> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./#presentation-id">Presentation</a> </div> </div> <div class="w-full"> <div class="pl-0"> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./#admin-id">Admin</a> </div> </div> <div class="w-full"> <div class="pl-0"> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./#e-commerce-id">E-commerce</a> </div> </div> <div class="w-full"> <div class="pl-0"> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./#blog-id">Blog</a> </div> </div> <div class="w-full"> <div class="pl-0"> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./#authentication-id">Authentication</a> </div> </div> <div class="w-full"> <div class="pl-0"> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./#misc-id">Misc</a> </div> </div> <div class="w-full"> <div class="pl-0"> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./#error-id">Error</a> </div> </div> </div> </div> </div> </li> <li> <div class="inline-block group"> <a class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-200 ease-in-out text-blueGray-800" href="javascript:;">Example Pages <i class="ml-1 fas fa-caret-down"></i> </a> <div class=" block absolute origin-top bg-white text-base p-2 pt-0 list-none text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-0 opacity-0 group-hover:opacity-100 group-hover:scale-100 border ml-3"> <div class="flex flex-wrap max-lg:pl-4"> <div class="w-full"> <div class="pl-0"> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./example/chat/chat.html">Chat</a> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./example/checkout/checkout.html">Checkout</a> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./example/e-commerce/e-commerce.html">E-Commerce</a> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./example/invoice/invoice.html">Invoice</a> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./example/pricing/pricing.html">Pricing</a> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./example/product/product.html">Product</a> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./example/profile/profile.html">Profile </a> <a class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100" href="./example/settings/settings.html">Settings </a> </div> </div> </div> </div> </div> </li> </ul> <ul class="flex flex-row list-none lg:ml-auto lg:items-center"> <li> <a class="text-blueGray-800 hover:text-blueGray-600 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="javascript:;"><i class="text-blueGray-500 lg:text-white fab fa-facebook text-lg leading-lg "></i><span class="lg:hidden inline-block ml-2">Share</span></a> </li> <li> <a class="text-blueGray-800 hover:text-blueGray-600 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="javascript:;"><i class="text-blueGray-500 lg:text-white fab fa-twitter text-lg leading-lg "></i><span class="lg:hidden inline-block ml-2">Tweet</span></a> </li> <li> <a class="text-blueGray-800 hover:text-blueGray-600 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="javascript:;"><i class="text-blueGray-500 lg:text-white fab fa-github text-lg leading-lg "></i><span class="lg:hidden inline-block ml-2">Star</span></a> </li> </ul> <ul class="flex flex-row list-none lg:ml-auto lg:items-center"> <li> <a href="https://www.creative-tim.com/product/notus-js" class="text-xs mx-2 px-4 py-2 shadow hover:shadow-md text-white bg-blueGray-800 border-blueGray-800 active:bg-blueGray-900 active:border-blueGray-900 rounded outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold mr-2">Check FREE</a> </li> <li> <a href="https://www.creative-tim.com/product/notus-design-system-pro" class="text-xs mx-2 px-4 py-2 shadow hover:shadow-md text-blueGray-800 bg-blueGray-100 border-blueGray-100 active:bg-blueGray-300 active:border-blueGray-300 rounded outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold">Buy PRO</a> </li> </ul> </div> </div> </nav>  <div class="p-0 flex items-center overflow-hidden relative min-h-screen-75"> <div class="absolute w-full bg-cover h-full z-2 opacity-60" style="background-image: url('./assets/img/gradient-blue.jpeg');"></div> <div class="absolute w-full h-full bg-blueGray-900 z-1"></div> <div class="container mx-auto px-4 z-3 pt-12 relative lg:w-6/12"> <div class="justify-center flex flex-wrap flex-col -mx-4 text-center"> <h1 class="text-5xl font-bold text-white leading-tight mt-0">Notus Design System PRO</h1> <h2 class="text-2xl text-white mb-24">Admin Dashboard & Design System for Tailwind CSS</h2> </div> </div> <div class="w-full absolute text-white bottom-0 z-3"> <div class="w-full pointer-events-none overflow-hidden h-70-px" style="transform: translateZ(0px);"> <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-50 fill-current" points="2560 0 2560 100 0 100"></polygon> </svg> </div> </div> </div> <div class="bg-blueGray-50"> <div class="container mx-auto px-4 z-3 -mt-64 pt-20 relative w-8/12"> <div class="justify-center flex flex-wrap -mx-4"> <div class="bg-white rounded-xl shadow-lg py-8"> <div class="flex flex-wrap"> <div class="px-6 relative w-full lg:w-4/12 w-full md:w-6/12 w-6/12 border-r"> <div class="text-center py-2"> <h4 class="text-5xl font-extrabold leading-tight mt-0 mb-0">300+</h4> <h5 class="text-xl font-semibold mt-2 mb-1">Elements</h5> <p class="text-blueGray-500 text-md">From buttons, to inputs, navbars, alerts or cards, you are covered</p> </div> </div> <div class="px-6 relative w-full lg:w-4/12 w-full md:w-6/12 w-6/12 border-r"> <div class="text-center py-2"> <h4 class="text-5xl font-extrabold leading-tight mt-0 mb-0">74+</h4> <h5 class="text-xl font-semibold mt-2 mb-1">Design Blocks</h5> <p class="text-blueGray-500 text-md">Mix the sections, change the colors and unleash your creativity</p> </div> </div> <div class="px-6 relative w-full lg:w-4/12 w-full md:w-6/12 w-6/12"> <div class="text-center py-2"> <h4 class="text-5xl font-extrabold leading-tight mt-0 mb-0">30+</h4> <h5 class="text-xl font-semibold mt-2 mb-1">Coded Pages</h5> <p class="text-blueGray-500 text-md">Save 3-4 weeks of work when you use our pre-made pages for your website</p> </div> </div> </div> </div> </div> </div> </div> <section class="relative pb-20 bg-blueGray-50"> <div class="container mx-auto px-4 pt-20"> <div class="w-full md:w-8/12 mx-auto"> <div class="flex flex-wrap -mx-4 justify-center"> <div class="px-4 relative w-full text-center"> <span class="text-lightBlue-500 bg-lightBlue-200 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded px-2">Fully Coded</span> <h2 class="text-4xl font-bold mt-3 mb-1 text-blueGray-700">Speed up your development</h2> <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">Using Notus Design System PRO you can build Admin Dashboards for your next CMS, ERP, CRM or you can build the presentation pages for your business.</p> </div> </div> </div> <div class="items-center flex flex-wrap mt-20"> <div class="w-full md:w-5/12 ml-auto mr-auto px-4 relative"><img alt="..." class="max-w-full rounded-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/devices.17104c1a.jpg"></div> <div class="w-full md:w-5/12 ml-auto mr-auto px-4"> <div class="md:pr-12"> <div class="text-lightBlue-500 bg-lightBlue-200 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full"><i class="fas fa-rocket text-xl"></i></div> <h3 class="text-3xl font-semibold">Admin Dashboard & UI Kit</h3> <p class="mt-4 text-lg leading-relaxed text-blueGray-500">The extension comes with three pre-built pages to help you get started faster. 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-lightBlue-500 bg-lightBlue-200 text-xs font-semibold inline-block w-8 h-8 flex items-center justify-center uppercase rounded-full mr-3"><i class="fas fa-fingerprint"></i></span></div> <div> <h4 class="text-blueGray-500">Carefully crafted components</h4> </div> </div> </li> <li class="py-2"> <div class="flex items-center"> <div><span class="text-lightBlue-500 bg-lightBlue-200 text-xs font-semibold inline-block w-8 h-8 flex items-center justify-center uppercase rounded-full mr-3"><i class="fas fa-pager"></i></span></div> <div> <h4 class="text-blueGray-500">Amazing page examples</h4> </div> </div> </li> <li class="py-2"> <div class="flex items-center"> <div><span class="text-lightBlue-500 bg-lightBlue-200 text-xs font-semibold inline-block w-8 h-8 flex items-center justify-center uppercase rounded-full mr-3"><i class="far fa-paper-plane"></i></span></div> <div> <h4 class="text-blueGray-500">Dynamic components</h4> </div> </div> </li> </ul> </div> </div> </div> </div> <div class="w-full absolute text-white bottom-0 z-3 opacity-0"> <div class="w-full pointer-events-none overflow-hidden h-70-px" style="transform: translateZ(0px);"> <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-white fill-current" points="2560 0 2560 100 0 100"></polygon> </svg> </div> </div> </section> <div class="w-full absolute text-white bottom-0 z-3 opacity-0"> <div class="w-full pointer-events-none overflow-hidden h-70-px" style="transform: translateZ(0px);"> <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-white fill-current" points="2560 0 2560 100 0 100"></polygon> </svg> </div> </div>  <div class="relative bg-blueGray-50"> <div class="container mx-auto px-4 pt-20"> <section> <h2 class="px-4 text-3xl font-bold leading-tight mt-8 mb-2" id="presentation-id">Presentation</h2> <p class="px-4 w-full lg:w-7/12 text-lg text-blueGray-500 leading-relaxed mt-2 mb-4">A presentation page is defined as a page built to display information, for example information about the business, its employees, customers etc.</p> <div> <hr class="my-6 border-blueGray-200"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <h2 id="presentation-id-components" class="text-lg font-normal text-blueGray-600 mb-2 sticky top-0"><span class="mr-2 opacity-75">Presentation</span><i class="fas fa-angle-right mr-2 opacity-75"></i><span class="font-semibold">Components</span></h2> </div> <div class="w-full px-4 md:w-3/4"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <a href="./presentation/components/cards.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/presentation-components-cards.f3bf92e7.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Cards</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">9 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./presentation/components/footer.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/presentation-components-footers.c345423f.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Footers</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">2 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./presentation/components/header.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/presentation-components-headers.2b8bc538.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Headers</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">3 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./presentation/components/info-area.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/presentation-components-infoareas.fd41ca9d.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">InfoAreas</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">6 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./presentation/components/map.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/presentation-components-maps.5f46e219.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Maps</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./presentation/components/media.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/presentation-components-mediaplayer.5c980280.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Media Player</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./presentation/components/navbar.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/presentation-components-navbars.4337c703.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Navbars</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">2 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./presentation/components/pre-footer.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/presentation-components-prefooters.83d5e4cc.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">PreFooters</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> </div> </div> <div> <hr class="my-6 border-blueGray-200"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <h2 id="presentation-id-sections" class="text-lg font-normal text-blueGray-600 mb-2 sticky top-0"><span class="mr-2 opacity-75">Presentation</span><i class="fas fa-angle-right mr-2 opacity-75"></i><span class="font-semibold">Sections</span></h2> </div> <div class="w-full px-4 md:w-3/4"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <a href="./presentation/sections/blogs.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/presentation-sections-blogs.97981bbc.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Blogs</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">2 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./presentation/sections/contact.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/presentation-sections-contact.80bda13f.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Contact</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">3 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./presentation/sections/hero.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/presentation-sections-hero.11f75702.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Hero</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">5 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./presentation/sections/pricing.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/presentation-sections-pricing.e6431b14.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Pricing</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./presentation/sections/teams.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/presentation-sections-teams.fb930d45.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Teams</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">2 components/examples</p> </a> </div> </div> </div> </div> </div> <div> <hr class="my-6 border-blueGray-200"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <h2 id="presentation-id-pages" class="text-lg font-normal text-blueGray-600 mb-2 sticky top-0"><span class="mr-2 opacity-75">Presentation</span><i class="fas fa-angle-right mr-2 opacity-75"></i><span class="font-semibold">Pages</span></h2> </div> <div class="w-full px-4 md:w-3/4"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <a href="./presentation/pages/landing.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/presentation-pages-landing.129307ec.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Landing</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">2 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./presentation/pages/about-us.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/presentation-pages-about-us.7df8110e.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">About us</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./presentation/pages/contact-us.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/presentation-pages-contact-us.7536e7d3.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Contact us</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div> <div class="relative bg-blueGray-50"> <div class="container mx-auto px-4 pt-20"> <section> <h2 class="px-4 text-3xl font-bold leading-tight mt-8 mb-2" id="admin-id">Admin</h2> <p class="px-4 w-full lg:w-7/12 text-lg text-blueGray-500 leading-relaxed mt-2 mb-4">In short, the admin panel is where the content is created and the website is managed. This is the key to how a content management system (CMS) works.</p> <div> <hr class="my-6 border-blueGray-200"> <div class="flex flex-wrap"> <div> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <h2 id="admin-id-components" class="text-lg font-normal text-blueGray-600 mb-2 sticky top-0"> <span class="mr-2 opacity-75">Admin</span> <i class="fas fa-angle-right mr-2 opacity-75"></i> <span class="font-semibold">Components</span> </h2> </div> <div class="w-full px-4 md:w-3/4"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <a href="./admin/components/cards.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/admin-components-cards.21611e9a.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Cards</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">5 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./admin/components/footers.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/admin-components-footers.9df2c183.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Footers</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./admin/components/headers.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/admin-components-headers.1321ed87.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Headers</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">2 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./admin/components/navbars.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/admin-components-navbar.a813e646.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Navbars</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./admin/components/sidebars.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/admin-components-sidebar.c500ce2f.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Sidebars</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> </div> </div> </div> </div> </div> <div> <hr class="my-6 border-blueGray-200"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <h2 id="admin-id-pages" class="text-lg font-normal text-blueGray-600 mb-2 sticky top-0"><span class="mr-2 opacity-75">Admin</span><i class="fas fa-angle-right mr-2 opacity-75"></i><span class="font-semibold">Pages</span></h2> </div> <div class="w-full px-4 md:w-3/4"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <a href="./admin/pages/dashboards.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/admin-pages-dashboard.f9419d24.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Dashboards</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./admin/pages/maps.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/admin-pages-maps.0b376b30.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Maps</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./admin/pages/settings.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/admin-pages-settings.856c71eb.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Settings</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./admin/pages/tables.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/admin-pages-tables.fcfa8b93.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Tables</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./admin/pages/layouts.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/admin-pages-layout.13a42358.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Layouts</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">2 components/examples</p> </a> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div> <div class="relative bg-blueGray-50"> <div class="container mx-auto px-4 pt-20"> <section> <h2 class="px-4 text-3xl font-bold leading-tight mt-8 mb-2" id="e-commerce-id">E-commerce</h2> <p class="px-4 w-full lg:w-7/12 text-lg text-blueGray-500 leading-relaxed mt-2 mb-4">E-commerce (electronic commerce) is the activity of electronically buying or selling of products on online services or over the Internet.</p> <div> <hr class="my-6 border-blueGray-200"> <div class="flex flex-wrap"> <div> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <h2 id="e-commerce-id-components" class="text-lg font-normal text-blueGray-600 mb-2 sticky top-0"><span class="mr-2 opacity-75">E-commerce</span><i class="fas fa-angle-right mr-2 opacity-75"></i><span class="font-semibold">Components</span></h2> </div> <div class="w-full px-4 md:w-3/4"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <a href="./ecommerce/components/cards.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/ecommerce-components-cards.17279ed2.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Cards</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">16 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./ecommerce/components/headers.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/ecommerce-components-headers.81793222.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Headers</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">4 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./ecommerce/components/media.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/ecommerce-components-mediaplayers.6222ab56.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Media Players</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">3 components/examples</p> </a> </div> </div> </div> </div> </div> <div> <hr class="my-6 border-blueGray-200"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <h2 id="e-commerce-id-sections" class="text-lg font-normal text-blueGray-600 mb-2 sticky top-0"><span class="mr-2 opacity-75">E-commerce</span><i class="fas fa-angle-right mr-2 opacity-75"></i><span class="font-semibold">Sections</span></h2> </div> <div class="w-full px-4 md:w-3/4"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <a href="./ecommerce/sections/blogs.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/ecommerce-sections-blogs.3c973efb.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Blogs</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./ecommerce/sections/hero.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/ecommerce-sections-hero.bc100edf.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Hero</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">2 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./ecommerce/sections/pricing.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/ecommerce-sections-pricing.2b912e6f.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Pricing</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">2 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./ecommerce/sections/product.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/ecommerce-sections-product.609876c7.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Product</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./ecommerce/sections/project.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/ecommerce-sections-projects.4d7af2ba.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Projects</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./ecommerce/sections/testimonials"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/ecommerce-sections-testimonials.6fa30e52.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Testimonials</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">2 components/examples</p> </a> </div> </div> </div> </div> </div> <div> <hr class="my-6 border-blueGray-200"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <h2 id="e-commerce-id-pages" class="text-lg font-normal text-blueGray-600 mb-2 sticky top-0"><span class="mr-2 opacity-75">E-commerce</span><i class="fas fa-angle-right mr-2 opacity-75"></i><span class="font-semibold">Pages</span></h2> </div> <div class="w-full px-4 md:w-3/4"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <a href="./ecommerce/pages/chat.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/ecommerce-pages-chat.9abee46d.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Chat</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./ecommerce/pages/checkout.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/ecommerce-pages-checkout.79584bbf.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Checkout</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./ecommerce/pages/e-commerce.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/ecommerce-pages-ecommerce.0b67b766.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">E-Commerce</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./ecommerce/pages/invoice.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/ecommerce-pages-invoice.e4f02485.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Invoice</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./ecommerce/pages/pricing.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/ecommerce-pages-pricing.4f5da76b.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Pricing</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./ecommerce/pages/product.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/ecommerce-pages-product.e82d062c.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Product</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./ecommerce/pages/profile.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/ecommerce-pages-profile.e8c49e4a.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Profile</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div> <div class="relative bg-blueGray-50"> <div class="container mx-auto px-4 pt-20"> <section> <h2 class="px-4 text-3xl font-bold leading-tight mt-8 mb-2" id="blog-id">Blog</h2> <p class="px-4 w-full lg:w-7/12 text-lg text-blueGray-500 leading-relaxed mt-2 mb-4">A blog is a discussion or informational website published on the World Wide Web consisting of discrete, often informal diary-style text entries. </p> <div> <hr class="my-6 border-blueGray-200"> <div class="flex flex-wrap"> <div> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <h2 id="blogs-id-components" class="text-lg font-normal text-blueGray-600 mb-2 sticky top-0"><span class="mr-2 opacity-75">Blog</span><i class="fas fa-angle-right mr-2 opacity-75"></i><span class="font-semibold">Components</span></h2> </div> <div class="w-full px-4 md:w-3/4"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <a href="./blog/components/cards.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/blog-components-cards.2006d12b.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Cards</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">5 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./blog/components/headers.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/blog-components-headers.8a49634f.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Headers</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">2 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./blog/components/media.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/blog-components-mediaplayers.fc3415e9.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Media Players</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./blog/components/prefooter.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/blog-components-prefooters.e3893b5e.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">PreFooters</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> </div> </div> </div> </div> <div> <hr class="my-6 border-blueGray-200"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <h2 id="blogs-id-sections" class="text-lg font-normal text-blueGray-600 mb-2 sticky top-0"><span class="mr-2 opacity-75">Blog</span><i class="fas fa-angle-right mr-2 opacity-75"></i><span class="font-semibold">Sections</span></h2> </div> <div class="w-full px-4 md:w-3/4"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <a href="./blog/sections/blog.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/blog-sections-blogs.62ea292e.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Blogs</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">4 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./blog/sections/hero.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/blog-sections-heroes.f28f07c2.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Heroes</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">2 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./blog/sections/teams.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/blog-sections-teams.45744d35.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Teams</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> </div> </div> </div> </div> <div class="w-full"> <hr class="my-6 border-blueGray-200"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <h2 id="blogs-id-pages" class="text-lg font-normal text-blueGray-600 mb-2 sticky top-0"> <span class="mr-2 opacity-75">Blog</span> <i class="fas fa-angle-right mr-2 opacity-75"></i> <span class="font-semibold">Pages</span> </h2> </div> <div class="w-full px-4 md:w-3/4"> <div class="flex flex-wrap"> <div class="px-4 md:w-1/4"> <a href="./blog/pages/blog.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/blog-pages-blogs.b08870a3.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Blogs</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">2 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div> <div class="relative bg-blueGray-50"> <div class="container mx-auto px-4 pt-20"> <section> <h2 class="px-4 text-3xl font-bold leading-tight mt-8 mb-2" id="authentication-id">Authentication</h2> <p class="px-4 w-full lg:w-7/12 text-lg text-blueGray-500 leading-relaxed mt-2 mb-4">Authentication is the act of proving an assertion, such as the identity of a computer system user.</p> <div> <hr class="my-6 border-blueGray-200"> <div class="flex flex-wrap"> <div> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <h2 id="authentication-id-components" class="text-lg font-normal text-blueGray-600 mb-2 sticky top-0"><span class="mr-2 opacity-75">Authentication</span><i class="fas fa-angle-right mr-2 opacity-75"></i><span class="font-semibold">Components</span></h2> </div> <div class="w-full px-4 md:w-3/4"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <a href="./auth/components/cards.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/authentication-components-cards.52e31fcb.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Cards</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">4 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./auth/components/footer.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/authentication-components-footers.7d6f5504.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Footers</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./auth/components/headers.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/authentication-components-headers.04a331dc.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Headers</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> </div> </div> </div> </div> <div> <hr class="my-6 border-blueGray-200"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <h2 id="authentication-id-pages" class="text-lg font-normal text-blueGray-600 mb-2 sticky top-0"><span class="mr-2 opacity-75">Authentication</span><i class="fas fa-angle-right mr-2 opacity-75"></i><span class="font-semibold">Pages</span></h2> </div> <div class="w-full px-4 md:w-3/4"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <a href="./auth/pages/layouts.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/authentication-pages-layouts.19796d44.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Layouts</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">4 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./auth/pages/login.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/authentication-pages-login.d5d8fc6a.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Login</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">2 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./auth/pages/register.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/authentication-pages-register.9f8ca147.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Register</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">2 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./auth/pages/reset.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/authentication-pages-reset.6bdcac2a.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Reset</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div> <div class="relative bg-blueGray-50"> <div class="container mx-auto px-4 pt-20"> <section> <h2 class="px-4 text-3xl font-bold leading-tight mt-8 mb-2" id="misc-id">Misc</h2> <p class="px-4 w-full lg:w-7/12 text-lg text-blueGray-500 leading-relaxed mt-2 mb-4">Components consisting of a mixture of various things that are not usually connected with each other.</p> <div> <hr class="my-6 border-blueGray-200"> <div class="flex flex-wrap"> <div> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <h2 id="misc-id-building-blocks" class="text-lg font-normal text-blueGray-600 mb-2 sticky top-0"><span class="mr-2 opacity-75">Misc</span><i class="fas fa-angle-right mr-2 opacity-75"></i><span class="font-semibold">Building Blocks</span></h2> </div> <div class="w-full px-4 md:w-3/4"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <a href="./misc/blocks/card.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-buildingblocks-cards.2235f540.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Cards</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">5 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/blocks/navbar.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-buildingblocks-navbars.35f15913.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Navbars</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">9 components/examples</p> </a> </div> </div> </div> </div> </div> <div> <hr class="my-6 border-blueGray-200"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <h2 id="misc-id-components" class="text-lg font-normal text-blueGray-600 mb-2 sticky top-0"><span class="mr-2 opacity-75">Misc</span><i class="fas fa-angle-right mr-2 opacity-75"></i><span class="font-semibold">Components</span></h2> </div> <div class="w-full px-4 md:w-3/4"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <a href="./misc/components/accordions.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-components-accordions.01923ede.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Accordions</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/components/alert.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-components-alerts.d9cfaac1.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Alerts</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/components/badges.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-components-badges.3691fca7.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Badges</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">2 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/components/buttons.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-components-buttons.9b66f43b.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Buttons</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">12 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/components/social.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-components-socialbuttons.84fc3129.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Social Buttons</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">12 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/components/cards.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-components-cards.b84be9f8.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Cards</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">14 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/components/comments.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-components-comments.bbfa5960.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Comments</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">5 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/components/dropdowns.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-components-dropdowns.3eea12c4.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Dropdowns</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">3 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/components/input.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-components-inputs.742476b1.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Inputs</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">20 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/components/forms.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-components-forms.d18d313b.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Forms</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">9 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/components/headers.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-components-headers.10765547.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Headers</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">2 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/components/headings.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-components-headings.58afd96b.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Headings</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">4 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/components/images.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-components-images.715080cc.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Images</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">3 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/components/info.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-components-infoareas.a424b661.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Info Areas</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">2 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/components/media.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-components-mediaplayers.a4f75738.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Media Players</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/components/pagination.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-components-pagination.e6ba72f3.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Pagination</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/components/ratings.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-components-ratings.80c3837f.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Ratings</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/components/skews.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-components-skew.bf14f30c.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Skews</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> </div> </div> </div> </div> <div> <hr class="my-6 border-blueGray-200"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <h2 id="misc-id-sections" class="text-lg font-normal text-blueGray-600 mb-2 sticky top-0"><span class="mr-2 opacity-75">Misc</span><i class="fas fa-angle-right mr-2 opacity-75"></i><span class="font-semibold">Sections</span></h2> </div> <div class="w-full px-4 md:w-3/4"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <a href="./misc/sections/blogs.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-sections-blogs.6c1161a4.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Blogs</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">2 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/sections/contact.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-sections-contactus.622ebc1f.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">ContactUs</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">3 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/sections/faq.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-sections-faq.85024b75.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">FAQ</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/sections/feature.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-sections-features.91a3451d.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Features</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">5 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/sections/pricing.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-sections-pricing.037af77d.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Pricing</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">5 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/sections/project.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-sections-projects.0d581bee.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Projects</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">2 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/sections/team.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-sections-teams.33769360.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Teams</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">3 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./misc/sections/testimonials.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/misc-sections-testimonials.2c90f3f0.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Testimonials</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">1 component/example</p> </a> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div> <div class="relative bg-blueGray-50"> <div class="container mx-auto px-4 pt-20"> <section> <h2 class="px-4 text-3xl font-bold leading-tight mt-8 mb-2" id="error-id">Error</h2> <p class="px-4 w-full lg:w-7/12 text-lg text-blueGray-500 leading-relaxed mt-2 mb-4">Sometimes when you try to visit a web page, you're met with an HTTP error message. It's a message from the web server that something went wrong. In some cases it could be a mistake you made, but often, it's the site's fault.</p> <div> <hr class="my-6 border-blueGray-200"> <div class="flex flex-wrap"> <div> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <h2 id="error-id-examples" class="text-lg font-normal text-blueGray-600 mb-2 sticky top-0"><span class="mr-2 opacity-75">Error</span><i class="fas fa-angle-right mr-2 opacity-75"></i><span class="font-semibold">Examples</span></h2> </div> <div class="w-full px-4 md:w-3/4"> <div class="flex flex-wrap"> <div class="w-full px-4 md:w-1/4"> <a href="./error/sections.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/error-examples-sections.8c0f0092.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Sections</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">2 components/examples</p> </a> </div> <div class="w-full px-4 md:w-1/4"> <a href="./error/pages.html"> <img class="w-full rounded-lg shadow-md mb-3 transform transition duration-200 ease-out hover:scale-105 hover:shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/error-examples-pages.a1113743.jpg" alt="..."> <h2 class="ml-2 text-base font-medium leading-normal mt-0 mb-0 text-blueGray-700">Pages</h2> <p class=" ml-2 text-base font-normal leading-tight mt-0 mb-8 text-blueGray-500">2 components/examples</p> </a> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div> <script src="./assets/js/popper.js"></script> <script src="./assets/js/plugins/chart.min.js"></script>  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script> <script src="./assets/js/map.js"></script> <script src="./assets/js/notus.js"></script> </div> </body> <footer class="relative pt-8 pb-6 mt-8"> <div class="container mx-auto px-4"> <div class="flex flex-wrap"> <div class="w-full md:w-6/12 px-4"> <h4 class="text-xl leading-normal font-bold">Let's keep in touch!</h4> <h5 class="leading-normal mt-1 mb-2 text-blueGray-500">Find us on any of these platforms, we respond within 1-2 business days.</h5> <div class="mt-6"> <a href="https://www.twitter.com/creativetim" target="_blank"> <i class="fab fa-twitter bg-white text-twitter-regular shadow-lg font-lg p-3 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 inline-block text-center"></i> </a> <a href="https://www.facebook.com/creativetim" target="_blank"> <i class="fab fa-facebook-square bg-white text-facebook-regular shadow-lg font-lg p-3 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 inline-block text-center"> </i> </a> <a href="https://www.dribbble.com/creativetim" target="_blank"> <i class="fab fa-dribbble bg-white text-dribbble-regular shadow-lg font-lg p-3 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 inline-block text-center"></i> </a> <a href="https://www.github.com/creativetimofficial" target="_blank"> <i class="fab fa-github bg-white text-github-regular shadow-lg font-lg p-3 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 inline-block text-center"></i> </a> </div> </div> <div class="w-full md:w-6/12 px-4"> <div class="flex flex-wrap items-top mb-6"> <div class="w-full md:w-6/12 xl:w-4/12 pt-6 md:pt-0 md:px-4 ml-auto"> <span class="block uppercase text-xs font-bold mb-2">Useful Links</span> <ul class="list-unstyled"> <li> <a class="text-blueGray-500 hover:text-blueGray-700 block pb-2 text-sm" href="https://www.creative-tim.com/presentation" target="_blank">About Us</a> </li> <li> <a class="text-blueGray-500 hover:text-blueGray-700 block pb-2 text-sm" href="https://creative-tim.com/blog" target="_blank">Blog</a> </li> <li> <a class="text-blueGray-500 hover:text-blueGray-700 block pb-2 text-sm" href="https://www.github.com/creativetimofficial/tailwind-starter-kit" target="_blank">Github</a> </li> <li> <a class="text-blueGray-500 hover:text-blueGray-700 block pb-2 text-sm" href="https://www.creative-tim.com/bootstrap-themes/free" target="_blank">Free Products</a> </li> </ul> </div> <div class="w-full md:w-6/12 xl:w-4/12 pt-6 md:pt-0 md:px-4 ml-auto"> <span class="block uppercase text-xs font-bold mb-2">Other Resources</span> <ul class="list-unstyled"> <li><a class="text-blueGray-500 hover:text-blueGray-700 block pb-2 text-sm" href="https://www.creative-tim.com/license" target="_blank">License</a></li> <li><a class="text-blueGray-500 hover:text-blueGray-700 block pb-2 text-sm" href="https://creative-tim.com/terms" target="_blank">Terms & Conditions</a></li> <li><a class="text-blueGray-500 hover:text-blueGray-700 block pb-2 text-sm" href="https://creative-tim.com/privacy" target="_blank">Privacy Policy</a></li> <li><a class="text-blueGray-500 hover:text-blueGray-700 block pb-2 text-sm" href="https://creative-tim.com/contact-us" target="_blank">Contact Us</a></li> </ul> </div> </div> </div> </div> <hr class="my-6 border-blueGray-200"> <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 py-1">Copyright 漏 2021 <a href="https://www.creative-tim.com" class="text-blueGray-500 hover:text-blueGray-600 font-semibold" target="_blank">Creative Tim</a> . All rights reserved. </div> </div> </div> </div> </footer> </html>

CINXE.COM

Notus Design System PRO by Creative Tim | Premium UI Kit and Admin for Tailwind CSS