Home Page - Copy this React, Tailwind Component to your project
Import Head from 'next/head'; import { useEffect, useState } from 'react'; export default function Home() { const [hydrated, setHydrated] = useState(false); useEffect(() => { setHydrated(true); // Ensures React re renders the DOM }, []); if (!hydrated) { return null; // Prevent mismatches during hydration } return ( <> <Head> <title>SHoNgxBoNg</title> </Head> <div className="min h screen bg gray 100 flex flex col items center justify center"> <header className="w full bg gray 800 py 4"> <h1 className="text center text white text 2xl font bold">SHoNgxBoNg</h1> </header> <main className="flex 1 w full flex flex col items center justify center"> <div className="relative text center p 8"> <h2 className="text gray 300 text 3xl md:text 5xl font bold"> Background or wallpaper about shong </h2> <div className="absolute top 16 md:top 24 left 1/2 transform translate x 1/2 bg gray 200 p 6 rounded shadow lg w 72"> <form> <div className="mb 4"> <label className="block text gray 700 font bold mb 2"> اسم المستخدم: </label> <input type="text" className="w full px 4 py 2 border rounded focus:outline none focus:ring 2 focus:ring red 500" placeholder="أدخل اسم المستخدم" /> </div> <div className="mb 4"> <label className="block text gray 700 font bold mb 2"> كلمة المرور: </label> <input type="password" className="w full px 4 py 2 border rounded focus:outline none focus:ring 2 focus:ring red 500" placeholder="أدخل كلمة المرور" /> </div> <div className="flex justify between"> <button type="submit" className="bg gray 700 text white px 4 py 2 rounded hover:bg gray 900" > دخول </button> <button type="button" className="bg blue 600 text white px 4 py 2 rounded hover:bg blue 800" > تسجيل بـ Discord </button> </div> </form> </div> </div> <section className="bg gray 700 text white w full py 8 px 4"> <h3 className="text center text 2xl font bold mb 4">نبذة عن الموقع</h3> <p className="text center leading relaxed"> نبذة عن الموقع نبذة عن الموقع نبذة عن الموقع نبذة عن الموقع نبذة عن الموقع نبذة عن الموقع نبذة عن الموقع نبذة عن الموقع. </p> </section> </main> <footer className="w full bg gray 800 py 4 text center text white"> © 2025 SHoNgxBoNg </footer> </div> </> ); }
