Google Keep Navigation Clone (Interactive Example)

google-keep-navigation-clone-interactive-example.markdown

Google Keep Navigation Clone (Interactive Example)

Google Keep navigation bar clone built with tailwindcss

A Pen by Mesut Koca on CodePen.

License.

index.html

<div class="app min-h-screen bg-grey-lighter font-sans flex flex-col">

  <div class="header-wrap bg-brand">

    <header class="px-2 py-1 sm:px-4 sm:py-2 flex items-center">

      <button class="hamburger hover:bg-dark rounded-full px-3 flex items-center h-12">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
          <line x1="3" y1="12" x2="21" y2="12" />
          <line x1="3" y1="6" x2="21" y2="6" />
          <line x1="3" y1="18" x2="21" y2="18" />
        </svg>
      </button>

      <div class="brand px-1 flex items-center h-12 text-2xl ml-4">
        <span class="font-medium hidden sm:inline">Google</span>
        <span class="ml-2">Keep</span>
      </div>

      <div class="wrap ml-auto md:ml-8 flex items-end md:justify-between md:flex-1">

        <form class="search-wrap md:flex-1 md:max-w-md">
          <div class="search flex items-center bg-transparent md:bg-dark rounded overflow-hidden">

            <button class="text-yellow-darker hover:text-black px-3 flex items-center flex-no-shrink h-12 text-sm px-4 rounded" type="button">
              <svg class="fill-current" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"></path>
              </svg>
            </button>

            <input class="hidden md:flex appearance-none bg-transparent border-none w-full h-12 rounded px-3" type="text" placeholder="Search..."
              aria-label="Search">

            <button class="search__clean hidden md:flex flex-no-shrink h-12 px-4 rounded" type="button">
              <svg class="fill-current" focusable="false" height="24px" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
                <path d="M0 0h24v24H0z" fill="none"></path>
              </svg>
            </button>
          </div>
        </form>


        <div class="tools md:ml-8 flex">
          <button class="tools__refresh px-3 flex items-center h-12 text-yellow-darker hover:text-black">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
              stroke-linecap="round" stroke-linejoin="round" class="feather feather-rotate-ccw">
              <polyline points="1 4 1 10 7 10" />
              <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" />
            </svg>
          </button>
          <button class="tools__viewtype px-3 hidden sm:flex items-center h-12 text-yellow-darker hover:text-black">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="22" viewBox="0 0 24 24" fill="currentColor" class="feather feather-server">
              <rect x="2" y="2" width="20" height="8" rx="2" ry="2" />
              <rect x="2" y="12" width="20" height="8" rx="2" ry="2" />
            </svg>
          </button>
        </div>

      </div>

      <div class="auth flex items-center lg:ml-8">
        <button class="auth__apps hidden lg:flex px-3 items-center h-12 text-yellow-darker hover:text-black">
          <svg class="fill-current" width="18" viewBox="0 0 896 896">
            <path d="M224 0H32C12.8 0 0 12.8 0 32v192c0 19.2 12.8 32 32 32h192c19.2 0 32-12.8 32-32V32c0-19.2-12.8-32-32-32zm0 320H32c-19.2 0-32 12.8-32 32v192c0 19.2 12.8 32 32 32h192c19.2 0 32-12.8 32-32V352c0-19.2-12.8-32-32-32zM544 0H352c-19.2 0-32 12.8-32 32v192c0 19.2 12.8 32 32 32h192c19.2 0 32-12.8 32-32V32c0-19.2-12.8-32-32-32zm0 320H352c-19.2 0-32 12.8-32 32v192c0 19.2 12.8 32 32 32h192c19.2 0 32-12.8 32-32V352c0-19.2-12.8-32-32-32zM864 0H672c-19.2 0-32 12.8-32 32v192c0 19.2 12.8 32 32 32h192c19.2 0 32-12.8 32-32V32c0-19.2-12.8-32-32-32zm0 320H672c-19.2 0-32 12.8-32 32v192c0 19.2 12.8 32 32 32h192c19.2 0 32-12.8 32-32V352c0-19.2-12.8-32-32-32zM224 640H32c-19.2 0-32 12.8-32 32v192c0 19.2 12.8 32 32 32h192c19.2 0 32-12.8 32-32V672c0-19.2-12.8-32-32-32zm320 0H352c-19.2 0-32 12.8-32 32v192c0 19.2 12.8 32 32 32h192c19.2 0 32-12.8 32-32V672c0-19.2-12.8-32-32-32zm320 0H672c-19.2 0-32 12.8-32 32v192c0 19.2 12.8 32 32 32h192c19.2 0 32-12.8 32-32V672c0-19.2-12.8-32-32-32z"
            />
          </svg>
        </button>
        <button class="auth__notifications hidden lg:flex px-3 items-center h-12 text-yellow-darker hover:text-black">
          <svg class="fill-current" width="18" viewBox="0 0 1052 1200">
            <path d="M479 0h94q20 0 29 10.5t3 29.5l-18 37q83 19 144 82.5T807 300l63 327 118 173h17q19 0 33 14.5t14 35-13 40.5-31 27q-8 4-23 9.5T920 946t-103 25-132.5 20-158.5 9q-57 0-115-5t-104-12-88.5-15.5T145 950t-54.5-16T55 922l-11-4q-18-8-31-28T0 849.5t14-35T47 800h17l118-173 63-327q15-77 76-140t144-83l-18-32q-6-19 3.5-32T479 0zm-55 1090q50 6 102 6 53 0 102-6-12 49-39.5 79.5T526 1200t-63-30.5-39-79.5z"
            />
          </svg>
        </button>
        <div class="auth__account w-8 mx-3 cursor-pointer">
          <img class="" src="https://avatars3.githubusercontent.com/u/342666?s=460&v=4" alt="">
        </div>
      </div>

    </header>

  </div><!--#Header-->

  <div class="viewport-things p-8">
  
    <div class="mb-8">
      <h3 class="text-grey-darkest leading-normal"> ⚠️ Interactive Example</h3>
      <p>Resize your browser(horizontally) to see it in action.</p>
    </div>
    
    <span class="text-grey-darkest font-medium">Current Screen Size</span>

    <ul class="flex list-reset mb-4 mt-1">
      <li class="bg-green-light sm:bg-transparent px-2 py-1">
        MOBILE
      </li>
      <li class="sm:bg-green-light md:bg-transparent px-2 py-1">
        SMALL
      </li>
      <li class="md:bg-green-light lg:bg-transparent px-2 py-1">
        MEDIUM
      </li>
      <li class="lg:bg-green-light bg-transparent px-2 py-1">
        LARGE
      </li>
    </ul>

    <span class="text-grey-darkest font-medium ">Current Things in Viewport</span>
    
    <ul class="list-reset mt-1">
      <li>
        <code class="bg-green sm:bg-red w-4 h-4 bg-red inline-block rounded"></code>Small Padding
      </li>

      <li>
        <code class="sm:bg-green w-4 h-4 bg-red inline-block rounded"></code>Large Padding
      </li>

      <li>
        <code class="bg-green w-4 h-4 bg-red inline-block rounded"></code>Hamburger
      </li>

      <li>
        <code class="sm:bg-green w-4 h-4 bg-red inline-block rounded"></code>Google
      </li>

      <li>
        <code class="bg-green w-4 h-4 bg-red inline-block rounded"></code>Keep
      </li>

      <li>
        <code class="md:bg-green w-4 h-4 bg-red inline-block rounded"></code>Search Bar (input)
      </li>

      <li>
        <code class="md:bg-red w-4 h-4 bg-green inline-block rounded"></code>Search Button
      </li>

      <li>
        <code class="w-4 h-4 bg-green inline-block rounded"></code>Refresh Button
      </li>

      <li>
        <code class="sm:bg-green w-4 h-4 bg-red inline-block rounded"></code>View Type Button
      </li>

      <li>
        <code class="lg:bg-green w-4 h-4 bg-red inline-block rounded"></code>Apps Button
      </li>

      <li>
        <code class="lg:bg-green w-4 h-4 bg-red inline-block rounded"></code>Notifications
      </li>

      <li>
        <code class="w-4 h-4 bg-green inline-block rounded"></code>Avatar
      </li>

    </ul>
  </div><!--#Viewport Things-->

  <footer class="mt-auto px-8 py-4 text-center">
    Built with <a href="https://tailwindcss.com/" class="no-underline font-medium text-black">tailwindcss</a> and ❤️by <a href="https://mesutkoca.com/" class="no-underline font-medium text-black">Mesut Koca</a>.
  </footer>
  
</div>

style.css

/* 
⚠️
colors could be added to tailwind.js config file 
*/

.bg-brand{
  background: rgb(255, 187, 0);
}
.bg-dark{
  background: rgba(0,0,0,.08);
}
.hover\:bg-dark:hover{
  background: rgba(0,0,0,.08);
}
@media (min-width: 768px){
  
  .md\:bg-dark{
    background: rgba(0,0,0,.08);
  }
  /* some interactivity */
  .search{
    transition: all .3s;
  }
  .search:hover{
    background: #ffffff;
    color: #000;
  }
  .search__clean{
    opacity:0;
    transition: all .3s;
  }
  .search:hover .search__clean{
    opacity: 1;
  }
  
}

/* some resets */
:focus{
  outline:none!important;
  border:none;
}

styles

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet" />