Vai al collegamento al contenuto

Vai al componente Collegamento contenuto

Un componente di collegamento "Salta al contenuto" visivamente accattivante progettato per dashboard con particolare attenzione alle microinterazioni, utilizzando una combinazione di colori complementare e il supporto della modalità oscura tramite Tailwind CSS.

Apri anteprima

                <div class="relative">
    <a href="#content" class="skip-to-content block p-4 text-white bg-blue-500 transition-opacity duration-300 ease-in-out hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 dark:bg-purple-500 dark:hover:bg-purple-600 dark:focus:ring-pink-400">
        Skip to Content
    </a>
    <div class="absolute top-0 left-0 p-2 mt-2 rounded-md bg-gray-800 dark:bg-gray-900">
        <p class="text-sm text-gray-300 dark:text-gray-200">Press <span class="font-semibold">Tab</span> to focus on the link and skip to the main content.</p>
    </div>
</div>
<div id="content" class="mt-10 p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Dashboard Content</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="p-4 bg-white dark:bg-gray-900 rounded-lg shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100" alt="Data Visualization" class="w-full h-auto rounded-md">
            <p class="mt-2 text-lg font-semibold text-gray-700 dark:text-gray-300">Data Visualization 1</p>
        </div>
        <div class="p-4 bg-white dark:bg-gray-900 rounded-lg shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100" alt="Data Visualization" class="w-full h-auto rounded-md">
            <p class="mt-2 text-lg font-semibold text-gray-700 dark:text-gray-300">Data Visualization 2</p>
        </div>
    </div>
</div>

Passa al collegamento al contenuto Componente allineato ai principi di Material Design, con design reattivo, supporto per la modalità scura e una semplice combinazione di colori monocromatici per le applicazioni di social media.

Apri anteprima

                <a href="#content" class="skip-to-content block absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-full bg-blue-500 text-white p-3 transition-all duration-300 focus:translate-y-0 z-50 dark:bg-blue-700 dark:text-gray-200">Skip to content</a>

Vai al collegamento al contenuto

Un componente Salta al collegamento al contenuto con stile di progettazione Neumorfismo, una combinazione di colori triadica e un layout complesso per blog e siti Web di contenuti. Include un design reattivo e il supporto per la modalità oscura utilizzando Tailwind CSS.

Apri anteprima

                <a href="#content" class="skip-to-content-link">
  Skip to Content
</a>

<style>
  .skip-to-content-link {
    position: absolute;
    top: -40px;
    left: 0;
    background-color: #5a8f7b; /* One color from a triadic scheme */
    color: #e0f7fa; /* Another color from a triadic scheme */
    padding: 8px 12px;
    z-index: 1000;
    transition: all 0.3s ease-in-out;
    /* Neumorphism styles */
    border-radius: 10px;
    box-shadow: 7px 7px 15px rgba(50, 50, 50, 0.2), -7px -7px 15px rgba(255, 255, 255, 0.7);
  }

  .skip-to-content-link:focus {
    top: 10px;
    /* Neumorphism inset effect on focus */
    box-shadow: inset 5px 5px 10px rgba(50, 50, 50, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.7);
  }

  /* Dark mode styles */
  .dark .skip-to-content-link {
    background-color: #2c5f2d; /* Darker shade of the triadic color */
    color: #b2ebf2; /* Lighter shade of the triadic color */
    box-shadow: 7px 7px 15px rgba(0, 0, 0, 0.5), -7px -7px 15px rgba(70, 70, 70, 0.7);
  }

  .dark .skip-to-content-link:focus {
     box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(70, 70, 70, 0.7);
  }

  @media (max-width: 768px) {
    .skip-to-content-link {
      padding: 6px 10px;
    }
  }
</style>

Vai al componente Collegamento contenuto

Un collegamento Salta al contenuto in stile 3D visivamente accattivante che aiuta gli utenti a bypassare i menu di navigazione su un'interfaccia di social media. Il componente utilizza uno schema di colori complementari (blu e arancione) con un effetto 3D ottenuto attraverso ombre e trasformazioni. Presenta un design reattivo e il supporto per temi scuri. Il collegamento appare fisso nella parte superiore sinistra della finestra quando è attivo o attivo, il che lo rende facilmente accessibile per la navigazione da tastiera pur rimanendo discreto quando non è in uso.

Apri anteprima

                <!-- Skip to Content Component with 3D Design -->
<div class="relative z-50">
  <!-- Skip link - hidden by default but visible on focus -->
  <a href="#main-content" 
     class="fixed top-4 left-4 transform -translate-y-20 focus:translate-y-0 transition-transform duration-200 ease-in-out
            p-3 rounded-lg
            text-white font-bold
            bg-blue-600 hover:bg-blue-700
            dark:bg-orange-500 dark:hover:bg-orange-600
            focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-blue-400
            shadow-[0.5rem_0.5rem_0px_0px_rgba(237,137,54,0.8)] dark:shadow-[0.5rem_0.5rem_0px_0px_rgba(37,99,235,0.8)]
            transform-gpu hover:translate-y-1 hover:translate-x-1 hover:shadow-[0.3rem_0.3rem_0px_0px_rgba(237,137,54,0.8)] dark:hover:shadow-[0.3rem_0.3rem_0px_0px_rgba(37,99,235,0.8)]
            text-sm md:text-base">
    Skip to Content
  </a>
</div>

<!-- Simulated content for demonstration purposes -->
<header class="w-full bg-gray-100 dark:bg-gray-800 p-4">
  <nav class="flex justify-between items-center">
    <div class="text-blue-600 dark:text-orange-500 font-bold text-xl">SocialApp</div>
    <div class="space-x-4">
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-orange-500">Home</a>
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-orange-500">Profile</a>
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-orange-500">Messages</a>
    </div>
  </nav>
</header>

<!-- Main content that will be skipped to -->
<main id="main-content" class="container mx-auto p-4 mt-4">
  <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Your Feed</h1>
  
  <!-- Sample social media post -->
  <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md mb-4">
    <div class="flex items-center mb-3">
      <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-semibold text-gray-900 dark:text-white">Jane Smith</p>
        <p class="text-xs text-gray-500 dark:text-gray-400">Posted 2 hours ago</p>
      </div>
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-3">Just discovered this amazing 3D design technique! #design #creativity</p>
    <img src="https://picsum.photos/seed/picsum1/600/400" alt="Post image" class="w-full h-64 object-cover rounded-lg mb-3">
    <div class="flex space-x-4">
      <button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-orange-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
        </svg>
        Like
      </button>
      <button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-orange-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
        </svg>
        Comment
      </button>
      <button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-orange-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
        </svg>
        Share
      </button>
    </div>
  </div>
  
  <!-- More content to make skipping meaningful -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
      <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Suggested Friends</h2>
      <div class="space-y-3">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/men/54.jpg" alt="User avatar" class="w-10 h-10 rounded-full mr-3">
          <div class="flex-1">
            <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
          </div>
          <button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 dark:bg-orange-500 dark:hover:bg-orange-600 text-white rounded-full text-sm">Follow</button>
        </div>
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="User avatar" class="w-10 h-10 rounded-full mr-3">
          <div class="flex-1">
            <p class="font-semibold text-gray-800 dark:text-gray-200">Sarah Williams</p>
          </div>
          <button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 dark:bg-orange-500 dark:hover:bg-orange-600 text-white rounded-full text-sm">Follow</button>
        </div>
      </div>
    </div>
    
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
      <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Trending Topics</h2>
      <div class="space-y-2">
        <div class="text-blue-600 dark:text-orange-500 hover:underline">#3DDesign</div>
        <div class="text-blue-600 dark:text-orange-500 hover:underline">#TailwindCSS</div>
        <div class="text-blue-600 dark:text-orange-500 hover:underline">#WebAccessibility</div>
        <div class="text-blue-600 dark:text-orange-500 hover:underline">#ResponsiveDesign</div>
      </div>
    </div>
  </div>
</main>

Vai al collegamento al contenuto

Un componente di collegamento reattivo "Salta al contenuto" con stile Glassmorphism, che implementa una combinazione di colori complementare, una complessità moderata e il supporto della modalità oscura adatto per siti Web aziendali/aziendali. Questo componente è implementato esclusivamente in HTML con le classi CSS Tailwind, che non richiedono JavaScript.

Apri anteprima

                <a href="#content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:rounded-md focus:text-white focus:bg-black focus:bg-opacity-30 focus:backdrop-filter focus:backdrop-blur-lg focus:shadow-lg dark:focus:text-black dark:focus:bg-white dark:focus:bg-opacity-30 dark:focus:backdrop-filter dark:focus:backdrop-blur-lg dark:focus:shadow-lg">Skip to content</a>

Salta al componente del collegamento al contenuto - Skeuomorphism Scala di grigi

Un link "Salta al contenuto" semplice e reattivo con design Skeuomorphic in scala di grigi per i contenuti del blog. Include il supporto per la modalità oscura.

Apri anteprima

                <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>

Vai al collegamento al contenuto

Un componente Salta al collegamento al contenuto con un design 3D in scala di grigi per siti Web aziendali. È reattivo e supporta la modalità oscura utilizzando Tailwind CSS. Niente JavaScript.

Apri anteprima

                <a href="#main-content" class="skip-to-content-link sr-only focus:not-sr-only focus:absolute focus:top-0 a-3 focus:left-0 focus:z-50 block px-4 py-3 text-lg font-semibold text-gray-800 bg-gray-200 border-b-4 border-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-opacity-50 dark:text-gray-200 dark:bg-gray-800 dark:border-gray-300 dark:focus:ring-gray-300">Skip to main content</a>

Salta al link al contenuto - Monocromatico retrò

Passa al componente Collegamento contenuto con design retrò/vintage, combinazione di colori monocromatica e complessità semplice.

Apri anteprima

                ```html
<a href="#main-content" class="sr-only focus:not-sr-only fixed z-50 top-4 left-4 bg-stone-800 text-stone-100 px-6 py-3 rounded-md text-lg font-mono tracking-wide uppercase focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-75 dark:bg-stone-100 dark:text-stone-800 dark:focus:ring-stone-400">
  Skip to Content
</a>

<div id="main-content" class="focus:outline-none" tabindex="-1">
  <!-- Page content goes here -->
</div>
```

Vai al collegamento al contenuto

Un componente Passa al collegamento al contenuto con uno stile basato sui principi di Material Design, una combinazione di colori monocromatica e il supporto della modalità scura. È adatto per siti di e-commerce ed è costruito utilizzando Tailwind CSS senza JavaScript.

Apri anteprima

                <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 z-50 bg-gray-800 text-white px-4 py-2 rounded dark:bg-gray-200 dark:text-gray-900">Skip to content</a>

Vai al collegamento al contenuto

Un componente Salta al collegamento al contenuto nello stile di progettazione 3D, con una combinazione di colori color terra, progettato per l'e-commerce con una complessità moderata. Include un design reattivo e il supporto per i temi scuri.

Apri anteprima

                <a href="#maincontent" class="absolute top-4 left-4 z-50 px-6 py-3 bg-green-700 text-white text-lg font-semibold rounded-xl shadow-lg transform transition-transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-green-500 focus:ring-opacity-50 dark:bg-green-900 dark:hover:bg-green-800 dark:focus:ring-green-700">Skip to main content</a>

Categorie

Vai al collegamento al contenuto