Bits by Creative Tim - Code Snippets for easier coding

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="apple-touch-icon" sizes="76x76" href="https://www.creative-tim.com/bits/assets/images/apple-icon.png"> <link rel="icon" href="https://www.creative-tim.com/bits/assets/images/apple-icon.png" type="image/png"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title> Bits by Creative Tim - Code Snippets for easier coding </title> <link rel="canonical" href="https://www.creative-tim.com/bits/" /> <link rel="stylesheet" href="https://www.creative-tim.com/bits/assets/stylesheets/tailwind.css" type="text/css"> <link rel="stylesheet" href="https://www.creative-tim.com/bits/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css" type="text/css"> <link rel="stylesheet" href="https://www.creative-tim.com/bits/assets/stylesheets/carbon-ads.css" type="text/css"> <meta name="keywords" content=""> <meta name="description" content="An awesome library of Bootstrap and Tailwind CSS snippets to avoid typing repetitive code, no need to download an entire theme. Test your code!"> <meta name="twitter:card" content="product"> <meta name="twitter:site" content="@creativetim"> <meta name="twitter:title" content="Bits by Creative Tim - Code Snippets for easier coding "> <meta name="twitter:description" content="An awesome library of Bootstrap and Tailwind CSS snippets to avoid typing repetitive code, no need to download an entire theme. Test your code!"> <meta name="twitter:creator" content="@creativetim"> <meta property="og:image" content="https://www.creative-tim.com/bits/assets/images/snippets_thumbnail.jpg" /> <meta property="fb:app_id" content="655968634437471"> <meta property="og:title" content="Bits by Creative Tim - Code Snippets for easier coding" /> <meta property="og:type" content="article" /> <meta property="og:url" content="" /> <meta property="og:image" content="https://www.creative-tim.com/bits/assets/images/snippets_thumbnail.jpg" /> <meta property="og:description" content="An awesome library of Bootstrap and Tailwind CSS snippets to avoid typing repetitive code, no need to download an entire theme. Test your code!" /> <meta property="og:site_name" content="Creative Tim" />  <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-gray-800 antialiased">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <nav class="fixed z-50 w-full bg-white top-0 flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg shadow-lg"> <div class="container px-4 mx-auto flex flex-wrap items-center justify-between"> <div class="w-full relative flex justify-between lg:w-auto lg:static lg:justify-start"> <div class="text-sm font-bold leading-relaxed inline-block mr-2 py-2 whitespace-no-wrap uppercase text-gray-800 flex"> <a href="https://www.creative-tim.com/" class="pr-4"><img class="w-32" src="https://s3.amazonaws.com/creativetim_bucket/static-assets/logo-ct-black.png"></a> <div class="border-l-2 pr-4 h-10 mt-2"></div> <a href="https://www.creative-tim.com/bits/" class="pt-4">Bits</a> </div>  <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('navbar-collapse')" > <i class="fas fa-bars"></i> </button> </div> <div class="lg:flex flex-grow items-center hidden" id="navbar-collapse"> <ul class="flex flex-col lg:flex-row list-none lg:ml-auto items-center"> <li class="nav-item"> <a class="px-3 py-2 flex items-center text-xs uppercase font-bold text-gray-700 hover:text-gray-900" href="https://www.creative-tim.com/bits/tags/bootstrap"> <span class="ml-2">Bootstrap</span> </a> </li> <li class="nav-item"> <a class="pr-3 py-2 flex items-center text-xs uppercase font-bold text-gray-700 hover:text-gray-900" href="https://www.creative-tim.com/bits/tags/tailwind"> <span class="ml-2">Tailwind</span> </a> </li> <li class="nav-item"> <a href="https://github.com/creativetimofficial/bits/blob/master/.github/pull_request_template.md" class="bg-indigo-500 text-white active:bg-indigo-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none ml-3 ease-linear transition-all duration-150" target="_blank"> Create new snippet </a> </li> <li> <div class="border-l-2 mr-5 ml-5 h-8 mt-1"></div> </li> <li class="nav-item"> <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.creative-tim.com/bits/" class="pr-3 py-2 flex items-center text-xs uppercase font-bold text-gray-800 hover:text-gray-600" target="_blank"> <i class="fab fa-facebook-square text-lg leading-lg text-blue-600"></i> </a> </li> <li class="nav-item"> <a href="https://twitter.com/intent/tweet?text=Check%20Creative%20Tim%20Snippets%20made%20by%20%40CreativeTim%20%23webdesign%20%23snippets&url=https%3A%2F%2Fwww.creative-tim.com%2Fbits%2Fsnippets%2F" class="px-3 py-2 flex items-center text-xs uppercase font-bold text-gray-800 hover:text-gray-600" target="_blank"> <i class="fab fa-twitter text-lg leading-lg text-blue-400"></i> </a> </li> <li class="nav-item"> <a href="https://github.com/creativetimofficial/bits" class="px-3 py-2 flex items-center text-xs uppercase font-bold text-gray-800 hover:text-gray-600" target="_blank"> <i class="fab fa-github text-lg leading-lg text-gray-900"></i> </a> </li> </ul> </div> </div> </nav> <section class="header relative pt-16 items-center flex sm:h-screen sm:text-left text-center" style="max-height:860px; min-height: 600px;"> <div class="container mx-auto items-center flex flex-wrap overflow-hidden"> <div class="w-full md:w-8/12 lg:w-6/12 xl:w-6/12 px-4"> <div> <h1 class="font-semibold text-3xl">Code snippets for easier coding</h1> <h2 class="mt-4 mb-4 text-lg text-gray-600 leading-relaxed"> An awesome library of Bootstrap and Tailwind CSS snippets to avoid typing repetitive code, no need to download an entire theme! </h2> <a href="https://www.creative-tim.com/bits/tags/bootstrap" class="rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold text-white mr-1"> bootstrap</a> <a href="https://www.creative-tim.com/bits/tags/tailwindcss" class="rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold text-white mr-1"> tailwind css </a> <div class="mt-12"> <a href="#snippets" class="get-started text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-pink-500 active:bg-pink-600 uppercase text-sm shadow hover:shadow-lg" style="transition:all .15s ease" href="#">View snippets</a> <a href="https://github.com/creativetimofficial/bits" target="_blank" class="github-star sm:ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-gray-800 active:bg-gray-700 uppercase text-sm shadow hover:shadow-lg"><i class="fab fa-github text-lg mr-1"></i><span>Help With a Star</span></a> </div> <div class="w-full mt-12 text-center"> <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7IPK3J&placement=wwwcreative-timcom" id="_carbonads_js"></script> </div> </div> </div> <img class="relative top-0 b-auto right-0 pt-10 sm:w-6/12 -mt-48 sm:mt-0 w-10/12 lg:block hidden" src="https://www.creative-tim.com/bits/assets/images/header_image.png" alt="No image" style="max-height:860px"> </div> <div class="m-auto text-center w-full bottom-0 absolute"> <a href="#snippets" class="px-3 py-2 flex items-center text-xs uppercase font-bold"> <i class="fa fa-angle-down text-3xl leading-lg text-indigo-600 w-full" style="transition:all .15s ease;"></i> </a> </div> </section> <section class="block relative z-1 pt-5" id="snippets"> <div class="container mx-auto lg:mt-16"> <div class="justify-center flex flex-wrap"> <div class="w-full lg:w-12/12 px-4"> <div class="flex flex-wrap">  <div class="w-full w-12/12 px-4"> <img alt="logo-bootstrap" class="align-middle border rounded-full rounded-lg shadow-lg w-12 mt-10 mb-4 p-1" src="https://www.creative-tim.com/bits/assets/images/logos/logo-bootstrap.jpg" /> <h2 class="text-2xl font-semibold">Bootstrap Snippets</h2> <p class="leading-relaxed text-gray-500">Check our selection of the best Bootstrap Snippets from the community.</p> </div> <div class="w-full lg:w-4/12 md:w-6/12 px-4 lg:mt-10 mt-4"> <div class="hover:shadow-lg mb-2 rounded-lg" style="transition: all 0.1s ease 0s;"> <a href="https://www.creative-tim.com/bits/bootstrap/bootstrap-stats-card-argon-dashboard"> <img alt="Bootstrap Stats Card" class="align-middle border max-w-full h-auto rounded-lg" src="https://www.creative-tim.com/bits/assets/images/bootstrap-stats-card-argon-dashboard.jpg" /> </a> </div> <div class="flex flex-row list-none items-top mt-4"> <div class="w-8/12"> <div class="items-start flex"> <span class="w-10 h-10 mr-3 mt-1 text-sm text-white bg-blueGray-200 items-center justify-center rounded-full md:w-2/12"> <img alt="..." class="w-full rounded-full align-middle border border-gray-500 shadow-lg" src="https://s3.amazonaws.com/creativetim_bucket/new_logo.png" /> </span> <div class="md:w-10/12"> <h2 class="text-lg"><a href="https://www.creative-tim.com/bits/bootstrap/bootstrap-stats-card-argon-dashboard">Bootstrap Stats Card</a></h2> <a class="text-gray-700 block text-sm text-left">by Creative Tim</a> </div> </div> </div> <div class="w-4/12"> <div class="px-2 mb-2 mt-1 pr-0 text-right"> <a href="https://www.creative-tim.com/bits/tags/bootstrap" class="rounded-full text-indigo-600 bg-indigo-200 uppercase px-2 py-1 text-xs font-bold text-white">bootstrap</a> </div> </div> </div> </div> <div class="w-full lg:w-4/12 md:w-6/12 px-4 lg:mt-10 mt-4"> <div class="hover:shadow-lg mb-2 rounded-lg" style="transition: all 0.1s ease 0s;"> <a href="https://www.creative-tim.com/bits/bootstrap/user-profile-page-argon-dashboard"> <img alt="User Profile Page" class="align-middle border max-w-full h-auto rounded-lg" src="https://www.creative-tim.com/bits/assets/images/user-profile-page-argon-dashboard.jpg" /> </a> </div> <div class="flex flex-row list-none items-top mt-4"> <div class="w-8/12"> <div class="items-start flex"> <span class="w-10 h-10 mr-3 mt-1 text-sm text-white bg-blueGray-200 items-center justify-center rounded-full md:w-2/12"> <img alt="..." class="w-full rounded-full align-middle border border-gray-500 shadow-lg" src="https://s3.amazonaws.com/creativetim_bucket/new_logo.png" /> </span> <div class="md:w-10/12"> <h2 class="text-lg"><a href="https://www.creative-tim.com/bits/bootstrap/user-profile-page-argon-dashboard">User Profile Page</a></h2> <a class="text-gray-700 block text-sm text-left">by Creative Tim</a> </div> </div> </div> <div class="w-4/12"> <div class="px-2 mb-2 mt-1 pr-0 text-right"> <a href="https://www.creative-tim.com/bits/tags/bootstrap" class="rounded-full text-indigo-600 bg-indigo-200 uppercase px-2 py-1 text-xs font-bold text-white">bootstrap</a> </div> </div> </div> </div> <div class="w-full lg:w-4/12 md:w-6/12 px-4 lg:mt-10 mt-4"> <div class="hover:shadow-lg mb-2 rounded-lg" style="transition: all 0.1s ease 0s;"> <a href="https://www.creative-tim.com/bits/bootstrap/bootstrap-table-template-argon-dashboard"> <img alt="Bootstrap Table Template" class="align-middle border max-w-full h-auto rounded-lg" src="https://www.creative-tim.com/bits/assets/images/bootstrap-table-template-argon-dashboard.jpg" /> </a> </div> <div class="flex flex-row list-none items-top mt-4"> <div class="w-8/12"> <div class="items-start flex"> <span class="w-10 h-10 mr-3 mt-1 text-sm text-white bg-blueGray-200 items-center justify-center rounded-full md:w-2/12"> <img alt="..." class="w-full rounded-full align-middle border border-gray-500 shadow-lg" src="https://s3.amazonaws.com/creativetim_bucket/new_logo.png" /> </span> <div class="md:w-10/12"> <h2 class="text-lg"><a href="https://www.creative-tim.com/bits/bootstrap/bootstrap-table-template-argon-dashboard">Bootstrap Table Template</a></h2> <a class="text-gray-700 block text-sm text-left">by Creative Tim</a> </div> </div> </div> <div class="w-4/12"> <div class="px-2 mb-2 mt-1 pr-0 text-right"> <a href="https://www.creative-tim.com/bits/tags/bootstrap" class="rounded-full text-indigo-600 bg-indigo-200 uppercase px-2 py-1 text-xs font-bold text-white">bootstrap</a> </div> </div> </div> </div> <div class="w-full lg:w-4/12 md:w-6/12 px-4 lg:mt-10 mt-4"> <div class="hover:shadow-lg mb-2 rounded-lg" style="transition: all 0.1s ease 0s;"> <a href="https://www.creative-tim.com/bits/bootstrap/register-page-argon-dashboard"> <img alt="Register Page" class="align-middle border max-w-full h-auto rounded-lg" src="https://www.creative-tim.com/bits/assets/images/register-page-argon-dashboard.jpg" /> </a> </div> <div class="flex flex-row list-none items-top mt-4"> <div class="w-8/12"> <div class="items-start flex"> <span class="w-10 h-10 mr-3 mt-1 text-sm text-white bg-blueGray-200 items-center justify-center rounded-full md:w-2/12"> <img alt="..." class="w-full rounded-full align-middle border border-gray-500 shadow-lg" src="https://s3.amazonaws.com/creativetim_bucket/new_logo.png" /> </span> <div class="md:w-10/12"> <h2 class="text-lg"><a href="https://www.creative-tim.com/bits/bootstrap/register-page-argon-dashboard">Register Page</a></h2> <a class="text-gray-700 block text-sm text-left">by Creative Tim</a> </div> </div> </div> <div class="w-4/12"> <div class="px-2 mb-2 mt-1 pr-0 text-right"> <a href="https://www.creative-tim.com/bits/tags/bootstrap" class="rounded-full text-indigo-600 bg-indigo-200 uppercase px-2 py-1 text-xs font-bold text-white">bootstrap</a> </div> </div> </div> </div> <div class="w-full lg:w-4/12 md:w-6/12 px-4 lg:mt-10 mt-4"> <div class="hover:shadow-lg mb-2 rounded-lg" style="transition: all 0.1s ease 0s;"> <a href="https://www.creative-tim.com/bits/bootstrap/signup-page-now-ui-kit"> <img alt="Signup Page" class="align-middle border max-w-full h-auto rounded-lg" src="https://www.creative-tim.com/bits/assets/images/signup-page-now-ui-kit.jpg" /> </a> </div> <div class="flex flex-row list-none items-top mt-4"> <div class="w-8/12"> <div class="items-start flex"> <span class="w-10 h-10 mr-3 mt-1 text-sm text-white bg-blueGray-200 items-center justify-center rounded-full md:w-2/12"> <img alt="..." class="w-full rounded-full align-middle border border-gray-500 shadow-lg" src="https://s3.amazonaws.com/creativetim_bucket/new_logo.png" /> </span> <div class="md:w-10/12"> <h2 class="text-lg"><a href="https://www.creative-tim.com/bits/bootstrap/signup-page-now-ui-kit">Signup Page</a></h2> <a class="text-gray-700 block text-sm text-left">by Creative Tim</a> </div> </div> </div> <div class="w-4/12"> <div class="px-2 mb-2 mt-1 pr-0 text-right"> <a href="https://www.creative-tim.com/bits/tags/bootstrap" class="rounded-full text-indigo-600 bg-indigo-200 uppercase px-2 py-1 text-xs font-bold text-white">bootstrap</a> </div> </div> </div> </div> <div class="w-full lg:w-4/12 md:w-6/12 px-4 lg:mt-10 mt-4"> <div class="hover:shadow-lg mb-2 rounded-lg" style="transition: all 0.1s ease 0s;"> <a href="https://www.creative-tim.com/bits/bootstrap/profile-page-now-ui-kit"> <img alt="Profile Page" class="align-middle border max-w-full h-auto rounded-lg" src="https://www.creative-tim.com/bits/assets/images/profile-page-now-ui-kit.jpg" /> </a> </div> <div class="flex flex-row list-none items-top mt-4"> <div class="w-8/12"> <div class="items-start flex"> <span class="w-10 h-10 mr-3 mt-1 text-sm text-white bg-blueGray-200 items-center justify-center rounded-full md:w-2/12"> <img alt="..." class="w-full rounded-full align-middle border border-gray-500 shadow-lg" src="https://s3.amazonaws.com/creativetim_bucket/new_logo.png" /> </span> <div class="md:w-10/12"> <h2 class="text-lg"><a href="https://www.creative-tim.com/bits/bootstrap/profile-page-now-ui-kit">Profile Page</a></h2> <a class="text-gray-700 block text-sm text-left">by Creative Tim</a> </div> </div> </div> <div class="w-4/12"> <div class="px-2 mb-2 mt-1 pr-0 text-right"> <a href="https://www.creative-tim.com/bits/tags/bootstrap" class="rounded-full text-indigo-600 bg-indigo-200 uppercase px-2 py-1 text-xs font-bold text-white">bootstrap</a> </div> </div> </div> </div> <div class="w-full lg:w-4/12 md:w-6/12 px-4 lg:mt-10 mt-4"> <div class="hover:shadow-lg mb-2 rounded-lg" style="transition: all 0.1s ease 0s;"> <a href="https://www.creative-tim.com/bits/bootstrap/blog-page-design-material-kit"> <img alt="Blog Page Design" class="align-middle border max-w-full h-auto rounded-lg" src="https://www.creative-tim.com/bits/assets/images/blog-page-design-material-kit.jpg" /> </a> </div> <div class="flex flex-row list-none items-top mt-4"> <div class="w-8/12"> <div class="items-start flex"> <span class="w-10 h-10 mr-3 mt-1 text-sm text-white bg-blueGray-200 items-center justify-center rounded-full md:w-2/12"> <img alt="..." class="w-full rounded-full align-middle border border-gray-500 shadow-lg" src="https://s3.amazonaws.com/creativetim_bucket/new_logo.png" /> </span> <div class="md:w-10/12"> <h2 class="text-lg"><a href="https://www.creative-tim.com/bits/bootstrap/blog-page-design-material-kit">Blog Page Design</a></h2> <a class="text-gray-700 block text-sm text-left">by Creative Tim</a> </div> </div> </div> <div class="w-4/12"> <div class="px-2 mb-2 mt-1 pr-0 text-right"> <a href="https://www.creative-tim.com/bits/tags/bootstrap" class="rounded-full text-indigo-600 bg-indigo-200 uppercase px-2 py-1 text-xs font-bold text-white">bootstrap</a> </div> </div> </div> </div> <div class="w-full lg:w-4/12 md:w-6/12 px-4 lg:mt-10 mt-4"> <div class="hover:shadow-lg mb-2 rounded-lg" style="transition: all 0.1s ease 0s;"> <a href="https://www.creative-tim.com/bits/bootstrap/pricing-page-material-kit"> <img alt="Pricing Page" class="align-middle border max-w-full h-auto rounded-lg" src="https://www.creative-tim.com/bits/assets/images/pricing-page-material-kit.jpg" /> </a> </div> <div class="flex flex-row list-none items-top mt-4"> <div class="w-8/12"> <div class="items-start flex"> <span class="w-10 h-10 mr-3 mt-1 text-sm text-white bg-blueGray-200 items-center justify-center rounded-full md:w-2/12"> <img alt="..." class="w-full rounded-full align-middle border border-gray-500 shadow-lg" src="https://s3.amazonaws.com/creativetim_bucket/new_logo.png" /> </span> <div class="md:w-10/12"> <h2 class="text-lg"><a href="https://www.creative-tim.com/bits/bootstrap/pricing-page-material-kit">Pricing Page</a></h2> <a class="text-gray-700 block text-sm text-left">by Creative Tim</a> </div> </div> </div> <div class="w-4/12"> <div class="px-2 mb-2 mt-1 pr-0 text-right"> <a href="https://www.creative-tim.com/bits/tags/bootstrap" class="rounded-full text-indigo-600 bg-indigo-200 uppercase px-2 py-1 text-xs font-bold text-white">bootstrap</a> </div> </div> </div> </div> <div class="w-full lg:w-4/12 md:w-6/12 px-4 lg:mt-10 mt-4"> <div class="hover:shadow-lg mb-2 rounded-lg" style="transition: all 0.1s ease 0s;"> <a href="https://www.creative-tim.com/bits/bootstrap/login-page-material-kit"> <img alt="Login Page" class="align-middle border max-w-full h-auto rounded-lg" src="https://www.creative-tim.com/bits/assets/images/login-page-material-kit.jpg" /> </a> </div> <div class="flex flex-row list-none items-top mt-4"> <div class="w-8/12"> <div class="items-start flex"> <span class="w-10 h-10 mr-3 mt-1 text-sm text-white bg-blueGray-200 items-center justify-center rounded-full md:w-2/12"> <img alt="..." class="w-full rounded-full align-middle border border-gray-500 shadow-lg" src="https://s3.amazonaws.com/creativetim_bucket/new_logo.png" /> </span> <div class="md:w-10/12"> <h2 class="text-lg"><a href="https://www.creative-tim.com/bits/bootstrap/login-page-material-kit">Login Page</a></h2> <a class="text-gray-700 block text-sm text-left">by Creative Tim</a> </div> </div> </div> <div class="w-4/12"> <div class="px-2 mb-2 mt-1 pr-0 text-right"> <a href="https://www.creative-tim.com/bits/tags/bootstrap" class="rounded-full text-indigo-600 bg-indigo-200 uppercase px-2 py-1 text-xs font-bold text-white">bootstrap</a> </div> </div> </div> </div> <div class="w-full w-12/12 text-center mt-16"> <nav class="block"> <ul class="flex pl-0 rounded list-none flex-wrap"> <a href="javascript:;" class="ml-auto text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-200 bg-white text-indigo-200"> <i class="fas fa-chevron-left -ml-px"></i> </a> <li> <a href="javascript:;" title="Your awesome title" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-indigo-500 text-white">1</a> </li> <li> <a href="https://www.creative-tim.com/bits/tags/bootstrap/page2/" title="page 2" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">2</a> </li> <li> <a href="https://www.creative-tim.com/bits/tags/bootstrap/page3/" title="page 3" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">3</a> </li> <a href="https://www.creative-tim.com/bits/tags/bootstrap/page2/" class="mr-auto text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500"> <i class="fas fa-chevron-right -ml-px"></i> </a> </ul> </nav> </div>   <div class="w-full w-12/12 px-4"> <img alt="logo-tailwind" class="align-middle border rounded-full rounded-lg shadow-lg w-12 mt-32 mb-4 p-2" src="https://www.creative-tim.com/bits/assets/images/logos/logo-tailwind.jpg" /> <h2 class="text-2xl font-semibold">Tailwind Snippets</h2> <p class="leading-relaxed text-gray-500">Check our selection of the best Tailwind CSS Snippets from the community.</p> </div> <div class="w-full lg:w-4/12 md:w-6/12 px-4 lg:mt-10 mt-4"> <div class="hover:shadow-lg mb-2 rounded-lg" style="transition: all 0.1s ease 0s;"> <a href="https://www.creative-tim.com/bits/tailwindcss/tailwindcss-alerts-alert-examples-tailwind-starter-kit-pmatwucz"> <img alt="TailwindCSS Alerts - Alert Examples" class="align-middle border max-w-full h-auto rounded-lg" src="https://www.creative-tim.com/bits/assets/images/tsk-alerts-alert-examples.jpg" /> </a> </div> <div class="flex flex-row list-none items-top mt-4"> <div class="w-8/12"> <div class="items-start flex"> <span class="w-10 h-10 mr-3 mt-1 text-sm text-white bg-blueGray-200 items-center justify-center rounded-full md:w-2/12"> <img alt="..." class="w-full rounded-full align-middle border border-gray-500 shadow-lg" src="https://s3.amazonaws.com/creativetim_bucket/new_logo.png" /> </span> <div class="md:w-10/12"> <h2 class="text-lg"><a href="https://www.creative-tim.com/bits/tailwindcss/tailwindcss-alerts-alert-examples-tailwind-starter-kit-pmatwucz">TailwindCSS Alerts - Alert Examples</a></h2> <a class="text-gray-700 block text-sm text-left">by Creative Tim</a> </div> </div> </div> <div class="w-4/12"> <div class="px-2 mb-2 mt-1 pr-0 text-right"> <a href="https://www.creative-tim.com/bits/tags/tailwindcss" class="rounded-full text-indigo-600 bg-indigo-200 uppercase px-2 py-1 text-xs font-bold text-white">tailwindcss</a> </div> </div> </div> </div> <div class="w-full lg:w-4/12 md:w-6/12 px-4 lg:mt-10 mt-4"> <div class="hover:shadow-lg mb-2 rounded-lg" style="transition: all 0.1s ease 0s;"> <a href="https://www.creative-tim.com/bits/tailwindcss/tailwindcss-large-filled-buttons-only-text-tailwind-starter-kit-rtb27dza"> <img alt="TailwindCSS Large Filled Buttons - Only Text" class="align-middle border max-w-full h-auto rounded-lg" src="https://www.creative-tim.com/bits/assets/images/tsk-large-filled-buttons-only-text.jpg" /> </a> </div> <div class="flex flex-row list-none items-top mt-4"> <div class="w-8/12"> <div class="items-start flex"> <span class="w-10 h-10 mr-3 mt-1 text-sm text-white bg-blueGray-200 items-center justify-center rounded-full md:w-2/12"> <img alt="..." class="w-full rounded-full align-middle border border-gray-500 shadow-lg" src="https://s3.amazonaws.com/creativetim_bucket/new_logo.png" /> </span> <div class="md:w-10/12"> <h2 class="text-lg"><a href="https://www.creative-tim.com/bits/tailwindcss/tailwindcss-large-filled-buttons-only-text-tailwind-starter-kit-rtb27dza">TailwindCSS Large Filled Buttons - Only Text</a></h2> <a class="text-gray-700 block text-sm text-left">by Creative Tim</a> </div> </div> </div> <div class="w-4/12"> <div class="px-2 mb-2 mt-1 pr-0 text-right"> <a href="https://www.creative-tim.com/bits/tags/tailwindcss" class="rounded-full text-indigo-600 bg-indigo-200 uppercase px-2 py-1 text-xs font-bold text-white">tailwindcss</a> </div> </div> </div> </div> <div class="w-full lg:w-4/12 md:w-6/12 px-4 lg:mt-10 mt-4"> <div class="hover:shadow-lg mb-2 rounded-lg" style="transition: all 0.1s ease 0s;"> <a href="https://www.creative-tim.com/bits/tailwindcss/tailwindcss-large-filled-buttons-icon-and-text-tailwind-starter-kit-Lnzq5wvj"> <img alt="TailwindCSS Large Filled Buttons - Icon and Text" class="align-middle border max-w-full h-auto rounded-lg" src="https://www.creative-tim.com/bits/assets/images/tsk-large-filled-buttons-icon-and-text.jpg" /> </a> </div> <div class="flex flex-row list-none items-top mt-4"> <div class="w-8/12"> <div class="items-start flex"> <span class="w-10 h-10 mr-3 mt-1 text-sm text-white bg-blueGray-200 items-center justify-center rounded-full md:w-2/12"> <img alt="..." class="w-full rounded-full align-middle border border-gray-500 shadow-lg" src="https://s3.amazonaws.com/creativetim_bucket/new_logo.png" /> </span> <div class="md:w-10/12"> <h2 class="text-lg"><a href="https://www.creative-tim.com/bits/tailwindcss/tailwindcss-large-filled-buttons-icon-and-text-tailwind-starter-kit-Lnzq5wvj">TailwindCSS Large Filled Buttons - Icon and Text</a></h2> <a class="text-gray-700 block text-sm text-left">by Creative Tim</a> </div> </div> </div> <div class="w-4/12"> <div class="px-2 mb-2 mt-1 pr-0 text-right"> <a href="https://www.creative-tim.com/bits/tags/tailwindcss" class="rounded-full text-indigo-600 bg-indigo-200 uppercase px-2 py-1 text-xs font-bold text-white">tailwindcss</a> </div> </div> </div> </div> <div class="w-full lg:w-4/12 md:w-6/12 px-4 lg:mt-10 mt-4"> <div class="hover:shadow-lg mb-2 rounded-lg" style="transition: all 0.1s ease 0s;"> <a href="https://www.creative-tim.com/bits/tailwindcss/tailwindcss-large-outline-buttons-round-with-icon-and-text-tailwind-starter-kit-9ad0sLfn"> <img alt="TailwindCSS Large Outline Buttons - Round with Icon and Text" class="align-middle border max-w-full h-auto rounded-lg" src="https://www.creative-tim.com/bits/assets/images/tsk-large-outline-buttons-round-with-icon-and-text.jpg" /> </a> </div> <div class="flex flex-row list-none items-top mt-4"> <div class="w-8/12"> <div class="items-start flex"> <span class="w-10 h-10 mr-3 mt-1 text-sm text-white bg-blueGray-200 items-center justify-center rounded-full md:w-2/12"> <img alt="..." class="w-full rounded-full align-middle border border-gray-500 shadow-lg" src="https://s3.amazonaws.com/creativetim_bucket/new_logo.png" /> </span> <div class="md:w-10/12"> <h2 class="text-lg"><a href="https://www.creative-tim.com/bits/tailwindcss/tailwindcss-large-outline-buttons-round-with-icon-and-text-tailwind-starter-kit-9ad0sLfn">TailwindCSS Large Outline Buttons - Round with Icon and Text</a></h2> <a class="text-gray-700 block text-sm text-left">by Creative Tim</a> </div> </div> </div> <div class="w-4/12"> <div class="px-2 mb-2 mt-1 pr-0 text-right"> <a href="https://www.creative-tim.com/bits/tags/tailwindcss" class="rounded-full text-indigo-600 bg-indigo-200 uppercase px-2 py-1 text-xs font-bold text-white">tailwindcss</a> </div> </div> </div> </div> <div class="w-full lg:w-4/12 md:w-6/12 px-4 lg:mt-10 mt-4"> <div class="hover:shadow-lg mb-2 rounded-lg" style="transition: all 0.1s ease 0s;"> <a href="https://www.creative-tim.com/bits/tailwindcss/tailwindcss-image-types-circle-raised-tailwind-starter-kit-qcomaz36"> <img alt="TailwindCSS Image Types - Circle Raised" class="align-middle border max-w-full h-auto rounded-lg" src="https://www.creative-tim.com/bits/assets/images/tsk-image-types-circle-raised.jpg" /> </a> </div> <div class="flex flex-row list-none items-top mt-4"> <div class="w-8/12"> <div class="items-start flex"> <span class="w-10 h-10 mr-3 mt-1 text-sm text-white bg-blueGray-200 items-center justify-center rounded-full md:w-2/12"> <img alt="..." class="w-full rounded-full align-middle border border-gray-500 shadow-lg" src="https://s3.amazonaws.com/creativetim_bucket/new_logo.png" /> </span> <div class="md:w-10/12"> <h2 class="text-lg"><a href="https://www.creative-tim.com/bits/tailwindcss/tailwindcss-image-types-circle-raised-tailwind-starter-kit-qcomaz36">TailwindCSS Image Types - Circle Raised</a></h2> <a class="text-gray-700 block text-sm text-left">by Creative Tim</a> </div> </div> </div> <div class="w-4/12"> <div class="px-2 mb-2 mt-1 pr-0 text-right"> <a href="https://www.creative-tim.com/bits/tags/tailwindcss" class="rounded-full text-indigo-600 bg-indigo-200 uppercase px-2 py-1 text-xs font-bold text-white">tailwindcss</a> </div> </div> </div> </div> <div class="w-full lg:w-4/12 md:w-6/12 px-4 lg:mt-10 mt-4"> <div class="hover:shadow-lg mb-2 rounded-lg" style="transition: all 0.1s ease 0s;"> <a href="https://www.creative-tim.com/bits/tailwindcss/tailwindcss-labels-simple-tailwind-starter-kit-r9pbn2jy"> <img alt="TailwindCSS Labels - Simple" class="align-middle border max-w-full h-auto rounded-lg" src="https://www.creative-tim.com/bits/assets/images/tsk-labels-simple.jpg" /> </a> </div> <div class="flex flex-row list-none items-top mt-4"> <div class="w-8/12"> <div class="items-start flex"> <span class="w-10 h-10 mr-3 mt-1 text-sm text-white bg-blueGray-200 items-center justify-center rounded-full md:w-2/12"> <img alt="..." class="w-full rounded-full align-middle border border-gray-500 shadow-lg" src="https://s3.amazonaws.com/creativetim_bucket/new_logo.png" /> </span> <div class="md:w-10/12"> <h2 class="text-lg"><a href="https://www.creative-tim.com/bits/tailwindcss/tailwindcss-labels-simple-tailwind-starter-kit-r9pbn2jy">TailwindCSS Labels - Simple</a></h2> <a class="text-gray-700 block text-sm text-left">by Creative Tim</a> </div> </div> </div> <div class="w-4/12"> <div class="px-2 mb-2 mt-1 pr-0 text-right"> <a href="https://www.creative-tim.com/bits/tags/tailwindcss" class="rounded-full text-indigo-600 bg-indigo-200 uppercase px-2 py-1 text-xs font-bold text-white">tailwindcss</a> </div> </div> </div> </div> <div class="w-full lg:w-4/12 md:w-6/12 px-4 lg:mt-10 mt-4"> <div class="hover:shadow-lg mb-2 rounded-lg" style="transition: all 0.1s ease 0s;"> <a href="https://www.creative-tim.com/bits/tailwindcss/tailwindcss-pagination-active-states-tailwind-starter-kit-1j5dhu9o"> <img alt="TailwindCSS Pagination - Active States" class="align-middle border max-w-full h-auto rounded-lg" src="https://www.creative-tim.com/bits/assets/images/tsk-pagination-active-states.jpg" /> </a> </div> <div class="flex flex-row list-none items-top mt-4"> <div class="w-8/12"> <div class="items-start flex"> <span class="w-10 h-10 mr-3 mt-1 text-sm text-white bg-blueGray-200 items-center justify-center rounded-full md:w-2/12"> <img alt="..." class="w-full rounded-full align-middle border border-gray-500 shadow-lg" src="https://s3.amazonaws.com/creativetim_bucket/new_logo.png" /> </span> <div class="md:w-10/12"> <h2 class="text-lg"><a href="https://www.creative-tim.com/bits/tailwindcss/tailwindcss-pagination-active-states-tailwind-starter-kit-1j5dhu9o">TailwindCSS Pagination - Active States</a></h2> <a class="text-gray-700 block text-sm text-left">by Creative Tim</a> </div> </div> </div> <div class="w-4/12"> <div class="px-2 mb-2 mt-1 pr-0 text-right"> <a href="https://www.creative-tim.com/bits/tags/tailwindcss" class="rounded-full text-indigo-600 bg-indigo-200 uppercase px-2 py-1 text-xs font-bold text-white">tailwindcss</a> </div> </div> </div> </div> <div class="w-full lg:w-4/12 md:w-6/12 px-4 lg:mt-10 mt-4"> <div class="hover:shadow-lg mb-2 rounded-lg" style="transition: all 0.1s ease 0s;"> <a href="https://www.creative-tim.com/bits/tailwindcss/tailwindcss-progressbars-badge-and-completion-tailwind-starter-kit-zL7chv6r"> <img alt="TailwindCSS Progressbars - Badge and Completion" class="align-middle border max-w-full h-auto rounded-lg" src="https://www.creative-tim.com/bits/assets/images/tsk-progressbars-badge-and-completion.jpg" /> </a> </div> <div class="flex flex-row list-none items-top mt-4"> <div class="w-8/12"> <div class="items-start flex"> <span class="w-10 h-10 mr-3 mt-1 text-sm text-white bg-blueGray-200 items-center justify-center rounded-full md:w-2/12"> <img alt="..." class="w-full rounded-full align-middle border border-gray-500 shadow-lg" src="https://s3.amazonaws.com/creativetim_bucket/new_logo.png" /> </span> <div class="md:w-10/12"> <h2 class="text-lg"><a href="https://www.creative-tim.com/bits/tailwindcss/tailwindcss-progressbars-badge-and-completion-tailwind-starter-kit-zL7chv6r">TailwindCSS Progressbars - Badge and Completion</a></h2> <a class="text-gray-700 block text-sm text-left">by Creative Tim</a> </div> </div> </div> <div class="w-4/12"> <div class="px-2 mb-2 mt-1 pr-0 text-right"> <a href="https://www.creative-tim.com/bits/tags/tailwindcss" class="rounded-full text-indigo-600 bg-indigo-200 uppercase px-2 py-1 text-xs font-bold text-white">tailwindcss</a> </div> </div> </div> </div> <div class="w-full lg:w-4/12 md:w-6/12 px-4 lg:mt-10 mt-4"> <div class="hover:shadow-lg mb-2 rounded-lg" style="transition: all 0.1s ease 0s;"> <a href="https://www.creative-tim.com/bits/tailwindcss/tailwindcss-headings-tailwind-starter-kit-h1-tailwind-starter-kit-jy8drqwc"> <img alt="TailwindCSS Headings Tailwind Starter Kit - H1" class="align-middle border max-w-full h-auto rounded-lg" src="https://www.creative-tim.com/bits/assets/images/tsk-headingstailwind-starter-kit-h1.jpg" /> </a> </div> <div class="flex flex-row list-none items-top mt-4"> <div class="w-8/12"> <div class="items-start flex"> <span class="w-10 h-10 mr-3 mt-1 text-sm text-white bg-blueGray-200 items-center justify-center rounded-full md:w-2/12"> <img alt="..." class="w-full rounded-full align-middle border border-gray-500 shadow-lg" src="https://s3.amazonaws.com/creativetim_bucket/new_logo.png" /> </span> <div class="md:w-10/12"> <h2 class="text-lg"><a href="https://www.creative-tim.com/bits/tailwindcss/tailwindcss-headings-tailwind-starter-kit-h1-tailwind-starter-kit-jy8drqwc">TailwindCSS Headings Tailwind Starter Kit - H1</a></h2> <a class="text-gray-700 block text-sm text-left">by Creative Tim</a> </div> </div> </div> <div class="w-4/12"> <div class="px-2 mb-2 mt-1 pr-0 text-right"> <a href="https://www.creative-tim.com/bits/tags/tailwindcss" class="rounded-full text-indigo-600 bg-indigo-200 uppercase px-2 py-1 text-xs font-bold text-white">tailwindcss</a> </div> </div> </div> </div> <div class="w-full w-12/12 text-center mt-16"> <nav class="block"> <ul class="flex pl-0 rounded list-none flex-wrap"> <a href="javascript:;" class="ml-auto text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-200 bg-white text-indigo-200"> <i class="fas fa-chevron-left -ml-px"></i> </a> <li> <a href="https://www.creative-tim.com/bits/tags/tailwind/" title="Your awesome title" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-indigo-500 text-white">1</a> </li> <li> <a href="https://www.creative-tim.com/bits/tags/tailwind/page2/" title="page 2" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">2</a> </li> <li> <a href="https://www.creative-tim.com/bits/tags/tailwind/page3/" title="page 3" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">3</a> </li> <li> <a href="https://www.creative-tim.com/bits/tags/tailwind/page4/" title="page 4" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">4</a> </li> <li> <a href="https://www.creative-tim.com/bits/tags/tailwind/page5/" title="page 5" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">5</a> </li> <a href="https://www.creative-tim.com/bits/tags/tailwind/page2/" class="mr-auto text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500"> <i class="fas fa-chevron-right -ml-px"></i> </a> </ul> </nav> </div>  </div> </div> </div> </div> </section> <div class="justify-center text-center flex flex-wrap mt-40 pb-40"> <div class="w-full md:w-6/12 px-12 md:px-4"> <h2 class="font-semibold text-4xl">Check our UI Kits & Dashboards</h2> <p class="leading-relaxed text-gray-500 text-lg">Take your projects to the next level with themes from Creative Tim.</p> </div> </div>  <section class="block relative z-1 bg-gray-300 pb-20"> <div class="container mx-auto"> <div class="justify-center flex flex-wrap"> <div class="w-full lg:w-12/12 px-4 -mt-24"> <div class="flex flex-wrap"> <div class="w-full lg:w-4/12 px-4 text-center"> <div class="hover:shadow-2xl relative flex flex-col min-w-0 break-words bg-white w-full mb-5 shadow-lg rounded-lg" style="transition:all .15s ease"> <a href="https://www.creative-tim.com/product/material-dashboard-pro" target="_blank"> <img alt="No image" class="align-middle border-none max-w-full h-auto rounded-lg" src="https://s3.amazonaws.com/creativetim_bucket/products/51/original/opt_mdp_thumbnail.jpg?1521134752"> </a> </div> <a href="https://www.creative-tim.com/product/material-dashboard-pro" target="_blank" class="text-xl font-semibold pb-3 text-center">Material Dashboard PRO</a> <p class="text-sm leading-relaxed mt-1 text-gray-800">Material Dashboard PRO is a Premium Material Bootstrap 4 Admin with a fresh, new design inspired by Google's Material Design.</p> </div> <div class="w-full lg:w-4/12 px-4 text-center"> <div class="hover:shadow-2xl relative flex flex-col min-w-0 break-words bg-white w-full mb-5 shadow-lg rounded-lg" style="transition:all .15s ease"> <a href="https://www.creative-tim.com/product/argon-dashboard-pro" target="_blank"> <img alt="No image" class="align-middle border-none max-w-full h-auto rounded-lg" src="https://s3.amazonaws.com/creativetim_bucket/products/137/original/argon-dashboard-pro.jpg?1637855868"> </a> </div> <a href="https://www.creative-tim.com/product/argon-dashboard-pro" target="_blank" class="text-xl font-semibold pb-3 text-center">Argon Dashboard PRO</a> <p class="text-sm leading-relaxed mt-1 text-gray-800">Argon Dashboard is built with over 200 individual components, giving you the freedom of choosing and combining.</p> </div> <div class="w-full lg:w-4/12 px-4 text-center"> <div class="hover:shadow-2xl relative flex flex-col min-w-0 break-words bg-white w-full mb-5 shadow-lg rounded-lg" style="transition:all .15s ease"> <a href="https://www.creative-tim.com/product/now-ui-dashboard-pro" target="_blank"> <img alt="No image" class="align-middle border-none max-w-full h-auto rounded-lg" src="https://s3.amazonaws.com/creativetim_bucket/products/72/original/opt_nudp_thumbnail.jpg?1517588807"> </a> </div> <a href="https://www.creative-tim.com/product/now-ui-dashboard-pro" target="_blank" class="text-xl font-semibold pb-3 text-center">Now UI Dashboard PRO</a> <p class="text-sm leading-relaxed mt-1 text-gray-800">Now UI Dashboard PRO is a beautiful Bootstrap 4 admin dashboard with a large number of components, designed to look beautiful, clean and organized.</p> </div> </div> </div> </div> </div> </section> <footer class="relative bg-gray-300 pt-8 pb-6"> <div class="container mx-auto px-4"> <div class="flex flex-wrap"> <div class="w-full md:w-8/12 px-4"> <div class="flex flex-wrap items-top mb-6"> <div class="w-full md:w-6/12 xl:w-3/12 pt-6 md:pt-0 md:px-4 ml-auto"> <span class="block uppercase text-gray-600 text-sm font-semibold mb-2">Company</span> <ul class="list-unstyled"> <li> <a class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm" href="https://www.creative-tim.com/presentation" target="_blank">About Us</a> </li> <li> <a class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm" href="https://www.creative-tim.com/templates/free" target="_blank">Freebies</a> </li> <li> <a class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm" href="https://www.creative-tim.com/templates/premium" target="_blank">Premium</a> </li> <li> <a class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm" href="https://www.creative-tim.com/blog" target="_blank">Blog</a> </li> <li> <a class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm" href="https://www.creative-tim.com/affiliates/new" target="_blank">Affiliate Program</a> </li> <li> <a class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm" href="https://www.creative-tim.com/coupon" target="_blank">Get coupon</a> </li> </ul> </div> <div class="w-full md:w-6/12 xl:w-3/12 pt-6 md:pt-0 md:px-4 ml-auto"> <span class="block uppercase text-gray-600 text-sm font-semibold mb-2">Help and Support</span> <ul class="list-unstyled"> <li> <a class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm" href="https://www.creative-tim.com/knowledge-center" target="_blank">Knowledge Center</a> </li> <li> <a class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm" href="https://www.creative-tim.com/contact-us" target="_blank">Contact Us</a> </li> <li> <a class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm" href="https://www.creative-tim.com/support-terms" target="_blank">Premium Support</a> </li> <li> <a class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm" href="https://www.creative-tim.com/sponsorships" target="_blank">Sponsorships</a> </li> <li> <a class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm" href="https://services.creative-tim.com" target="_blank">Custom Development</a> </li> </ul> </div> <div class="w-full md:w-6/12 xl:w-3/12 pt-6 md:pt-0 md:px-4 ml-auto"> <span class="block uppercase text-gray-600 text-sm font-semibold mb-2">Legal</span> <ul class="list-unstyled"> <li> <a class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm" href="https://www.creative-tim.com/terms" target="_blank">Terms & Conditions</a> </li> <li> <a class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm" href="https://www.creative-tim.com/privacy" target="_blank">Privacy Policy</a> </li> <li> <a class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm" href="https://www.creative-tim.com/license" target="_blank">EULA</a> </li> </ul> </div> <div class="w-full md:w-6/12 xl:w-3/12 pt-6 md:pt-0 md:px-4 ml-auto"> <span class="block uppercase text-gray-600 text-sm font-semibold mb-2">Resources</span> <ul class="list-unstyled"> <li> <a class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm" href="https://www.creative-tim.com/cheatsheet/bootstrap4" target="_blank">Bootstrap Cheat Sheet</a> </li> <li> <a class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm" href="https://www.creative-tim.com/tools" target="_blank">Third-Party Tools</a> </li> <li> <a class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm" href="https://iradesign.io/" target="_blank">Illustrations</a> </li> <li> <a class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm" href="https://www.bluehost.com/track/creativetim/" target="_blank">Bluehost</a> </li> <li> <a class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm" href="https://m.do.co/c/276af09d9975" target="_blank">Digital Ocean</a> </li> <li> <a class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm" href="https://www.creative-tim.com/gallery/get-shit-done-pro" target="_blank">Made with Creative Tim</a> </li> </ul> </div> </div> </div> <div class="w-full md:w-4/12 px-4"> <h4 class="text-3xl font-semibold">Let's keep in touch!</h4> <h5 class="text-lg mt-0 mb-2 text-gray-700">Find us on any of these platforms.</h5> <div class="mt-6"> <a href="https://www.twitter.com/creativetim" target="_blank"> <i class="fab fa-twitter bg-white text-blue-400 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-blue-600 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-pink-400 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-gray-900 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> <p class="text-sm mt-6 text-gray-600 font-semibold"> All snippets released under <a href="https://github.com/creativetimofficial/bits/blob/master/LICENSE.md" class="text-gray-700" target="_blank">MIT License</a>. </p> </div> </div> <hr class="my-6 border-gray-400"> <div class="flex flex-wrap items-center md:justify-between justify-center"> <div class="w-full md:w-8/12 px-4 mx-auto text-center"> <div class="text-sm text-gray-600 font-semibold py-1"> 漏 <script> document.write(new Date().getFullYear()) </script> <a href="https://www.creative-tim.com/" class="text-gray-800 hover:text-gray-900" target="_blank">Creative Tim</a>, all rights reserved. Made with <span class="text-red-600"><i class="fa fa-heart"></i></span> for a better web. </div> </div> </div> </div> </footer> <script> function toggleNavbar(collapseID) { document.getElementById(collapseID).classList.toggle("hidden"); document.getElementById(collapseID).classList.toggle("block"); } </script> <script> document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); </script> </body> </html>

CINXE.COM

Bits by Creative Tim - Code Snippets for easier coding