Coming soon
Inspiration, meet implementation.
Beautifully designed components and templates, hand-crafted using the CSS framework you already know and love.
Sign up for project updates, early previews, and to find out when it’s ready.
Coming soon
Beautifully designed components and templates, hand-crafted using the CSS framework you already know and love.
Sign up for project updates, early previews, and to find out when it’s ready.
<div id="dropdown" class="relative inline-block">
<button
@click="isOpen = true"
class="inline-flex items-center pl-6 pr-2 py-2 font-semibold text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:outline-none focus:shadow-outline active:bg-gray-900"
>
Account
<svg
class="ml-2 h-6 w-6 text-white"
fill="currentColor"
viewBox="0 0 24 24"
>
<path
d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"
/>
</svg>
</button>
<div
v-if="isOpen"
@click="isOpen = false"
class="fixed inset-0"
tabindex="-1"
></div>
<transition
enter-class="opacity-0 scale-90"
enter-active-class="ease-out transition-fastest"
enter-to-class="opacity-100 scale-100"
leave-class="opacity-100 scale-100"
leave-active-class="ease-in transition-fastest"
leave-to-class="opacity-0 scale-90"
>
<div
v-if="isOpen"
class="mt-2 absolute right-0 origin-top-right text-left"
>
<div class="w-64 bg-white rounded-lg shadow-lg">
<div class="flex items-center px-6 py-4">
<img
class="h-10 w-10 rounded-full flex-no-shrink"
src="https://images.unsplash.com/photo-1541271696563-3be2f555fc4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=1.75&w=200&h=200&q=80"
alt=""
/>
<div class="ml-4">
<p class="font-semibold text-gray-900 leading-none">
Margot Foster
</p>
<p>
<a
href="#"
class="text-sm text-gray-600 leading-none hover:underline"
>View Profile</a
>
</p>
</div>
</div>
<div class="border-t-2 border-gray-200 py-1">
<a href="#" class="block px-6 py-3 leading-tight hover:bg-gray-200"
>Settings and Privacy</a
>
<a href="#" class="block px-6 py-3 leading-tight hover:bg-gray-200"
>Language</a
>
</div>
<div class="border-t-2 border-gray-200 py-1">
<a href="#" class="block px-6 py-3 leading-tight hover:bg-gray-200"
>Advertise</a
>
<a href="#" class="block px-6 py-3 leading-tight hover:bg-gray-200"
>Analytics</a
>
</div>
<form
class="border-t-2 border-gray-200 py-1"
action="#"
method="POST"
>
<button
class="block w-full px-6 py-3 text-left leading-tight hover:bg-gray-200"
>
Sign out
</button>
</form>
</div>
</div>
</transition>
</div>
<script src="https://unpkg.com/vue@^2.6/dist/vue.min.js"></script>
<script>
new Vue({
el: '#dropdown',
data: {
isOpen: true
}
})
</script><div class="bg-gray-200" style="min-height: 640px;">
<div id="nav" class="bg-white shadow">
<div class="md:px-8">
<nav
class="relative flex flex-wrap items-center justify-between md:py-4"
>
<div class="relative z-10 flex-shrink-0 pl-4 py-4 md:p-0">
<img class="h-8 w-8" src="/img/example-logo.svg" alt="" />
</div>
<div class="flex-shrink-0 pr-4 md:hidden">
<button
ref="openButton"
@click="open"
type="button"
class="block text-gray-600 focus:outline-none focus:text-gray-900"
aria-label="Menu"
>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path
d="M3 6C3 5.44772 3.44772 5 4 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H4C3.44772 7 3 6.55228 3 6Z"
/>
<path
d="M3 12C3 11.4477 3.44772 11 4 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H4C3.44772 13 3 12.5523 3 12Z"
/>
<path
d="M4 17C3.44772 17 3 17.4477 3 18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18C21 17.4477 20.5523 17 20 17H4Z"
/>
</svg>
</button>
</div>
<div
class="hidden md:block md:ml-10 md:flex md:items-baseline md:justify-between md:bg-transparent"
>
<div class="lg:absolute inset-0 flex items-center justify-center">
<a
href="#"
class="text-sm font-medium text-gray-900 hover:text-gray-700"
>Products</a
>
<a
href="#"
class="ml-10 text-sm font-medium text-gray-900 hover:text-gray-700"
>Marketplace</a
>
<a
href="#"
class="ml-10 text-sm font-medium text-gray-900 hover:text-gray-700"
>Partners</a
>
<a
href="#"
class="ml-10 text-sm font-medium text-gray-900 hover:text-gray-700"
>About</a
>
</div>
<div class="ml-10 relative flex items-baseline">
<a
href="#"
class="text-sm font-medium text-gray-900 hover:text-gray-700"
>Log in</a
>
<a
href="#"
class="ml-8 px-3 py-2 font-medium text-center text-sm rounded-lg bg-gray-300 text-gray-900 hover:bg-gray-400 focus:outline-none focus:bg-gray-400"
>Create Account</a
>
</div>
</div>
</nav>
</div>
<div class="md:hidden">
<!-- Off-canvas menu background overlay -->
<transition
enter-class="opacity-0"
enter-active-class="ease-out transition-medium"
enter-to-class="opacity-100"
leave-class="opacity-100"
leave-active-class="ease-out transition-medium"
leave-to-class="opacity-0"
appear
>
<div v-show="isOpen" class="z-10 fixed inset-0 transition-opacity">
<div
@click="close"
class="absolute inset-0 bg-black opacity-50"
tabindex="-1"
></div>
</div>
</transition>
<!-- Off-canvas menu -->
<transition
enter-class="translate-x-full"
enter-active-class="ease-out transition-slow"
enter-to-class="translate-x-0"
leave-class="translate-x-0"
leave-active-class="ease-in transition-medium"
leave-to-class="translate-x-full"
appear
>
<div
v-show="isOpen"
class="z-10 fixed inset-y-0 right-0 max-w-xs w-full bg-white transition-transform overflow-y-auto"
>
<div class="relative z-10 bg-white">
<div
:class="isOpen ? 'block' : 'hidden'"
class="absolute top-0 right-0 p-4"
>
<button
ref="closeButton"
@click="close"
type="button"
class="text-gray-600 focus:outline-none focus:text-gray-900"
aria-label="Close"
>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path
d="M18.2929 19.7071C18.6834 20.0976 19.3166 20.0976 19.7071 19.7071C20.0976 19.3166 20.0976 18.6834 19.7071 18.2929L13.4142 12L19.7071 5.70711C20.0976 5.31658 20.0976 4.68342 19.7071 4.29289C19.3166 3.90237 18.6834 3.90237 18.2929 4.29289L12 10.5858L5.70711 4.29289C5.31658 3.90237 4.68342 3.90237 4.29289 4.29289C3.90237 4.68342 3.90237 5.31658 4.29289 5.70711L10.5858 12L4.29289 18.2929C3.90237 18.6834 3.90237 19.3166 4.29289 19.7071C4.68342 20.0976 5.31658 20.0976 5.70711 19.7071L12 13.4142L18.2929 19.7071Z"
/>
</svg>
</button>
</div>
<div class="px-4 pt-4 pb-6">
<img class="h-8 w-8" src="/img/example-logo.svg" alt="" />
<a
href="#"
class="mt-8 block text-xs font-semibold text-gray-600 uppercase tracking-wider"
>Products</a
>
<a
href="#"
class="mt-4 block font-medium text-gray-900 hover:text-gray-700"
>Checkout</a
>
<a
href="#"
class="mt-4 block font-medium text-gray-900 hover:text-gray-700"
>Payments</a
>
<a
href="#"
class="mt-4 block font-medium text-gray-900 hover:text-gray-700"
>Billing</a
>
<a
href="#"
class="mt-4 block font-medium text-gray-900 hover:text-gray-700"
>Insights</a
>
</div>
<div class="border-t-2 border-gray-200 px-4 pt-6">
<a
href="#"
class="block font-medium text-gray-900 hover:text-gray-700"
>Marketplace</a
>
<a
href="#"
class="mt-4 block font-medium text-gray-900 hover:text-gray-700"
>Partners</a
>
<a
href="#"
class="mt-4 block font-medium text-gray-900 hover:text-gray-700"
>About</a
>
</div>
</div>
<div class="relative bg-white">
<div class="px-4 pt-4 pb-6">
<a
href="#"
class="block font-medium text-gray-900 hover:text-gray-700"
>Log in</a
>
</div>
<div class="p-4">
<a
href="#"
class="block px-3 py-3 font-medium text-center bg-gray-300 rounded-lg text-gray-900 hover:bg-gray-400 focus:outline-none focus:bg-gray-400"
>Create Account</a
>
</div>
</div>
</div>
</transition>
</div>
</div>
</div>
<script src="https://unpkg.com/vue@^2.6/dist/vue.min.js"></script>
<script>
new Vue({
el: '#nav',
data: function() {
return {
isOpen: true
}
},
methods: {
open() {
this.isOpen = true
this.$nextTick(() => {
this.$refs.closeButton.focus()
})
},
close() {
this.isOpen = false
this.$nextTick(() => {
this.$refs.openButton.focus()
})
}
},
watch: {
isOpen: {
immediate: true,
handler(isOpen) {
if (isOpen) {
document.body.style.setProperty('overflow', 'hidden')
} else {
document.body.style.removeProperty('overflow')
}
}
}
}
})
</script>