Navbar Transparant - Tailwind Component
Basic example of a transparent navbar over a full height background image using Tailwind CSS.
navbar
Loading component...
34 lines
<div class="w-screen h-screen">
<div
class="absolute inset-0 bg-cover bg-center" style="background-image: url(https://images.pexels.com/photos/3835/abstract.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);">
</div>
<div class="relative" id="relative">
<header>
<div class="sm:px-12 mx-auto flex items-center justify-between p-4 shadow-2xl bg-white bg-opacity-30">
<div class="flex items-center space-x-2">
<button>
<img src="https://cdn-icons-png.flaticon.com/128/3845/3845868.png" alt="Logo" class="w-10">
</button>
</div>
<nav class="flex items-center space-x-1 text-sm font-medium text-gray-800">
<button class="rounded bg-red-600 px-3 py-2 text-white transition hover:bg-red-700"> Sign Up </button>
</nav>
</div>
<div class="relative">
<div class="px-2 mx-2 py-2 sm:mx-auto my-auto max-w-7xl md:max-h-2xl md:py-6 text-center mt-32 bg-white bg-opacity-50">
<h1 class="text-4xl text-black md:text-5xl font-bold bg-white">Lorem ipsum dolor sit amet consectetura
dipisicing elit.</h1>
</div>
</div>
</header>
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
body {
font-family: 'Space Mono', monospace;
}
</style>