nwebpro

import React, { useState } from 'react';
import { Link, NavLink } from 'react-router-dom';
import logo from '../assets/images/Logo.svg';

const Header = () => {
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    return (
        <div className="bg-themeBlue-40 h-[80px]">
            <div className="px-4 py-4 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
                <div className="relative flex items-center justify-between">

nwebpro

/*    /index.html   200

nwebpro

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

import React from 'react';
import { RouterProvider } from 'react-router-dom';
import { router } from './Routes';

const App = () => {
    return (
        <div>
            <RouterProvider router={router} />
        </div>
    );

nwebpro

yarn add -D @tailwindcss/forms

nwebpro

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

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

unfinished_memory/
  node_modules/
  public/
  src/
    Components/
    Constants/
    Context/
    Hooks/
    Layout/
    Pages/

nwebpro

/* 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) {

nwebpro

<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: {