Skip to content

Instantly share code, notes, and snippets.

View nwebpro's full-sized avatar
:octocat:
Working from home

Naeem nwebpro

:octocat:
Working from home
View GitHub Profile
@nwebpro
nwebpro / ActiveLink
Created April 1, 2024 08:29
Header Active Link In JavaScript
<div className="relative isolate space-y-5 overflow-hidden rounded-2xl bg-[#0000008a] dark:bg-white/5 p-4 shadow-xl shadow-black/5 before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:border-t before:border-rose-100/10 before:bg-gradient-to-r before:from-transparent before:via-rose-100/10 before:to-transparent" key={ i }>
<div className="h-[200px] rounded-lg bg-rose-100/10"></div>
<div className="space-y-3">
<div className="h-3 w-3/5 rounded-lg bg-rose-100/10"></div>
<div className="h-3 w-4/5 rounded-lg bg-rose-100/20"></div>
<div className="h-3 w-2/5 rounded-lg bg-rose-100/20"></div>
</div>
</div>
extend: {
/* eslint-disable react/prop-types */
import { createContext, useEffect, useState } from "react";
export const ThemeContext = createContext()
const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light')
useEffect(() => {
if (localStorage.getItem('theme') === null) {
unfinished_memory/
node_modules/
public/
src/
Components/
Constants/
Context/
Hooks/
Layout/
Pages/
Website Link - https://scrollrevealjs.org/
// Activation Code
ScrollReveal({reset: true,distance: '60px',duration: 1500, delay: 200})
// With Interval Animation
ScrollReveal().reveal('.winbridge_left_animation_with_interval', {delay: 200, origin: 'left', interval: 200})
ScrollReveal().reveal('.winbridge_right_animation_with_interval', {delay: 200, origin: 'right', interval: 200})
ScrollReveal().reveal('.winbridge_bottom_animation_with_interval', {delay: 200, origin: 'bottom', interval: 200})
@nwebpro
nwebpro / Login.jsx
Last active October 16, 2022 14:37
Login and Sign Up Form
import React from 'react';
import { Link } from 'react-router-dom';
const Login = () => {
return (
<div className="w-full mx-auto max-w-md rounded-xl border border-[#95A0A7] p-11 my-24">
<h1 className="text-2xl font-bold text-center">Login</h1>
<form novalidate="" action="" className="space-y-6 ng-untouched ng-pristine ng-valid">
<div className="space-y-1 text-sm">
<label htmlFor="email" className="block dark:text-gray-400">Email</label>
@nwebpro
nwebpro / Tailwind Form Install Command
Last active October 15, 2022 08:16
Tailwind Config file setup
yarn add -D @tailwindcss/forms
@nwebpro
nwebpro / App.js
Last active October 15, 2022 08:57
React Route File Create
import React from 'react';
import { RouterProvider } from 'react-router-dom';
import { router } from './Routes';
const App = () => {
return (
<div>
<RouterProvider router={router} />
</div>
);
@nwebpro
nwebpro / ErrorPage.jsx
Created October 15, 2022 07:21
React Error Page
import React from 'react';
import { Link } from 'react-router-dom';
const ErrorPage = () => {
return (
<section className="flex items-center h-screen p-16 dark:bg-gray-900 dark:text-gray-100">
<div className="container flex flex-col items-center justify-center px-5 mx-auto my-8">
<div className="max-w-md text-center">
<h2 className="mb-8 font-extrabold text-9xl dark:text-gray-600">
<span className="sr-only">Error</span>404
@nwebpro
nwebpro / public > _redirects
Last active January 3, 2024 12:27
React Project Deploy 404 Not Found
/* /index.html 200