Floating Menu

floating-menu.markdown

Floating Menu

A Pen by Cain on CodePen.

License.

index.html

<div class="flex h-16 mx-2 my-2 bg-gradient-to-r from-blue-800 to-blue-600 rounded-md shadow-xl" style="max-width: 1000px;">
  <a href="#home" class="flex ml-2 my-2 items-center px-4 h-100 font-semibold text-lg text-white select-none">Cain Hill</a>
  <div class="flex items-center">
    <a href="#home" class="flex items-center my-2 ml-2 px-2 h-10 font-medium text-white text-opacity-50 hover:text-opacity-80">Home</a>
    <a href="#blog" class="flex items-center my-2 ml-2 px-2 h-10 font-medium text-white text-opacity-50 hover:text-opacity-80">Blog</a>
    <a href="#about" class="flex items-center my-2 ml-2 px-2 h-10 font-medium text-white text-opacity-50 hover:text-opacity-80">About</a>
    <a href="#projects" class="flex items-center my-2 ml-2 px-2 h-10 font-medium text-white text-opacity-50 hover:text-opacity-80">Projects</a>
  </div>
  <div class="flex items-center flex-1">
    <a href="#cv" class="flex ml-auto mr-4 bg-white bg-opacity-90 hover:bg-opacity-100 px-5 font-medium rounded-3xl h-9 items-center">Download My CV</a>
  </div>
</div>

scripts

<script src="https://cdn.tailwindcss.com"></script>