CINXE.COM
Creative Tim's Blog - Fully coded design resources for web developers
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Creative Tim's Blog - Fully coded design resources for web developers</title> <link rel="stylesheet" href="/blog/assets/built/screen.css?v=bc77caee98"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Muli:400,400i,700,700i,800"> <!-- Font Awesome Icons --> <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script> <script> if (localStorage.getItem('alto_dark') == 'true') { document.documentElement.classList.add('dark-mode'); } </script> <script> var ghosthunter_key = ''; ghost_root_url = ""; if (document.URL.includes('creative-tim.com')) { ghost_root_url = "/blog/ghost/api/v4"; ghosthunter_key = 'b431b45a35fd006e8befdf8855'; } else { ghost_root_url = "/blog/ghost/api/v4"; ghosthunter_key = '1c87ec6f195f4f728fc5e5d522'; } </script> <script> var gh_white_logo = 'https://s3.amazonaws.com/creativetim_bucket/static-assets/logo-ct-blog-white.png'; </script> <!-- Anti-flicker snippet (recommended) --> <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> <!-- Analytics-Optimize Snippet --> <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> <!-- end Analytics-Optimize Snippet --> <!-- Google Tag Manager --> <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> <!-- End Google Tag Manager --> <meta name="description" content="Fully coded design resources for web developers." /> <link rel="icon" href="/blog/favicon.png" type="image/png" /> <link rel="canonical" href="https://www.creative-tim.com/blog/" /> <meta name="referrer" content="no-referrer-when-downgrade" /> <link rel="next" href="https://www.creative-tim.com/blog/page/2/" /> <meta property="og:site_name" content="Creative Tim's Blog - Fully coded design resources for web developers" /> <meta property="og:type" content="website" /> <meta property="og:title" content="Creative Tim's Blog - Fully coded design resources for web developers" /> <meta property="og:description" content="Fully coded design resources for web developers." /> <meta property="og:url" content="https://www.creative-tim.com/blog/" /> <meta property="og:image" content="https://www.creative-tim.com/blog/content/images/2021/06/metatag-tim-cover-amazon.jpeg" /> <meta property="article:publisher" content="https://www.facebook.com/ghost" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Creative Tim's Blog - Fully coded design resources for web developers" /> <meta name="twitter:description" content="Fully coded design resources for web developers." /> <meta name="twitter:url" content="https://www.creative-tim.com/blog/" /> <meta name="twitter:image" content="https://www.creative-tim.com/blog/content/images/2023/01/cover.jpeg" /> <meta name="twitter:site" content="@ghost" /> <meta property="og:image:width" content="1362" /> <meta property="og:image:height" content="640" /> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebSite", "publisher": { "@type": "Organization", "name": "Creative Tim's Blog - Fully coded design resources for web developers", "url": "https://blogct.creative-tim.com/blog/", "logo": { "@type": "ImageObject", "url": "https://blogct.creative-tim.com/blog/content/images/2022/04/logo-creative-tim-black.png" } }, "url": "https://blogct.creative-tim.com/blog/", "image": { "@type": "ImageObject", "url": "https://blogct.creative-tim.com/blog/content/images/2021/06/metatag-tim-cover-amazon.jpeg", "width": 1362, "height": 640 }, "mainEntityOfPage": { "@type": "WebPage", "@id": "https://blogct.creative-tim.com/blog/" }, "description": "Fully coded design resources for web developers." } </script> <meta name="generator" content="Ghost 4.7" /> <link rel="alternate" type="application/rss+xml" title="Creative Tim's Blog - Fully coded design resources for web developers" href="https://www.creative-tim.com/blog/rss/" /> <style> .kg-image, .aligncenter, .size-large { border-radius: 16px !important; } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism-tomorrow.min.css" integrity="sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXthvkSFWOoGGJgS2CW70VK5dQM5Oh+7ne47s74VTg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-theme-classic" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" /> <link rel="preconnect" href="https://H5FHEK3TTR-dsn.algolia.net" crossorigin /><style>:root {--ghost-accent-color: #00BBFF;}</style> </head> <body class="home-template"> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> <div class="site"> <header class="site-header container" id="navbar"> <div class="navbar"> <div class="navbar-left"> <div class="burger hidden-lg hidden-xl absolute lg:relative right-1"></div> <a class="logo" href="https://www.creative-tim.com/" target="_blank"> <img class="logo-image" src="https://www.creative-tim.com/blog/content/images/2022/04/logo-creative-tim-black.png" alt="Creative Tim"> </a> <div class="sep hidden-xs hidden-sm hidden-sm"></div> <a class="" href="https://www.creative-tim.com/blog"> <span class="logo-text ml-4 md:ml-0 hidden md:block">Blog</span> </a> </div> <div class="navbar-right"> <div id="docsearch" class="w-12 md:w-32 lg:w-44 rounded-sm sm:mr-7 lg:mr-0 ml-0 md:ml-4"></div> <nav class="main-menu hidden-xs hidden-sm hidden-md"> <ul class="nav-list u-plain-list"> <li class="menu-item menu-item-home menu-item-current"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/"> Home </a> </li> <li class="menu-item menu-item-marketplace"> <a class="menu-item-link" href="https://www.creative-tim.com/"> Marketplace </a> </li> <li class="menu-item menu-item-tutorials"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/tutorial/"> Tutorials </a> </li> </ul> </nav> <div class="flex items-center mr-12 sm:mr-8 md:mr-6"> <div class="toggle-track"> <div class="toggle-moon"><i class="icon icon-brightness-2"></i></div> <div class="toggle-sun"><i class="icon icon-white-balance-sunny"></i></div> <div class="toggle-thumb"></div> </div> </div> </div> </div> </header> <div class="container mt-6"> <nav class="mb-8 md:mb-4 hidden md:block md:flex md:overflow-scroll md:items-center md:justify-between nav-secondary"> <ul class="nav-list u-plain-list whitespace-nowrap sm:overflow-auto lg:overflow-hidden pb-4"> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/resources/"> Resources </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/seo/"> SEO </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/startups/"> Startups </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/uiux-design/"> UI/UX Design </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/web-design/"> Web Design </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/web-development/"> Web Development </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/tiktok-learning/"> TikTok Learning </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/educational-tech/"> Educational Tech </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/web-3-0/"> Web 3 </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/crypto-news/"> Crypto News </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/blockchain/"> Blockchain </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/nft/"> NFT </a> </li> </ul> </nav> </div> <div class="container"> <div class="featured-posts carousel owl"> <article class="post tag-educational-tech featured"> <div class="post-media"> <div class="u-placeholder square"> <a class="post-media-tag post-tag-educational-tech" href="https://www.creative-tim.com/blog/educational-tech/" title="Educational Tech">Educational Tech</a> <a class="post-image-link" href="/blog/educational-tech/meet-tight-deadlines-with-an-ai-powered-ui-generator-magic-ai-blocks/"> <img class="post-image lazyload u-object-fit" src="/blog/content/images/size/w750/2024/04/magic-ai-blocks--1-.jpg" alt="Meet Tight Deadlines with Magic AI Blocks"> </a> </div> </div> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/educational-tech/meet-tight-deadlines-with-an-ai-powered-ui-generator-magic-ai-blocks/">Meet Tight Deadlines with Magic AI Blocks</a> </h2> </header> </article> <article class="post tag-educational-ui-ux tag-book featured"> <div class="post-media"> <div class="u-placeholder square"> <a class="post-media-tag post-tag-educational-ui-ux" href="https://www.creative-tim.com/blog/educational-ui-ux/" title="Educational UI/UX">Educational UI/UX</a> <a class="post-image-link" href="/blog/educational-ui-ux/roots-of-ui-ux-design-creative-tims-new-book/"> <img class="post-image lazyload u-object-fit" src="/blog/content/images/size/w750/2024/03/WhatsApp-Image-2023-11-07-at-12.06.41--1---1-.jpeg" alt=""Roots of UI/UX Design" - Creative Tim's New Book [Updated]"> </a> </div> </div> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/educational-ui-ux/roots-of-ui-ux-design-creative-tims-new-book/">"Roots of UI/UX Design" - Creative Tim's New Book [Updated]</a> </h2> </header> </article> <article class="post tag-web-development tag-admin tag-bootstrap tag-dashboard tag-full-stack tag-laravel tag-material tag-nodejs tag-react tag-template tag-themes featured"> <div class="post-media"> <div class="u-placeholder square"> <a class="post-media-tag post-tag-web-development" href="https://www.creative-tim.com/blog/web-development/" title="Web Development">Web Development</a> <a class="post-image-link" href="/blog/web-development/best-free-frontend-backend-templates/"> <img class="post-image lazyload u-object-fit" src="/blog/content/images/size/w750/2023/05/Best-Free-Templates-Frontend---Backend-included.jpg" alt="Best 12 Free Backend + Frontend Templates for 2024"> </a> </div> </div> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/web-development/best-free-frontend-backend-templates/">Best 12 Free Backend + Frontend Templates for 2024</a> </h2> </header> </article> <article class="post tag-educational-tech tag-chatgpt featured"> <div class="post-media"> <div class="u-placeholder square"> <a class="post-media-tag post-tag-educational-tech" href="https://www.creative-tim.com/blog/educational-tech/" title="Educational Tech">Educational Tech</a> <a class="post-image-link" href="/blog/educational-tech/awesome-chatgpt-prompts-for-web-developers/"> <img class="post-image lazyload u-object-fit" src="/blog/content/images/size/w750/2023/04/50--ChatGPT-Promts-for-Web-Developers.jpg" alt="50+ Awesome ChatGPT Prompts for Web Developers"> </a> </div> </div> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/educational-tech/awesome-chatgpt-prompts-for-web-developers/">50+ Awesome ChatGPT Prompts for Web Developers</a> </h2> </header> </article> <article class="post tag-web-development tag-blog-tag tag-jekyll tag-web-design tag-wordpress featured"> <div class="post-media"> <div class="u-placeholder square"> <a class="post-media-tag post-tag-web-development" href="https://www.creative-tim.com/blog/web-development/" title="Web Development">Web Development</a> <a class="post-image-link" href="/blog/web-development/awesome-jekyll-themes-that-you-need-to-try/"> <img class="post-image lazyload u-object-fit" src="/blog/content/images/size/w750/wordpress/2020/07/webdeveloper-working-jpg.jpg" alt="10+ Awesome Jekyll Themes That You Need To Try In 2023"> </a> </div> </div> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/web-development/awesome-jekyll-themes-that-you-need-to-try/">10+ Awesome Jekyll Themes That You Need To Try In 2023</a> </h2> </header> </article> <article class="post tag-web-design featured"> <div class="post-media"> <div class="u-placeholder square"> <a class="post-media-tag post-tag-web-design" href="https://www.creative-tim.com/blog/web-design/" title="web design">web design</a> <a class="post-image-link" href="/blog/web-design/15-free-coming-soon-page/"> <img class="post-image lazyload u-object-fit" src="/blog/content/images/size/w750/2021/07/coming-soon.jpg" alt="10+ Free Website Coming Soon Template Examples"> </a> </div> </div> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/web-design/15-free-coming-soon-page/">10+ Free Website Coming Soon Template Examples</a> </h2> </header> </article> <article class="post tag-creative-tim tag-discord featured"> <div class="post-media"> <div class="u-placeholder square"> <a class="post-media-tag post-tag-creative-tim" href="https://www.creative-tim.com/blog/creative-tim/" title="Creative Tim">Creative Tim</a> <a class="post-image-link" href="/blog/creative-tim/find-us-on-discord/"> <img class="post-image lazyload u-object-fit" src="/blog/content/images/size/w750/2022/02/discord-blog.jpg" alt="Creative Tim is on Discord!"> </a> </div> </div> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/creative-tim/find-us-on-discord/">Creative Tim is on Discord!</a> </h2> </header> </article> <article class="post tag-educational-ui-ux tag-book tag-tutorial tag-web-design featured"> <div class="post-media"> <div class="u-placeholder square"> <a class="post-media-tag post-tag-educational-ui-ux" href="https://www.creative-tim.com/blog/educational-ui-ux/" title="Educational UI/UX">Educational UI/UX</a> <a class="post-image-link" href="/blog/educational-ui-ux/best-web-design-books/"> <img class="post-image lazyload u-object-fit" src="/blog/content/images/size/w750/2022/01/cover-blog.jpg" alt="10+ Best UI/UX Books that Every Designer Should Read [2024]"> </a> </div> </div> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/educational-ui-ux/best-web-design-books/">10+ Best UI/UX Books that Every Designer Should Read [2024]</a> </h2> </header> </article> <article class="post tag-creative-tim tag-educational-ui-ux tag-web-design tag-book featured"> <div class="post-media"> <div class="u-placeholder square"> <a class="post-media-tag post-tag-creative-tim" href="https://www.creative-tim.com/blog/creative-tim/" title="Creative Tim">Creative Tim</a> <a class="post-image-link" href="/blog/creative-tim/book-fundamentals-creating-ui-ux/"> <img class="post-image lazyload u-object-fit" src="/blog/content/images/size/w750/2022/01/cover--3-.jpg" alt="Book Release: Fundamentals of Creating a Great UI/UX by Creative Tim"> </a> </div> </div> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/creative-tim/book-fundamentals-creating-ui-ux/">Book Release: Fundamentals of Creating a Great UI/UX by Creative Tim</a> </h2> </header> </article> <article class="post tag-educational-tech tag-backend tag-web-developer tag-web-developer-skills featured"> <div class="post-media"> <div class="u-placeholder square"> <a class="post-media-tag post-tag-educational-tech" href="https://www.creative-tim.com/blog/educational-tech/" title="Educational Tech">Educational Tech</a> <a class="post-image-link" href="/blog/educational-tech/complete-roadmap-becoming-backend-developer/"> <img class="post-image lazyload u-object-fit" src="/blog/content/images/size/w750/2021/12/how-to-become-backend-developer.jpg" alt="The Complete Roadmap for Becoming a Backend Developer: Step-By-Step Instructions (+Bonus)"> </a> </div> </div> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/educational-tech/complete-roadmap-becoming-backend-developer/">The Complete Roadmap for Becoming a Backend Developer: Step-By-Step Instructions (+Bonus)</a> </h2> </header> </article> </div> </div> <div class="site-content container"> <div class="row "> <div class="content-column col-xl-9 col-lg-9"> <div class="content-area"> <main class="site-main"> <div class="post-feed"> <article class="post tag-educational-ui-ux"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/educational-ui-ux/mastering-ui-patterns-components/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2024/11/ui-patterns.jpg 400w, /blog/content/images/size/w750/2024/11/ui-patterns.jpg 750w, /blog/content/images/size/w960/2024/11/ui-patterns.jpg 960w, /blog/content/images/size/w1140/2024/11/ui-patterns.jpg 1140w, /blog/content/images/size/w1920/2024/11/ui-patterns.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2024/11/ui-patterns.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Mastering UI Patterns: Essential Components Every Web Designer Should Know"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/educational-ui-ux/mastering-ui-patterns-components/">Mastering UI Patterns: Essential Components Every Web Designer Should Know</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-educational-ui-ux" href="https://www.creative-tim.com/blog/educational-ui-ux/" title="Educational UI/UX">Educational UI/UX</a> </span> <span class="post-meta-item post-meta-length"> 8 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-11-18"> 6 days ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-11-18"> 6 days ago </time> </span> </div> </header> <div class="post-excerpt"> Designing an interface that’s both user-friendly and visually appealing can feel like a balancing act. If you’ve ever felt like something’s just off with your design, it might be time <a class="post-link primary" href="/blog/educational-ui-ux/mastering-ui-patterns-components/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/guest-post/"> <img class="post-author-image" src="https://0.gravatar.com/avatar/986c1a4a96c44a3017304d6936f37609?s=512&d=monsterid&r=g" alt="Guest Post"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/guest-post/">Guest Post</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/educational-ui-ux/mastering-ui-patterns-components/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-educational-tech"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/educational-tech/the-new-material-tailwind-rebuilt/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2024/11/ph-1.jpg 400w, /blog/content/images/size/w750/2024/11/ph-1.jpg 750w, /blog/content/images/size/w960/2024/11/ph-1.jpg 960w, /blog/content/images/size/w1140/2024/11/ph-1.jpg 1140w, /blog/content/images/size/w1920/2024/11/ph-1.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2024/11/ph-1.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Build and Ship Production-Ready UIs with the New Material Tailwind – Rebuilt & Refined"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/educational-tech/the-new-material-tailwind-rebuilt/">Build and Ship Production-Ready UIs with the New Material Tailwind – Rebuilt & Refined</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-educational-tech" href="https://www.creative-tim.com/blog/educational-tech/" title="Educational Tech">Educational Tech</a> </span> <span class="post-meta-item post-meta-length"> 4 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-11-06"> 18 days ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-11-06"> 18 days ago </time> </span> </div> </header> <div class="post-excerpt"> Web development just got a major upgrade. With Material Tailwind V3, we’re thrilled to upgrade the UI building where creating beautiful, functional interfaces is faster, smarter, and more enjoyable. Rebuilt from the <a class="post-link primary" href="/blog/educational-tech/the-new-material-tailwind-rebuilt/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/alexandra-murtaza/"> <img class="post-author-image" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" alt="Alexandra Murtaza"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/alexandra-murtaza/">Alexandra Murtaza</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/educational-tech/the-new-material-tailwind-rebuilt/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-educational-tech"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/educational-tech/ssl-tls-inspection-critical-for-secure-web-access/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2024/10/ssl.jpg 400w, /blog/content/images/size/w750/2024/10/ssl.jpg 750w, /blog/content/images/size/w960/2024/10/ssl.jpg 960w, /blog/content/images/size/w1140/2024/10/ssl.jpg 1140w, /blog/content/images/size/w1920/2024/10/ssl.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2024/10/ssl.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Why SSL/TLS Inspection is Critical for Secure Web Access"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/educational-tech/ssl-tls-inspection-critical-for-secure-web-access/">Why SSL/TLS Inspection is Critical for Secure Web Access</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-educational-tech" href="https://www.creative-tim.com/blog/educational-tech/" title="Educational Tech">Educational Tech</a> </span> <span class="post-meta-item post-meta-length"> 6 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-10-30"> 25 days ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-10-30"> 25 days ago </time> </span> </div> </header> <div class="post-excerpt"> If you ever worked on any type of website, you’ve heard you should implement SSL encryption. Furthermore, even if you only browsed the internet, you’ve been likely notified if you’ve <a class="post-link primary" href="/blog/educational-tech/ssl-tls-inspection-critical-for-secure-web-access/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/guest-post/"> <img class="post-author-image" src="https://0.gravatar.com/avatar/986c1a4a96c44a3017304d6936f37609?s=512&d=monsterid&r=g" alt="Guest Post"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/guest-post/">Guest Post</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/educational-tech/ssl-tls-inspection-critical-for-secure-web-access/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-educational-tech"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/educational-tech/mastering-custom-animations-in-web-development/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2024/09/Custom-Animations-In-Web-Development.jpg 400w, /blog/content/images/size/w750/2024/09/Custom-Animations-In-Web-Development.jpg 750w, /blog/content/images/size/w960/2024/09/Custom-Animations-In-Web-Development.jpg 960w, /blog/content/images/size/w1140/2024/09/Custom-Animations-In-Web-Development.jpg 1140w, /blog/content/images/size/w1920/2024/09/Custom-Animations-In-Web-Development.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2024/09/Custom-Animations-In-Web-Development.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Mastering Custom Animations In Web Development (2024)"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/educational-tech/mastering-custom-animations-in-web-development/">Mastering Custom Animations In Web Development (2024)</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-educational-tech" href="https://www.creative-tim.com/blog/educational-tech/" title="Educational Tech">Educational Tech</a> </span> <span class="post-meta-item post-meta-length"> 13 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-10-11"> a month ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-09-19"> 2 months ago </time> </span> </div> </header> <div class="post-excerpt"> With over 200 million active websites worldwide, can you afford to waste the 50 milliseconds to impress your visitors with how good-looking your site is? Well, with custom animations, you don’t have <a class="post-link primary" href="/blog/educational-tech/mastering-custom-animations-in-web-development/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/guest-post/"> <img class="post-author-image" src="https://0.gravatar.com/avatar/986c1a4a96c44a3017304d6936f37609?s=512&d=monsterid&r=g" alt="Guest Post"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/guest-post/">Guest Post</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/educational-tech/mastering-custom-animations-in-web-development/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-educational-ui-ux tag-artificial-intelligence"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/educational-ui-ux/website-chatbot-ui-design-examples/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2024/09/website-chatbot-ui-design.jpg 400w, /blog/content/images/size/w750/2024/09/website-chatbot-ui-design.jpg 750w, /blog/content/images/size/w960/2024/09/website-chatbot-ui-design.jpg 960w, /blog/content/images/size/w1140/2024/09/website-chatbot-ui-design.jpg 1140w, /blog/content/images/size/w1920/2024/09/website-chatbot-ui-design.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2024/09/website-chatbot-ui-design.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="10 Website Chatbot UI Design Examples with Code Included"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/educational-ui-ux/website-chatbot-ui-design-examples/">10 Website Chatbot UI Design Examples with Code Included</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-educational-ui-ux" href="https://www.creative-tim.com/blog/educational-ui-ux/" title="Educational UI/UX">Educational UI/UX</a> </span> <span class="post-meta-item post-meta-length"> 5 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-09-24"> 2 months ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-09-18"> 2 months ago </time> </span> </div> </header> <div class="post-excerpt"> A good chatbot design can make a huge difference in whether users enjoy using it or not. Just like any part of your website, the chatbot’s user interface (UI) needs to be <a class="post-link primary" href="/blog/educational-ui-ux/website-chatbot-ui-design-examples/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/alexandra-murtaza/"> <img class="post-author-image" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" alt="Alexandra Murtaza"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/alexandra-murtaza/">Alexandra Murtaza</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/educational-ui-ux/website-chatbot-ui-design-examples/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-tw-components"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/tw-components/free-tailwind-css-number-inputs/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2024/09/free-tailwind-css-number-inputs-for-your-projects.jpg 400w, /blog/content/images/size/w750/2024/09/free-tailwind-css-number-inputs-for-your-projects.jpg 750w, /blog/content/images/size/w960/2024/09/free-tailwind-css-number-inputs-for-your-projects.jpg 960w, /blog/content/images/size/w1140/2024/09/free-tailwind-css-number-inputs-for-your-projects.jpg 1140w, /blog/content/images/size/w1920/2024/09/free-tailwind-css-number-inputs-for-your-projects.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2024/09/free-tailwind-css-number-inputs-for-your-projects.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="15+ Free Tailwind CSS Number Inputs for your Projects"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/tw-components/free-tailwind-css-number-inputs/">15+ Free Tailwind CSS Number Inputs for your Projects</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-tw-components" href="https://www.creative-tim.com/blog/tw-components/" title="TW Components">TW Components</a> </span> <span class="post-meta-item post-meta-length"> 5 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-09-02"> 3 months ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-09-02"> 3 months ago </time> </span> </div> </header> <div class="post-excerpt"> Tailwind CSS is a popular framework for its utility-first approach, enabling developers to create beautiful, responsive, and highly customizable user interfaces with ease. Number inputs are essential components of any web form, whether <a class="post-link primary" href="/blog/tw-components/free-tailwind-css-number-inputs/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/alexandra-murtaza/"> <img class="post-author-image" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" alt="Alexandra Murtaza"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/alexandra-murtaza/">Alexandra Murtaza</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/tw-components/free-tailwind-css-number-inputs/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-educational-ui-ux"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/educational-ui-ux/chat-app-design-tips-for-developers/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2024/08/chat-app-ui-design.png 400w, /blog/content/images/size/w750/2024/08/chat-app-ui-design.png 750w, /blog/content/images/size/w960/2024/08/chat-app-ui-design.png 960w, /blog/content/images/size/w1140/2024/08/chat-app-ui-design.png 1140w, /blog/content/images/size/w1920/2024/08/chat-app-ui-design.png 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2024/08/chat-app-ui-design.png" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="The Ultimate Chat App Design Guide: 10 Tips for Developers"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/educational-ui-ux/chat-app-design-tips-for-developers/">The Ultimate Chat App Design Guide: 10 Tips for Developers</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-educational-ui-ux" href="https://www.creative-tim.com/blog/educational-ui-ux/" title="Educational UI/UX">Educational UI/UX</a> </span> <span class="post-meta-item post-meta-length"> 8 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-08-14"> 3 months ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-08-14"> 3 months ago </time> </span> </div> </header> <div class="post-excerpt"> In today’s rapidly evolving world of mobile application development, creating a unique chat application goes beyond just incorporating basic features. Business users and consumers expect any mobile communication tool to deliver an <a class="post-link primary" href="/blog/educational-ui-ux/chat-app-design-tips-for-developers/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/guest-post/"> <img class="post-author-image" src="https://0.gravatar.com/avatar/986c1a4a96c44a3017304d6936f37609?s=512&d=monsterid&r=g" alt="Guest Post"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/guest-post/">Guest Post</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/educational-ui-ux/chat-app-design-tips-for-developers/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-educational-tech"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/educational-tech/how-to-leverage-technology-for-efficient-workflows/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2024/08/image2.png 400w, /blog/content/images/size/w750/2024/08/image2.png 750w, /blog/content/images/size/w960/2024/08/image2.png 960w, /blog/content/images/size/w1140/2024/08/image2.png 1140w, /blog/content/images/size/w1920/2024/08/image2.png 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2024/08/image2.png" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="How to Leverage Technology for Efficient Web Development Workflows"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/educational-tech/how-to-leverage-technology-for-efficient-workflows/">How to Leverage Technology for Efficient Web Development Workflows</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-educational-tech" href="https://www.creative-tim.com/blog/educational-tech/" title="Educational Tech">Educational Tech</a> </span> <span class="post-meta-item post-meta-length"> 7 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-08-13"> 3 months ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-08-13"> 3 months ago </time> </span> </div> </header> <div class="post-excerpt"> With the current advancement in technology, efficiency is not a mere slogan. But, it has become a bare necessity for web designers, developers, and tech-experts. The competition is growing as many UI/UX <a class="post-link primary" href="/blog/educational-tech/how-to-leverage-technology-for-efficient-workflows/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/guest-post/"> <img class="post-author-image" src="https://0.gravatar.com/avatar/986c1a4a96c44a3017304d6936f37609?s=512&d=monsterid&r=g" alt="Guest Post"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/guest-post/">Guest Post</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/educational-tech/how-to-leverage-technology-for-efficient-workflows/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-tw-components"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/tw-components/top-free-tailwind-css-search-inputs-for-your-website/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2024/08/9-Top-Free-Tailwind-CSS-Search-Inputs-For-Your-Website.jpg 400w, /blog/content/images/size/w750/2024/08/9-Top-Free-Tailwind-CSS-Search-Inputs-For-Your-Website.jpg 750w, /blog/content/images/size/w960/2024/08/9-Top-Free-Tailwind-CSS-Search-Inputs-For-Your-Website.jpg 960w, /blog/content/images/size/w1140/2024/08/9-Top-Free-Tailwind-CSS-Search-Inputs-For-Your-Website.jpg 1140w, /blog/content/images/size/w1920/2024/08/9-Top-Free-Tailwind-CSS-Search-Inputs-For-Your-Website.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2024/08/9-Top-Free-Tailwind-CSS-Search-Inputs-For-Your-Website.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="9 Top Free Tailwind CSS Search Inputs for your Website"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/tw-components/top-free-tailwind-css-search-inputs-for-your-website/">9 Top Free Tailwind CSS Search Inputs for your Website</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-tw-components" href="https://www.creative-tim.com/blog/tw-components/" title="TW Components">TW Components</a> </span> <span class="post-meta-item post-meta-length"> 3 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-08-13"> 3 months ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-08-09"> 3 months ago </time> </span> </div> </header> <div class="post-excerpt"> This article gathers a collection of versatile inputs that contains a text field for entering a search string. See below our search input examples coded with Tailwind CSS. #1 Tailwind CSS Voice Search <a class="post-link primary" href="/blog/tw-components/top-free-tailwind-css-search-inputs-for-your-website/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/alexandra-murtaza/"> <img class="post-author-image" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" alt="Alexandra Murtaza"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/alexandra-murtaza/">Alexandra Murtaza</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/tw-components/top-free-tailwind-css-search-inputs-for-your-website/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-tw-components"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/tw-components/best-tailwind-css-responsive-menu-examples-to-use-now/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2024/08/6-Best-Tailwind-CSS-Responsive-Menu-Examples-To-Use-Now.jpg 400w, /blog/content/images/size/w750/2024/08/6-Best-Tailwind-CSS-Responsive-Menu-Examples-To-Use-Now.jpg 750w, /blog/content/images/size/w960/2024/08/6-Best-Tailwind-CSS-Responsive-Menu-Examples-To-Use-Now.jpg 960w, /blog/content/images/size/w1140/2024/08/6-Best-Tailwind-CSS-Responsive-Menu-Examples-To-Use-Now.jpg 1140w, /blog/content/images/size/w1920/2024/08/6-Best-Tailwind-CSS-Responsive-Menu-Examples-To-Use-Now.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2024/08/6-Best-Tailwind-CSS-Responsive-Menu-Examples-To-Use-Now.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="6 Best Tailwind CSS Responsive Menu Examples To Use Now"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/tw-components/best-tailwind-css-responsive-menu-examples-to-use-now/">6 Best Tailwind CSS Responsive Menu Examples To Use Now</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-tw-components" href="https://www.creative-tim.com/blog/tw-components/" title="TW Components">TW Components</a> </span> <span class="post-meta-item post-meta-length"> 2 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-08-13"> 3 months ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-08-09"> 3 months ago </time> </span> </div> </header> <div class="post-excerpt"> Knowing how important this navigation component is when creating web projects, we gathered in this article a collection of beautiful menus that are responsive and coded with Tailwind CSS. Beautiful Menus Responsive and <a class="post-link primary" href="/blog/tw-components/best-tailwind-css-responsive-menu-examples-to-use-now/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/alexandra-murtaza/"> <img class="post-author-image" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" alt="Alexandra Murtaza"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/alexandra-murtaza/">Alexandra Murtaza</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/tw-components/best-tailwind-css-responsive-menu-examples-to-use-now/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-tw-components"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/tw-components/how-to-install-tailwindcss-in-laravel-8/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2024/07/How-To-Install-Tailwindcss-In-Laravel-8-.png 400w, /blog/content/images/size/w750/2024/07/How-To-Install-Tailwindcss-In-Laravel-8-.png 750w, /blog/content/images/size/w960/2024/07/How-To-Install-Tailwindcss-In-Laravel-8-.png 960w, /blog/content/images/size/w1140/2024/07/How-To-Install-Tailwindcss-In-Laravel-8-.png 1140w, /blog/content/images/size/w1920/2024/07/How-To-Install-Tailwindcss-In-Laravel-8-.png 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2024/07/How-To-Install-Tailwindcss-In-Laravel-8-.png" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="How to Install Tailwind CSS in Laravel 8"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/tw-components/how-to-install-tailwindcss-in-laravel-8/">How to Install Tailwind CSS in Laravel 8</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-tw-components" href="https://www.creative-tim.com/blog/tw-components/" title="TW Components">TW Components</a> </span> <span class="post-meta-item post-meta-length"> 1 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-08-09"> 3 months ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-08-09"> 3 months ago </time> </span> </div> </header> <div class="post-excerpt"> There are many ways to install Tailwindcss on a fresh Laravel 8 install. You can configure your application by yourself or use a Preset to do it faster. We'll start with the custom <a class="post-link primary" href="/blog/tw-components/how-to-install-tailwindcss-in-laravel-8/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/alexandra-murtaza/"> <img class="post-author-image" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" alt="Alexandra Murtaza"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/alexandra-murtaza/">Alexandra Murtaza</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/tw-components/how-to-install-tailwindcss-in-laravel-8/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-tw-components"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/tw-components/free-tailwind-css-contact-form-examples-for-your-web-app/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2024/07/7-Free-Tailwind-CSS-Contact-Form-Examples-For-Your-Web-App.png 400w, /blog/content/images/size/w750/2024/07/7-Free-Tailwind-CSS-Contact-Form-Examples-For-Your-Web-App.png 750w, /blog/content/images/size/w960/2024/07/7-Free-Tailwind-CSS-Contact-Form-Examples-For-Your-Web-App.png 960w, /blog/content/images/size/w1140/2024/07/7-Free-Tailwind-CSS-Contact-Form-Examples-For-Your-Web-App.png 1140w, /blog/content/images/size/w1920/2024/07/7-Free-Tailwind-CSS-Contact-Form-Examples-For-Your-Web-App.png 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2024/07/7-Free-Tailwind-CSS-Contact-Form-Examples-For-Your-Web-App.png" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="7 Free Tailwind CSS Contact Form Examples For Your Web App"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/tw-components/free-tailwind-css-contact-form-examples-for-your-web-app/">7 Free Tailwind CSS Contact Form Examples For Your Web App</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-tw-components" href="https://www.creative-tim.com/blog/tw-components/" title="TW Components">TW Components</a> </span> <span class="post-meta-item post-meta-length"> 3 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-08-05"> 4 months ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-08-05"> 4 months ago </time> </span> </div> </header> <div class="post-excerpt"> We have gathered in this article a collection of easy-to-use Contact Forms that you can use in your project to allow users to communicate with the site owner. See below our Contact Form <a class="post-link primary" href="/blog/tw-components/free-tailwind-css-contact-form-examples-for-your-web-app/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/alexandra-murtaza/"> <img class="post-author-image" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" alt="Alexandra Murtaza"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/alexandra-murtaza/">Alexandra Murtaza</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/tw-components/free-tailwind-css-contact-form-examples-for-your-web-app/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-tw-components"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/tw-components/best-tailwind-css-responsive-alerts-to-use-in-your-project/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2024/07/8-Best-Tailwind-CSS-Responsive-Alerts-To-Use-In-Your-Project.png 400w, /blog/content/images/size/w750/2024/07/8-Best-Tailwind-CSS-Responsive-Alerts-To-Use-In-Your-Project.png 750w, /blog/content/images/size/w960/2024/07/8-Best-Tailwind-CSS-Responsive-Alerts-To-Use-In-Your-Project.png 960w, /blog/content/images/size/w1140/2024/07/8-Best-Tailwind-CSS-Responsive-Alerts-To-Use-In-Your-Project.png 1140w, /blog/content/images/size/w1920/2024/07/8-Best-Tailwind-CSS-Responsive-Alerts-To-Use-In-Your-Project.png 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2024/07/8-Best-Tailwind-CSS-Responsive-Alerts-To-Use-In-Your-Project.png" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="8 Best Tailwind CSS Responsive Alerts to use in your Project"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/tw-components/best-tailwind-css-responsive-alerts-to-use-in-your-project/">8 Best Tailwind CSS Responsive Alerts to use in your Project</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-tw-components" href="https://www.creative-tim.com/blog/tw-components/" title="TW Components">TW Components</a> </span> <span class="post-meta-item post-meta-length"> 3 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-08-05"> 4 months ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-08-05"> 4 months ago </time> </span> </div> </header> <div class="post-excerpt"> Alerts are essential UI/UX components used to give users feedback. The nature and urgency of the information should be made clear via the alert's shape, color, and position. Knowing how important this <a class="post-link primary" href="/blog/tw-components/best-tailwind-css-responsive-alerts-to-use-in-your-project/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/alexandra-murtaza/"> <img class="post-author-image" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" alt="Alexandra Murtaza"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/alexandra-murtaza/">Alexandra Murtaza</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/tw-components/best-tailwind-css-responsive-alerts-to-use-in-your-project/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-tw-components"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/tw-components/free-tailwind-css-modals-to-use-now-on-your-website/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2024/07/10--Free-Tailwind-CSS-Modals-To-Use-Now-On-Your-Website.png 400w, /blog/content/images/size/w750/2024/07/10--Free-Tailwind-CSS-Modals-To-Use-Now-On-Your-Website.png 750w, /blog/content/images/size/w960/2024/07/10--Free-Tailwind-CSS-Modals-To-Use-Now-On-Your-Website.png 960w, /blog/content/images/size/w1140/2024/07/10--Free-Tailwind-CSS-Modals-To-Use-Now-On-Your-Website.png 1140w, /blog/content/images/size/w1920/2024/07/10--Free-Tailwind-CSS-Modals-To-Use-Now-On-Your-Website.png 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2024/07/10--Free-Tailwind-CSS-Modals-To-Use-Now-On-Your-Website.png" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="10+ Free Tailwind CSS Modals to use now on your website"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/tw-components/free-tailwind-css-modals-to-use-now-on-your-website/">10+ Free Tailwind CSS Modals to use now on your website</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-tw-components" href="https://www.creative-tim.com/blog/tw-components/" title="TW Components">TW Components</a> </span> <span class="post-meta-item post-meta-length"> 3 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-08-05"> 4 months ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-08-05"> 4 months ago </time> </span> </div> </header> <div class="post-excerpt"> Modals are separate windows within a web app that provide information or require confirmation from the user. This article contains a list of the best modals coded with Tailwind CSS that you can <a class="post-link primary" href="/blog/tw-components/free-tailwind-css-modals-to-use-now-on-your-website/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/alexandra-murtaza/"> <img class="post-author-image" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" alt="Alexandra Murtaza"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/alexandra-murtaza/">Alexandra Murtaza</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/tw-components/free-tailwind-css-modals-to-use-now-on-your-website/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-tw-components"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/tw-components/beautiful-tailwind-css-components-to-create-a-landing-page/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2024/07/10-Beautiful-Tailwind-CSS-Components-To-Create-A-Landing-Page.png 400w, /blog/content/images/size/w750/2024/07/10-Beautiful-Tailwind-CSS-Components-To-Create-A-Landing-Page.png 750w, /blog/content/images/size/w960/2024/07/10-Beautiful-Tailwind-CSS-Components-To-Create-A-Landing-Page.png 960w, /blog/content/images/size/w1140/2024/07/10-Beautiful-Tailwind-CSS-Components-To-Create-A-Landing-Page.png 1140w, /blog/content/images/size/w1920/2024/07/10-Beautiful-Tailwind-CSS-Components-To-Create-A-Landing-Page.png 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2024/07/10-Beautiful-Tailwind-CSS-Components-To-Create-A-Landing-Page.png" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="10 Beautiful Tailwind CSS Components to create a Landing Page"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/tw-components/beautiful-tailwind-css-components-to-create-a-landing-page/">10 Beautiful Tailwind CSS Components to create a Landing Page</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-tw-components" href="https://www.creative-tim.com/blog/tw-components/" title="TW Components">TW Components</a> </span> <span class="post-meta-item post-meta-length"> 3 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-08-05"> 4 months ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-08-05"> 4 months ago </time> </span> </div> </header> <div class="post-excerpt"> A landing page is a web page created mainly for marketing purposes. It is used when the visitors "land on" after clicking a link in an email or an ad from <a class="post-link primary" href="/blog/tw-components/beautiful-tailwind-css-components-to-create-a-landing-page/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/alexandra-murtaza/"> <img class="post-author-image" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" alt="Alexandra Murtaza"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/alexandra-murtaza/">Alexandra Murtaza</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/tw-components/beautiful-tailwind-css-components-to-create-a-landing-page/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> </div> <nav class="pagination container large"> <div class="pagination-left"> </div> <span class="page-number hidden-xs hidden-sm">Page 1 of 57</span> <div class="pagination-right"> <a class="older-posts button-arrow button-arrow-right" href="/blog/page/2/"> Older Posts <i class="button-arrow-icon icon icon-arrow-right"></i> </a> </div> </nav> </main> </div> </div> <div class="sidebar-column col-xl-3 col-lg-3 hidden-xs hidden-sm hidden-md"> <aside class="widget-area"> <div class="widget widget-mailchimp u-shadow"> <h4 class="widget-title">Join our newsletter</h4> <!-- Begin Mailchimp Signup Form --> <div id="mc_embed_signup"> <form action="https://creative-tim.us3.list-manage.com/subscribe/post?u=ff98cdcf2e6a63f872c65dbfb&id=3ad01d6373&f_id=0092c2e1f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div id="mc_embed_signup_scroll"> <input type="email" value="" name="EMAIL" class="required email" placeholder="Enter your email..." id="mce-EMAIL"> <button class="button-arrow-icon" type="submit" name="subscribe" id="mc-embedded-subscribe"> <i class="icon icon-arrow-right"></i> </button> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ff98cdcf2e6a63f872c65dbfb_3ad01d6373" tabindex="-1" value=""></div> </div> </form> </div> <!--End mc_embed_signup--> </div> <div class="widget widget-tags u-shadow"> <h4 class="widget-title">Popuplar Tags</h4> <div class="tag-feed"> <div class="tag"> <a class="tag-link" href="/blog/web-design/"> <span class="tag-name">web design</span> <span class="tag-count">376</span> </a> </div> <div class="tag"> <a class="tag-link" href="/blog/web-development/"> <span class="tag-name">Web Development</span> <span class="tag-count">110</span> </a> </div> <div class="tag"> <a class="tag-link" href="/blog/tiktok-learning/"> <span class="tag-name">TikTok Learning</span> <span class="tag-count">87</span> </a> </div> <div class="tag"> <a class="tag-link" href="/blog/educational-tech/"> <span class="tag-name">Educational Tech</span> <span class="tag-count">83</span> </a> </div> <div class="tag"> <a class="tag-link" href="/blog/crypto-news/"> <span class="tag-name">Crypto News</span> <span class="tag-count">82</span> </a> </div> </div> </div> <div class="widget widget-recent u-shadow"> <h4 class="widget-title">Recent Posts</h4> <div class="recent-posts"> <article class="recent"> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/educational-ui-ux/mastering-ui-patterns-components/">Mastering UI Patterns: Essential Components Every Web Designer Should Know</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-length"> 8 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-11-18"> 6 days ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-11-18"> 6 days ago </time> </span> </div> </header> </article> <article class="recent"> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/educational-tech/the-new-material-tailwind-rebuilt/">Build and Ship Production-Ready UIs with the New Material Tailwind – Rebuilt & Refined</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-length"> 4 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-11-06"> 18 days ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-11-06"> 18 days ago </time> </span> </div> </header> </article> <article class="recent"> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/educational-tech/ssl-tls-inspection-critical-for-secure-web-access/">Why SSL/TLS Inspection is Critical for Secure Web Access</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-length"> 6 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-10-30"> 25 days ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-10-30"> 25 days ago </time> </span> </div> </header> </article> </div> </div> <div class="widget widget-recent u-shadow"> <h4 class="widget-title">Short Coding Tutorials</h4> <div class="recent-posts"> <article class="recent"> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/tiktok-learning/tiktok-tutorial-89-how-to-create-a-gravity-button-css/">TikTok Tutorial #89 - How to create a Gravity Button with CSS</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-length"> 3 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-03-01"> 9 months ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-01-30"> 10 months ago </time> </span> </div> </header> </article> <article class="recent"> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/tiktok-learning/tiktok-tutorial-88-how-to-create-a-payment-system/">TikTok Tutorial #88 - How to create a Payment system with CSS & JS</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-length"> 6 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-02-14"> 9 months ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-01-30"> 10 months ago </time> </span> </div> </header> </article> <article class="recent"> <header class="post-header"> <h2 class="post-title"> <a class="post-title-link" href="/blog/tiktok-learning/tiktok-tutorial-87-how-to-create-a-teeth-toggle/">TikTok Tutorial #87 - How to create a Teeth toggle</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-length"> 7 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-01-30"> 10 months ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2024-01-30"> 10 months ago </time> </span> </div> </header> </article> </div> </div></aside> </div> </div> </div> <footer class="site-footer container"> <div> <a class="logo" href="https://www.creative-tim.com/" target="_blank"> <img class="logo-image mb-5 lg:mb-32" src="https://localhost:2368/content/images/2023/02/logo-creative-tim-black.png" alt="Creative Tim"> <img class="logo-image white mb-5 lg:mb-32" src="https://s3.amazonaws.com/creativetim_bucket/static-assets/logo-ct-blog-white.png"> </a> <p class="text-sm text-gray-600 dark:text-gray-400 mb-5 lg:mb-0"> © <script>document.write(new Date().getFullYear())</script><a href="https://www.creative-tim.com/" target="_blank" rel="noopener"> Creative Tim</a>, made with ❤️ for a better web. </a> </p> </div> <ul class="nav block md:flex flex-row"> <li class="text-start sm:mb-0 mb-4"> <div> <h6 class="mb-4 text-sm font-semibold uppercase text-gray-600">Company</h6> <ul class="flex-column mr-6"> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/presentation" rel="nofollow" target="_blank"> About us </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/templates/free" rel="nofollow" target="_blank"> Freebies </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/templates/premium" rel="nofollow" target="_blank"> Premium </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/blog" rel="nofollow" target="_blank"> Blog </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/affiliates/new" rel="nofollow" target="_blank"> Affiliate Program </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/coupon" rel="nofollow" target="_blank"> Get coupon </a> </li> </ul> </div> </li> <li class="text-start md:ml-4 lg:ml-5 sm:mb-0 mb-4"> <div> <h6 class="mb-4 text-sm font-semibold uppercase text-gray-600">Help and Support</h6> <ul class="flex-column mr-6"> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/knowledge-center" rel="nofollow" target="_blank"> Knowledge Center </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/contact-us" target="_blank"> Contact Us </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/support-terms" target="_blank"> Premium Support </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/sponsorships" rel="nofollow" target="_blank"> Sponsorship </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/services/updivision?ref=astro-ecommerce" rel="nofollow" target="_blank"> Custom Development </a> </li> </ul> </div> </li> <li class="text-start lg:ml-5 md:ml-4 sm:mb-0 mb-4"> <div> <h6 class="mb-4 text-sm font-semibold uppercase text-gray-600">Legal</h6> <ul class="flex-column mr-6"> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/knowledge-center/terml-of-service/" rel="nofollow" target="_blank"> Terms & Conditions </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/knowledge-center/privacy-policy/" target="_blank"> Privacy Policy </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/license" target="_blank"> Licenses </a> </li> </ul> </div> </li> <li class="text-start lg:ml-5 md:ml-4 sm:mb-0 mb-4"> <div> <h6 class="mb-4 text-sm font-semibold uppercase text-gray-600">Resources</h6> <ul class="flex-column mr-6"> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/jobs" rel="nofollow" target="_blank">Jobs</a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/cheatsheet/bootstrap4" rel="nofollow" target="_blank">Bootstrap Cheat Sheet</a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/tools" rel="nofollow" target="_blank">Third-Party Tools</a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://iradesign.io/" rel="nofollow" target="_blank">Illustrations</a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/bits" rel="nofollow" target="_blank">Bits</a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.bluehost.com/?utm_medium=affiliate&irpid=105&clickid=P99C105S645N0B9A2D4499E0000V100&pb=affiliate_nonpromo&source=IR&utm_source=IR" rel="nofollow" target="_blank">Bluehost</a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.digitalocean.com/?refcode=276af09d9975&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=CopyPaste" rel="nofollow" target="_blank">Digital Ocean</a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/gallery/get-shit-done-pro" rel="nofollow" target="_blank">Made with Creative Tim</a> </li> </ul> </div> </li> </ul> </footer> </div> <div class="dimmer"></div> <div class="off-canvas"> <div class="canvas-close"> <i class="canvas-icon icon icon-window-close"></i> </div> <div class="mobile-menu"></div> </div> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"> </script> <script src="/blog/assets/built/main.min.js?v=bc77caee98"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js" integrity="sha512-9khQRAUBYEJDCDVP2yw3LRUQvjJ0Pjx0EShmaQjcHa6AXiOv6qHQu9lCAIR8O+/D8FtaCoJ2c0Tf9Xo7hYH01Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-fTl/qcO1VgvKtOMApX2PdZzkziyr2stM65GYPLGuYMnuMm1z2JLJG6XVU7C/mR+E7xBUqCivykuhlzfqxXBXbg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://polyfill.io/v3/polyfill.min.js?features=Promise%2CObject.entries%2CObject.assign"></script> <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.14.3/dist/algoliasearch.umd.js" integrity="sha256-xpIeHMyr5dPVIcLjKZ9plxUrg4lFJ11AMdoPLDEYtPk=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script> <script type="text/javascript"> docsearch({ container: '#docsearch', appId: 'H5FHEK3TTR', indexName: 'creative-tim', apiKey: 'a322bdccce45153c3270b08da1a1c6e7', debug: true }); </script> <script type="text/javascript"> var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("navbar").style.top = "0"; } else { document.getElementById("navbar").style.top = "-135px"; } prevScrollpos = currentScrollPos; } </script> </body> </html>