Publié le 26.08.2024

Template Tailwind CSS gratuit pour votre page de maintenance

Informez vos visiteurs lorsque vous placez votre site en maintenance avec ce template gratuit. Il s'adapte à tous les appareils (responsive design) grâce à l'utilisation du framework Tailwind CSS.

Ajouter Tailwind CSS à votre projet

Pour compiler le fichier CSS associé à la page de maintenance, vous aurez besoin de l'utilitaire en ligne de commande de Tailwind CSS. Pour l'installer, utilisez les commandes suivantes dans le dossier souhaité, dans cet exemple, il s'agit du dossier dev/maintenance qui se trouve dans mon profil utilisateur :

cd ~/dev/maintenance
npm install -D tailwindcss # Installer l'utilitaire Tailwind
npx tailwindcss init # Initialiser la configuration de Tailwind

Configurer Tailwind CSS

Une fois l'installation et l'initialisation terminées, ouvrez le fichier de configuration tailwind.config.js puis éditez la configuration :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

La propriété content indique à Tailwind quels fichiers doivent être analysés pour identifier les classes à compiler le fichier CSS final. Dans cet exemple, l'utilitaire analysera tous les fichiers contenus dans le dossier et qui ont l'extension .html ou .js.

Créez ensuite un fichier CSS source.css et ajoutez-y les directives Tailwind de base ainsi que les classes partagées :

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .social-btn {
    @apply rounded-md bg-sky-500 p-1.5 text-white hover:bg-sky-600;
  }
}

Code HTML

Créez un fichier HTML, puis ajoutez-y le code ci-dessous. Les différentes images utilisées dans le template sont directement intégrées au format SVG.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Site web en maintenance</title>
    <link href="./maintenance.css" rel="stylesheet" />
  </head>
  <body>
    <div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
      <div class="relative bg-white px-6 pb-8 pt-10 shadow-xl shadow-gray-500/5 ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
        <div class="mx-auto max-w-md">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" class="mb-8">
            <path fill="currentColor" d="m8.914 24.5l4.257-4.257l-1.414-1.414L7.5 23.086l-.793-.793a1 1 0 0 0-1.414 0l-4 4a1 1 0 0 0 0 1.414l3 3a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0 0-1.414ZM5 28.586L3.414 27L6 24.414L7.586 26Z" />
            <path fill="currentColor" d="M24 30a6.007 6.007 0 0 1-6-6a5.8 5.8 0 0 1 .21-1.547L9.548 13.79A6 6 0 0 1 8 14a5.976 5.976 0 0 1-5.577-8.184l.558-1.421l3.312 3.312a1.023 1.023 0 0 0 1.414 0a1 1 0 0 0 0-1.414L4.393 2.979l1.423-.557A5.977 5.977 0 0 1 14 8a5.8 5.8 0 0 1-.21 1.547l8.663 8.663A6 6 0 0 1 24 18a5.976 5.976 0 0 1 5.577 8.184l-.557 1.421l-3.313-3.312a1.023 1.023 0 0 0-1.413 0a1 1 0 0 0-.001 1.414l3.313 3.313l-1.422.558A6 6 0 0 1 24 30M10.063 11.476l10.46 10.462l-.239.609a3.975 3.975 0 0 0 3.466 5.445l-.871-.87a3 3 0 0 1 0-4.243a3.07 3.07 0 0 1 4.243 0l.87.871a3.976 3.976 0 0 0-5.446-3.466l-.609.239l-10.46-10.46l.24-.61A3.976 3.976 0 0 0 8.25 4.008l.87.87a3 3 0 0 1 0 4.243a3.07 3.07 0 0 1-4.243 0l-.87-.871a3.975 3.975 0 0 0 5.445 3.466Z" />
            <path fill="currentColor" d="M29.123 2.85a3.07 3.07 0 0 0-4.243 0l-7.48 7.48l1.414 1.414l7.48-7.48a1.024 1.024 0 0 1 1.414 0a1 1 0 0 1 0 1.414l-7.48 7.48l1.414 1.415l7.48-7.48a3.003 3.003 0 0 0 0-4.243" />
          </svg>
          <div class="text-xl font-semibold">Maintenance en cours</div>
          <div class="divide-y divide-gray-300/50">
            <div class="pb-8 text-base leading-7 text-gray-600">
              <p> Notre site web est actuellement en maintenance et sera de retour bientôt ! Merci pour votre compréhension. </p>
            </div>
            <div class="space-y-2 pt-8">
              <p class="text-base font-semibold leading-7 text-gray-900"> Retrouvez-nous sur les réseaux sociaux </p>
              <div class="flex flex-row flex-wrap items-center gap-2.5">
                <a href="#facebook" class="social-btn">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" width="20" height="32" viewBox="0 0 320 512">
                    <path fill="currentColor" d="M80 299.3V512h116V299.3h86.5l18-97.8H196v-34.6c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4.4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8z" />
                  </svg>
                </a>
                <a href="#instagram" class="social-btn">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" width="28" height="32" viewBox="0 0 448 512">
                    <path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9S287.7 141 224.1 141m0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7s74.7 33.5 74.7 74.7s-33.6 74.7-74.7 74.7m146.4-194.3c0 14.9-12 26.8-26.8 26.8c-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8s26.8 12 26.8 26.8m76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9c-26.2-26.2-58-34.4-93.9-36.2c-37-2.1-147.9-2.1-184.9 0c-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9c1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0c35.9-1.7 67.7-9.9 93.9-36.2c26.2-26.2 34.4-58 36.2-93.9c2.1-37 2.1-147.8 0-184.8M398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6c-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6c-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6c29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6c11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1" />
                  </svg>
                </a>
                <a href="#linkedin" class="social-btn">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" width="28" height="32" viewBox="0 0 448 512">
                    <path fill="currentColor" d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3M447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2c-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3c94 0 111.28 61.9 111.28 142.3V448z" />
                  </svg>
                </a>
                <a href="#tiktok" class="social-btn">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" width="28" height="32" viewBox="0 0 448 512">
                    <path fill="currentColor" d="M448 209.91a210.06 210.06 0 0 1-122.77-39.25v178.72A162.55 162.55 0 1 1 185 188.31v89.89a74.62 74.62 0 1 0 52.23 71.18V0h88a121 121 0 0 0 1.86 22.17A122.18 122.18 0 0 0 381 102.39a121.43 121.43 0 0 0 67 20.14Z" />
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Compiler le fichier CSS final

Vous pouvez maintenant compiler le fichier CSS. Tailwind va analyser la source HTML pour compiler uniquement les fragments de CSS qui sont nécessaires. L'utilisation du paramètre --minify permet de minifier le fichier, réduisant ainsi sa taille :

npx tailwindcss -i ./source.css -o ./maintenance.css --minify

Vous devriez à présent disposer d'une structure de fichiers similaire.

maintenance.html
source.css
maintenance.css

Votre page de maintenance est prête à être utilisée !

Aller plus loin

Ce template est un aperçu des fonctionnalités offertes par Tailwind CSS. Pour aller plus loin, n'hésitez pas à consulter la documentation officielle (en anglais).