Skip to content

Instantly share code, notes, and snippets.

@saminwankwo

saminwankwo/gist:efab5e8af15fcc6e8ba6cc351b28cd44

Created August 4, 2024 10:40
Show Gist options
  • Save saminwankwo/efab5e8af15fcc6e8ba6cc351b28cd44 to your computer and use it in GitHub Desktop.
Save saminwankwo/efab5e8af15fcc6e8ba6cc351b28cd44 to your computer and use it in GitHub Desktop.
Download ZIP
Create sticky navbar
Raw
gistfile1.txt
// src/components/Navbar.js
import React from 'react';
const Navbar = () => {
return (
<nav className="bg-blue-600 sticky top-0 z-50 shadow-md">
<div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
<div className="relative flex items-center justify-between h-16">
<div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
{/* Mobile menu button */}
<button
type="button"
className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
aria-controls="mobile-menu"
aria-expanded="false"
>
<span className="sr-only">Open main menu</span>
{/* Icon when menu is closed */}
<svg
className="block h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16m-7 6h7"
/>
</svg>
{/* Icon when menu is open */}
<svg
className="hidden h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
<div className="flex-shrink-0">
<h1 className="text-white font-bold text-xl">My Navbar</h1>
</div>
<div className="hidden sm:block sm:ml-6">
<div className="flex space-x-4">
<a href="#" className="text-gray-300 hover:bg-blue-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="#" className="text-gray-300 hover:bg-blue-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
<a href="#" className="text-gray-300 hover:bg-blue-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Services</a>
<a href="#" className="text-gray-300 hover:bg-blue-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
</div>
</div>
</div>
</div>
</div>
</nav>
);
};
export default Navbar;
Raw
gistfile2.txt
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
.carousel-wrapper {
max-width: 800px;
margin: 20px auto;
}
Raw
gistfile3.txt
// src/App.js
import React from 'react';
import Navbar from './components/Navbar';
import CarouselComponent from './components/CarouselComponent';
import './index.css'; // Ensure Tailwind CSS is imported
function App() {
return (
<div className="App">
<Navbar />
<CarouselComponent />
{/* Your other components go here */}
</div>
);
}
export default App;
Raw
gistfile4.txt
// npm install react-responsive-carousel
// src/components/CarouselComponent.js
import React from 'react';
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';
const CarouselComponent = () => {
return (
<div className="carousel-wrapper">
<Carousel showArrows={true} autoPlay={true} infiniteLoop={true}>
<div>
<img src="https://via.placeholder.com/800x400" alt="Slide 1" />
<p className="legend">Slide 1</p>
</div>
<div>
<img src="https://via.placeholder.com/800x400" alt="Slide 2" />
<p className="legend">Slide 2</p>
</div>
<div>
<img src="https://via.placeholder.com/800x400" alt="Slide 3" />
<p className="legend">Slide 3</p>
</div>
</Carousel>
</div>
);
};
export default CarouselComponent;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment