Composants Onglets Composant Onglets

Composant Onglets

Un composant Tabs réactif avec un style Material Design, une palette de couleurs monochromatiques et une prise en charge du thème sombre, conçu avec Tailwind CSS pour les sites Web à fort contenu.

Aperçu

HTML Code

<div class="max-w-4xl mx-auto my-8">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="flex border-b border-gray-200 dark:border-gray-700">
      <button class="flex-1 py-4 px-6 text-center text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:text-blue-600 dark:focus:text-blue-400 border-b-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition duration-300 ease-in-out">
        Recent Posts
      </button>
      <button class="flex-1 py-4 px-6 text-center text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:text-blue-600 dark:focus:text-blue-400 border-b-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition duration-300 ease-in-out">
        Categories
      </button>
      <button class="flex-1 py-4 px-6 text-center text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:text-blue-600 dark:focus:text-blue-400 border-b-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition duration-300 ease-in-out">
        Authors
      </button>
    </div>
    <div class="p-6">
      <!-- Content for 'Recent Posts' tab -->
      <div class="space-y-4">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white">A Guide to Responsive Web Design</h3>
        <p class="text-gray-700 dark:text-gray-300">Learn the fundamentals of creating websites that adapt seamlessly to various screen sizes and devices.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
          <img class="w-8 h-8 rounded-full mr-2" src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
          <span>John Doe</span>
          <span class="mx-2">•</span>
          <span>October 26, 2023</span>
        </div>
        <hr class="border-gray-200 dark:border-gray-700">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Understanding CSS Grid Layout</h3>
        <p class="text-gray-700 dark:text-gray-300">Explore the power and flexibility of CSS Grid for building complex two-dimensional layouts.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
          <img class="w-8 h-8 rounded-full mr-2" src="https://www.randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
          <span>Jane Smith</span>
          <span class="mx-2">•</span>
          <span>October 20, 2023</span>
        </div>
      </div>

      <!-- Content for 'Categories' tab (hidden by default, would be shown with JS) -->
      <!-- <div class="space-y-4 hidden">
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300">
          <li>Technology</li>
          <li>Programming</li>
          <li>Design</li>
          <li>Lifestyle</li>
        </ul>
      </div> -->

      <!-- Content for 'Authors' tab (hidden by default, would be shown with JS) -->
      <!-- <div class="space-y-4 hidden">
        <div class="flex items-center space-x-4">
          <img class="w-12 h-12 rounded-full" src="https://www.randomuser.me/api/portraits/men/76.jpg" alt="Author Avatar">
          <div>
            <p class="font-semibold text-gray-900 dark:text-white">David Lee</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Content Creator</p>
          </div>
        </div>
        <div class="flex items-center space-x-4">
          <img class="w-12 h-12 rounded-full" src="https://www.randomuser.me/api/portraits/women/65.jpg" alt="Author Avatar">
          <div>
            <p class="font-semibold text-gray-900 dark:text-white">Sarah Chen</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Tech Enthusiast</p>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</div>

Composants associés

Composant Onglets

Un composant d’onglets de style brutaliste pour les médias sociaux, avec des couleurs complémentaires et un design complexe et réactif, y compris la prise en charge du thème sombre.

Ouvrir

Composant Tabs skeuomorphic

Un composant d’onglets réactifs stylisé avec un skeuomorphisme, utilisant Tailwind CSS pour imiter les éléments de conception du monde réel. Il inclut la prise en charge du thème sombre et des images de remplacement.

Ouvrir

Onglets de conception matérielle

Composant Tabs avec style Material Design, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS, sans JavaScript.

Ouvrir