create-react-vtw/templates/src/App.jsx

CLI pour créer un projet ReactJs + ViteJs + Tailwind CSS v4.1

export default function App() {
  return (
    <section className="w-full h-full bg-white flex flex-col items-center py-8 px-[20px] md:px-[50px] xl:px-[200px] font-comfortaa">
      <div className="flex flex-col items-center mt-18">
        <h1 className=" text-[2rem] md:text-[2rem] text-center font-urbanist">
          <span>Welcome to my React.js, Vite.js + Tailwind CSS starter</span>
        </h1>
        <p className="text-lg mt-4 w-[70%] md:w-[50%] lg:w-[70%] text-center font-light">
          This starter was designed for developers who want to save time. <span className="underline decoration-2 decoration-pink-500">Vite.js</span> for ultra-fast builds, <span className="underline decoration-2 decoration-sky-500">React.js</span> for a high-performance interface and <span className="underline decoration-2 decoration-sky-500">Tailwind CSS</span> for a flexible and modern design.
        </p>
      </div>

      <div className="mt-8 flex flex-wrap justify-center gap-4">
        <div className="flex flex-col p-4 rounded-xl border-5 border-[#EFEFEF] max-w-[500px] md:w-[300px] lg:w-[400px]">
          <h2 className="text-xl font-urbanist">React.js</h2>
          <p className="mt-2 font-light">
            React.js, the essential JavaScript library for building dynamic and responsive user interfaces.
          </p>
          <a
            href="https://react.dev/learn/installation"
            target="_blank"
            className="mt-4 text-primary font-semibold text-sky-500"
          >
            Follow the course
          </a>
        </div>

        <div className="flex flex-col p-4 rounded-xl border-5 border-[#EFEFEF] max-w-[500px] md:w-[300px] lg:w-[400px]">
          <h2 className="text-xl font-urbanist">Vite.js</h2>
          <p className="mt-2 font-light">
            Vite.js offers instant startup and ultra-fast hot reloading. Perfect for modern development.
          </p>
          <a
            href="https://vite.dev/guide/"
            target="_blank"
            className="mt-4 text-primary font-semibold text-sky-500"
          >
            Read the documentation
          </a>
        </div>

        <div className="flex flex-col p-4 rounded-xl border-5 border-[#EFEFEF] max-w-[500px] md:w-[300px] lg:w-[400px]">
          <h2 className="text-xl font-urbanist">Tailwind CSS v4</h2>
          <p className="mt-2 font-light">
            Tailwind CSS offers a utilitarian approach to quickly creating elegant and responsive designs.
          </p>
          <a
            href="https://tailwindcss.com/docs/installation/tailwind-cli"
            target="_blank"
            className="mt-4 text-primary font-semibold text-sky-500"
          >
            Read the documentation
          </a>
        </div>

        <div className="flex flex-col p-4 rounded-xl border-5 border-[#EFEFEF] max-w-[500px] md:w-[300px] lg:w-[400px]">
          <h2 className="text-xl font-urbanist">Créateur</h2>
          <p className="mt-2 font-light">
            This starter was created by <a href="https://julesmukadi.me/" target="_blank" className="underline decoration-2 decoration-sky-500">Jules MUKADI</a>. Find the full source code and contribute on my GitHub.
          </p>
          <a
            href="https://github.com/2MJ-DEV/ultimate-stack-workshop/tree/main/Node/create-react-vtw"
            target="_blank"
            className="mt-4 text-primary font-semibold  text-sky-500"
          >
            View on GitHub
          </a>
        </div>
      </div>
    </section>
  );
};