A responsive navbar with Dropdowns using AlpineJS and Heroicons build in the TailwindCSS Playground alpinenavbarbarnavdropdownstailwindtailwindcssalpinejstailwindcss-playground UpdatedDec 5, 2022 HTML Create responsive navbar with React Js. This navbar is responsive which means you can also use th...
CSS / Tailwind (For styling) Setup & Installation Clone the repository: git clone https://github.com/yourusername/Navbar-using-react-router.git cd Navbar-using-react-router Install dependencies: npm install Start the development server: npm run dev Open http://localhost:5173/ in your bro...
@tailwind components; @tailwind utilities; @tailwind utilities; /* added font */ body{ font-family: 'Roboto', sans-serif; } 4 changes: 1 addition & 3 deletions 4 src/main.jsx Original file line numberDiff line numberDiff line change @@ -2,9 +2,7 @@ import React from 'react'...
"eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", "postcss": "^8.4.38", "tailwindcss": "^3.4.3", "vite": "^5.2.0" } } 6 changes: 6 additions & 0 deletions 6 postcss.config.js Original file line...
"@tailwindcss/typography": "^0.5.12", "autoprefixer": "^10.4.13", "body-scroll-lock": "^4.0.0-beta.0", "contentlayer2": "0.4.6", "esbuild": "0.20.2", "github-slugger": "^2.0.0", 8 changes: 8 additions & 0 deletions 8 yarn.lock Original file line numberDiff line ...
1 1 import type { Config } from "tailwindcss"; 2 + const flowbite = require("flowbite-react/tailwind"); 2 3 3 4 const config: Config = { 4 5 content: [ 6 + // "./node_modules/flowbite-react/lib/**/*.js", 5 7 "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", ...
extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {} function Badge({ className, variant, ...props }: BadgeProps) { return ( <div className={cn(badgeVariants({ variant }), className)} {...props} /> ) } export { Badge, badgeVariants } Loading Oops, some...
package-lock.json package.json postcss.config.js tailwind.config.js vite.config.js Latest commit 7 people Ver 1.0.0 (#82) Nov 8, 2024 cfcba76·Nov 8, 2024 History History File metadata and controls 51 lines (44 loc) · 2.04 KB Raw...
import { CommandIcon, Menu } from "lucide-react"; import Link from "next/link"; import Anchor from "./anchor"; import { Button } from "./ui/button"; export default function Navbar() { return ( <nav className="top-0 sticky z-40 bg-inherit"> <div className="h-24 ...
Create the best, most practical, and most convenient site navigation with our free Bootstrap navbar templates. You know anavigation baror menu is an essential—AND A MUST—part of your website. But you don’t need to make it from scratch. Save TIME and MONEY!