All components
-
Créer une storyCréer une story
17 hours ago1 -
-
plasma 2plasma 2
19 hours ago3 -
vscode a la omerlinksvscode a la omerlinks
19 hours ago5 -
about pageabout page
20 hours ago1 -
Sidebar Off canvasHow it Works: Off-Canvas Sidebar Component This component uses HTML5, Tailwind CSS, and Vanilla JavaScript to create a smooth, performant sidebar navigation. The Trigger Mechanism: The Menu Button uses an onclick="toggleSidebar()" event to trigger the opening sequence. We use a semantic <button> tag for accessibility. The UI Structure (HTML & Tailwind): Overlay (#sidebar-overlay): A fixed inset-0 div covers the entire screen with a semi-transparent black background (bg-black/50). It starts hidden and transparent (opacity-0 hidden) to prevent interaction when closed. Sidebar Panel (#sidebar-panel): Positioned with fixed top-0 left-0 h-full, it occupies the full height of the screen. Animation State: We use transform -translate-x-full to hide the panel completely off-screen to the left by default. The transition-transform duration-300 class ensures the sliding movement is smooth. The Logic (JavaScript): The toggleSidebar() function handles the state: Opening: It removes the -translate-x-full class (sliding the panel into view) and removes hidden/opacity-0 from the overlay (fading it in). Closing: It adds the classes back to reverse the animation. Crucially, it uses setTimeout(..., 300) when closing. This delays the hidden class application by 300ms, allowing the CSS fade-out animation to complete fully before the element is removed from the flow. Flexbox Layout: The panel uses flex flex-col to vertically stack the Header, Content, and Footer. The middle section has flex-1 overflow-y-auto, ensuring that if the menu items exceed the screen height, only that area scrolls while the header and footer stay pinned.
2 days ago6 -
Header and footer with Doodle design with Tailwind CSSCreative responsive header and footer with doodle patterns built with Tailwind CSS. Features animated SVG doodles, interactive CTA buttons, and Fully customizable components for web projects
2 days ago4 -
asdfasdf
3 days ago7 -
Avant & AprèsAvant & Après
4 days ago31 -
carde IptplusIptplus carde
4 days ago13 -
material ios navbar mobile apple endroidmaterial ios navbar mobile apple endroid
5 days ago10 -
nav mobile bottomnav mobile bottom
5 days ago23 -
Premium Button Collection with 12 Unique AnimationsCollection de 12 boutons premium avec animations uniques : glow, shine, slide, 3D push, neon pulse, glassmorphism, gradient border et plus. Chaque bouton a son propre effet hover. 100% Tailwind CSS, no JavaScript.
6 days ago40 -
Tailwind CSS Contact FormA clean contact form with a supporting image, built using Tailwind CSS by ReadymadeUI. Browse more free UI components and templates at readymadeui.com.
6 days ago54 -
Smooth Scale & Float RevealAn enhanced scroll interaction that combines a vertical slide with a subtle scaling effect. As elements enter the viewport, they smoothly float up and scale to their full size, creating a polished, modern depth effect without complex libraries.
1 week ago7
