Skip to content

Instantly share code, notes, and snippets.

@cainhill

cainhill/floating-menu.markdown

Created July 16, 2023 09:55
Show Gist options
  • Save cainhill/1b98a8a31db63bc871caa37c16c4ef08 to your computer and use it in GitHub Desktop.
Save cainhill/1b98a8a31db63bc871caa37c16c4ef08 to your computer and use it in GitHub Desktop.
Download ZIP
Floating Menu
Raw
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>
Raw
scripts
<script src="https://cdn.tailwindcss.com"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment