Cerca componenti

Categorie

Componenti Vai al collegamento al contenuto

Vai al collegamento al contenuto

Link di accessibilità per saltare la navigazione

SkipToContentLink

Vai al componente Collegamento contenuto con interfaccia utente in modalità scura, combinazione di colori triadica e complessità semplice per l'e-commerce.

Aperto Anteprima

                <template>
  <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:bg-purple-900 focus:text-lime-300 focus:p-3 focus:border-b-4 focus:border-cyan-400 dark:focus:bg-purple-900 dark:focus:text-lime-300 dark:focus:border-cyan-400">Skip to main content</a>
</template>

Vai al collegamento al contenuto

Un componente minimalista per il passaggio al collegamento al contenuto per l'e-commerce, con colori vivaci, design reattivo e supporto per la modalità scura.

Aperto Anteprima

                <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:bg-pink-500 focus:text-white focus:p-3 focus:rounded-lg focus:z-50 dark:focus:bg-purple-700 dark:focus:text-yellow-300">Skip to main content</a>

Vai al collegamento al contenuto

Un collegamento minimalista per l'accessibilità nelle applicazioni Web, progettato per i dashboard.

Aperto Anteprima

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

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.

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

Vai al collegamento al contenuto

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.

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

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

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

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

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

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