LS
lazarous sinkololwe

Styled Container - Copy this React, Mui Component to your project

Import React from "react"; import { BrowserRouter as Router, Link } from "react router dom"; import { FaLock } from "react icons/fa"; const AccessDenied = () => { return ( <Router> <div className="min h screen bg gray 50 flex items center justify center px 4 py 12"> <div className="max w md w full space y 6 text center"> <div className="space y 3"> <div className="flex justify center"> <FaLock className="h 12 w 12 text gray 600" aria hidden="true" /> </div> <h1 className="text 3xl font bold text gray 800 tracking tight" aria label="Access Denied" > 403 Forbidden </h1> <div className="mt 2 text base text gray 600" role="alert" aria live="polite" > <p className="mb 2"> Sorry, but you don"t have permission to access this page. </p> <p> Please contact your administrator if you believe this is a mistake. </p> </div> </div> <div className="mt 6"> <Link to="/" className="inline flex items center justify center px 6 py 2 border border transparent text sm font medium rounded md text white bg gray 600 hover:bg gray 700 focus:outline none focus:ring 2 focus:ring offset 2 focus:ring gray 500 transition colors duration 200 ease in out" role="button" aria label="Return to homepage" > Return to Home Page </Link> </div> <div className="mt 4 text xs text gray 400"> <p>Error Code: 403 | Access Denied</p> </div> </div> </div> </Router> ); }; export default AccessDenied; convert to MUI

Prompt
Component Preview

About

StyledContainer - A responsive, user-friendly access denied page featuring a lock icon, error message, and a return button, built wit. Free code available!

Share

Last updated 1 month ago