Composants Aller au lien de contenu Aller au composant de lien de contenu - Skeuomorphisme en niveaux de gris

Aller au composant de lien de contenu - Skeuomorphisme en niveaux de gris

Un lien simple et réactif « Skip to Content » avec un design skeuomorphique en niveaux de gris pour le contenu du blog. Inclut la prise en charge du mode sombre.

Aperçu

HTML Code

<a href="#main-content" class="skip-to-content-link sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:bg-gray-200 focus:text-gray-900 focus:px-4 focus:py-2 focus:rounded focus:shadow-lg dark:focus:bg-gray-700 dark:focus:text-gray-100 dark:focus:shadow-xl">Skip to content</a>

<main id="main-content" class="p-4">
  <!-- Your main content goes here -->
  <h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Main Content Area</h1>
  <p class="text-gray-700 dark:text-gray-300">This is the main content of the page. The "Skip to content" link will bring you here.</p>
</main>

Composants associés

Aller au lien de contenu

Composant de lien aligné sur les principes de Material Design, avec une conception réactive, la prise en charge du mode sombre et une palette de couleurs monochromatique simple pour les applications de médias sociaux.

Ouvrir

Aller au composant de lien de contenu

Un composant Web qui fournit un lien « Passer au contenu » de style 3D avec des effets réactifs et la prise en charge du thème sombre, à l’aide de Tailwind CSS.

Ouvrir

Aller au lien de contenu

Un composant de lien Skip to Content avec un style de conception Neumorphism, une palette de couleurs triadique et une mise en page complexe pour les blogs et les sites Web de contenu. Il inclut un design réactif et la prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir