Last active
February 3, 2023 16:19
-
-
Save nabily4e-dev/82c642e7a5097b5d929c1fa1e998f935 to your computer and use it in GitHub Desktop.
An attempt: HTML TailwinCSS nav
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" | |
| integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" /> | |
| <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| <title>Movie</title> | |
| <!-- <script src="https://cdn.tailwindcss.com"></script> --> | |
| </head> | |
| <body> | |
| <nav class="flex justify-between items-center bg-white shadow-lg p-6"> | |
| <a class="navbar-brand text-2xl font-bold" href="#">Movie Database</a> | |
| <div class="flex"> | |
| <div class="relative"> | |
| <button class="text-gray-600 dropdown-toggle focus:outline-none"> | |
| Movies | |
| <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" | |
| xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> | |
| </svg> | |
| </button> | |
| <div class="absolute right-0 w-48 mt-2 origin-top-right rounded-md shadow-lg"> | |
| <div class="bg-white rounded-md shadow-xs"> | |
| <div class="py-1"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sci-Fi</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Comedy</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Romance</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Thriller</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Drama</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Horror</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Adventure</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Animation</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Fantasy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <a class="px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900" href="#">Actors</a> | |
| <a class="px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900" href="#">About</a> | |
| <form class="ml-4 relative"> | |
| <input | |
| class="form-input w-32 h-10 pl-10 pr-4 text-sm text-gray-600 placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300" | |
| type="text" placeholder="Search" aria-label="Search" /> | |
| <button class="absolute right-0 top-0 mt-2 mr-4"> | |
| <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" | |
| xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path> | |
| </svg> | |
| </button> | |
| </form> | |
| <div class="ml-4 relative"> | |
| <button class="text-gray-600 focus:outline-none"> | |
| Filter | |
| <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" | |
| xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> | |
| </svg> | |
| </button> | |
| <div class="absolute right-0 w-48 mt-2 origin-top-right rounded-md shadow-lg"> | |
| <div class="bg-white rounded-md shadow-xs"> | |
| <div class="py-1"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Popular</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Release Date</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Top Rated</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Now Playing</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Upcoming</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="container"></div> | |
| <script type="text/javascript" src="script.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment