Pestañas

Componente Pestañas

Un componente de pestañas minimalista y vibrante para comercio electrónico con complejidad moderada, diseño receptivo y soporte de temas oscuros, implementado con Tailwind CSS y HTML.

Abrir vista previa

                <div class="w-full max-w-md mx-auto">
  <div class="flex border-b border-gray-200 dark:border-gray-700">
    <button class="flex-1 py-4 px-6 text-center text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">
      Description
    </button>
    <button class="flex-1 py-4 px-6 text-center text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none border-b-2 border-blue-600 dark:border-blue-400">
      Reviews
    </button>
    <button class="flex-1 py-4 px-6 text-center text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">
      Shipping
    </button>
  </div>
  <div class="mt-8">
    <!-- Content goes here based on the active tab -->
    <div class="text-gray-700 dark:text-gray-300">
      <!-- Reviews Content (Example) -->
      <h2 class="text-xl font-bold mb-4">Customer Reviews</h2>
      <div class="space-y-6">
        <div class="flex items-start space-x-4">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
          <div>
            <p class="font-semibold">John Doe</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">2 days ago</p>
            <p class="mt-2">This product is amazing! I highly recommend it.</p>
          </div>
        </div>
        <div class="flex items-start space-x-4">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
          <div>
            <p class="font-semibold">Jane Smith</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">4 days ago</p>
            <p class="mt-2">Great quality and fast shipping.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Componente Pestañas

Un componente de pestañas minimalista para sitios web de comercio electrónico con elementos interactivos, diseño receptivo y soporte para modo oscuro.

Abrir vista previa

                <div class="container mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md">
        <div class="flex items-center space-x-4 border-b">
            <button class="py-2 px-4 text-blue-500 border-b-2 border-blue-500 focus:outline-none">Tab 1</button>
            <button class="py-2 px-4 text-gray-500 hover:text-blue-500 focus:outline-none">Tab 2</button>
            <button class="py-2 px-4 text-gray-500 hover:text-blue-500 focus:outline-none">Tab 3</button>
        </div>
        <div class="p-4">
            <div class="block" id="tab1-content">
                <h2 class="text-lg font-bold text-gray-800 dark:text-white">Tab 1 Content</h2>
                <img class="mt-2 w-full rounded-lg" src="https://picsum.photos/800/400" alt="Random Image">
                <p class="mt-2 text-gray-600 dark:text-gray-400">Explore our exclusive collections in Tab 1. Discover vibrant products that can elevate your shopping experience.</p>
            </div>
            <div class="hidden" id="tab2-content">
                <h2 class="text-lg font-bold text-gray-800 dark:text-white">Tab 2 Content</h2>
                <img class="mt-2 w-full rounded-lg" src="https://picsum.photos/800/401" alt="Random Image">
                <p class="mt-2 text-gray-600 dark:text-gray-400">Find the latest trends and styles in Tab 2. Shop now and enjoy premium materials and designs.</p>
            </div>
            <div class="hidden" id="tab3-content">
                <h2 class="text-lg font-bold text-gray-800 dark:text-white">Tab 3 Content</h2>
                <img class="mt-2 w-full rounded-lg" src="https://picsum.photos/800/402" alt="Random Image">
                <p class="mt-2 text-gray-600 dark:text-gray-400">Check out special deals and discounts in Tab 3. Your ultimate shopping destination is right here.</p>
            </div>
        </div>
    </div>
</div>

Componente Pestañas

Componente de pestañas responsivas con tonos de tierra y microinteracciones para sitios web comerciales, compatible con el modo oscuro usando Tailwind CSS. Utiliza solo las clases HTML y Tailwind.

Abrir vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-md">
    <div class="flex justify-center">
      <button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800 rounded-tl-lg focus:outline-none transition duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-700 data-[state=active]:bg-white dark:data-[state=active]:bg-gray-700 data-[state=active]:text-gray-800 dark:data-[state=active]:text-white" data-state="active" data-tab="tab1">
        About Us
      </button>
      <button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800 focus:outline-none transition duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-700 data-[state=active]:bg-white dark:data-[state=active]:bg-gray-700 data-[state=active]:text-gray-800 dark:data-[state=active]:text-white" data-tab="tab2">
        Our Services
      </button>
      <button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800 rounded-tr-lg focus:outline-none transition duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-700 data-[state=active]:bg-white dark:data-[state=active]:bg-gray-700 data-[state=active]:text-gray-800 dark:data-[state=active]:text-white" data-tab="tab3">
        Contact
      </button>
    </div>
    <div class="bg-white dark:bg-gray-700 p-4 rounded-b-lg shadow-md">
      <div data-tab-content="tab1">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Our Company Story</h2>
        <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <img src="https://picsum.photos/400/200" alt="Company Image" class="mt-4 rounded-md">
      </div>
      <div class="hidden" data-tab-content="tab2">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">What We Offer</h2>
        <ul class="list-disc list-inside text-gray-600 dark:text-gray-300">
          <li>Consulting Services</li>
          <li>Development & Design</li>
          <li>Marketing Solutions</li>
        </ul>
        <img src="https://picsum.photos/400/201" alt="Services Image" class="mt-4 rounded-md">
      </div>
      <div class="hidden" data-tab-content="tab3">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Get in Touch</h2>
        <p class="text-gray-600 dark:text-gray-300">Email: [email protected]</p>
        <p class="text-gray-600 dark:text-gray-300">Phone: (123) 456-7890</p>
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
            <p class="text-gray-800 dark:text-white">John Doe, CEO</p>
        </div>
      </div>
    </div>
  </div>
</div>

Pestañas de diseño de materiales

Componente de pestañas con estilo Material Design, efectos responsivos y soporte de temas oscuros usando Tailwind CSS, sin JavaScript.

Abrir vista previa

                <div class="material-tabs">
  <div class="tab-header">
    <div class="tab-button active">Tab 1</div>
    <div class="tab-button">Tab 2</div>
    <div class="tab-button">Tab 3</div>
  </div>
  <div class="tab-content active">
    <h2>Content for Tab 1</h2>
    <p>This is the content for the first tab. It uses Material Design principles for layout and appearance.</p>
  </div>
  <div class="tab-content">
    <h2>Content for Tab 2</h2>
    <p>This is the content for the second tab.</p>
  </div>
  <div class="tab-content">
    <h2>Content for Tab 3</h2>
    <p>This is the content for the third tab.</p>
  </div>
</div>

MaterialDesignTabs

Un componente de pestañas responsivas que sigue los principios de Material Design con Tailwind CSS, incluida la compatibilidad con el modo oscuro y los efectos responsivos.

Abrir vista previa

                <div class="material-tabs-container">
  <div class="material-tabs-header">
    <button class="material-tab-button active">Tab 1</button>
    <button class="material-tab-button">Tab 2</button>
    <button class="material-tab-button">Tab 3</button>
  </div>
  <div class="material-tabs-content">
    <div class="material-tab-pane active">
      <h2 class="text-xl font-bold mb-4">Content of Tab 1</h2>
      <p>This is the content for Tab 1. It follows Material Design guidelines with responsive padding and font sizes.</p>
      <img src="https://picsum.photos/seed/picsum/400/200" alt="Placeholder Image" class="my-4 rounded-md">
      <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
        <span>Posted by John Doe</span>
      </div>
    </div>
    <div class="material-tab-pane">
      <h2 class="text-xl font-bold mb-4">Content of Tab 2</h2>
      <p>This is the content for Tab 2, showcasing different types of information within a tabbed interface.</p>
      <ul class="list-disc list-inside mt-4">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
    <div class="material-tab-pane">
      <h2 class="text-xl font-bold mb-4">Content of Tab 3</h2>
      <p>This is the content for Tab 3. Each tab pane can contain varied content, adhering to the responsive design.</p>
      <p class="text-gray-700 dark:text-gray-300 mt-4">Additional text for Tab 3 content.</p>
    </div>
  </div>
</div>

<style>
  /* Basic Material Design inspired styles */
  .material-tabs-container {
    @apply bg-white dark:bg-gray-800 shadow-md rounded-md p-4;
  }

  .material-tabs-header {
    @apply flex border-b border-gray-200 dark:border-gray-700;
  }

  .material-tab-button {
    @apply py-2 px-4 text-center text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none;
    transition: color 0.3s ease;
  }

  .material-tab-button.active {
    @apply border-b-2 border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400;
  }

  .material-tabs-content {
    @apply mt-4;
  }

  .material-tab-pane {
    @apply hidden;
  }

  .material-tab-pane.active {
    @apply block;
  }

  /* Responsive adjustments */
  @media (max-width: 600px) {
    .material-tabs-header {
      @apply flex-col;
    }

    .material-tab-button {
      @apply w-full text-left;
    }
  }

  /* Dark mode styles */
  /* Handled by Tailwind's dark: utility classes */
</style>

Componente de pestañas de Material Design

Un componente de pestañas de estilo Material Design que utiliza Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros.

Abrir vista previa

                <div class="w-full">
  <div class="border-b border-gray-200 dark:border-gray-700">
    <nav class="-mb-0.5 flex space-x-6" aria-label="Tabs">
      <button type="button" class="group inline-flex items-center border-b-2 py-4 px-1 text-sm font-medium" aria-current="page">
        <svg class="mr-2 h-5 w-5 text-indigo-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M1.5 1.5A.75.75 0 000 2.25v13.5a.75.75 0 00.75.75h15a.75.75 0 00.75-.75V2.25a.75.75 0 00-.75-.75H1.5zM10.5 6a.75.75 0 00-1.5 0v6a.75.75 0 001.5 0V6zm3 0a.75.75 0 00-1.5 0v6a.75.75 0 001.5 0V6zM6 3a.75.75 0 00-1.5 0v9a.75.75 0 001.5 0V3z" clip-rule="evenodd" />
        </svg>
        <span class="text-indigo-600 dark:text-indigo-400">My Account</span>
      </button>
      <button type="button" class="group inline-flex items-center border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
        <svg class="mr-2 h-5 w-5 text-gray-400 group-hover:text-gray-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 3a.375.375 0 11-.75 0 .375.375 0 01.75 0zm1.875-3a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 3a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.375 21a1.125 1.125 0 001.125 1.125h15A1.125 1.125 0 0020.625 21V6.75a1.125 1.125 0 00-1.125-1.125h-15a1.125 1.125 0 00-1.125 1.125V21zM19.125 6.75a.375.375 0 00-.375-.375H4.875a.375.375 0 00-.375.375v13.5c0 .207.168.375.375.375h15c.207 0 .375-.168.375-.375V6.75z" clip-rule="evenodd" />
        </svg>
        <span class="text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300">Company</span>
      </button>
      <button type="button" class="group inline-flex items-center border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
        <svg class="mr-2 h-5 w-5 text-gray-400 group-hover:text-gray-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M10.5 6a.75.75 0 100 1.5 1.5 1.5 0 011.5 1.5v1.5a.75.75 0 101.5 0V9a3 3 0 00-3-3zM3 19.5a1.5 1.5 0 011.5-1.5h15a1.5 1.5 0 011.5 1.5v.75a.75.75 0 01-.75.75H3.75a.75.75 0 01-.75-.75v-.75zM3 6.75A.75.75 0 013.75 6h.75a.75.75 0 01.75.75v.75a.75.75 0 01-.75.75h-.75A.75.75 0 013 7.5v-.75zM6 6.75A.75.75 0 016.75 6h.75a.75.75 0 01.75.75v.75a.75.75 0 01-.75.75h-.75A.75.75 0 016 7.5v-.75zM9 6.75A.75.75 0 019.75 6h.75a.75.75 0 01.75.75v.75a.75.75 0 01-.75.75h-.75A.75.75 0 019 7.5v-.75z" />
        </svg>
        <span class="text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300">Teams</span>
      </button>
      <button type="button" class="group inline-flex items-center border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
        <svg class="mr-2 h-5 w-5 text-gray-400 group-hover:text-gray-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M12 1.5a.75.75 0 01.75.75V3a.75.75 0 01-1.5 0V2.25a.75.75 0 01.75-.75zM12 21a.75.75 0 01.75.75V22.5a.75.75 0 01-1.5 0V21.75a.75.75 0 01.75-.75zM19.5 8.25a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0V8.25zM6 8.25a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0V8.25zM19.5 15.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM6 15.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM15.75 3.75a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM6.75 3.75a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM15.75 18.75a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM6.75 18.75a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM12 6.75a3 3 0 100 6 3 3 0 000-6z" />
        </svg>
        <span class="text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300">Billing</span>
      </button>
      <button type="button" class="group inline-flex items-center border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
        <svg class="mr-2 h-5 w-5 text-gray-400 group-hover:text-gray-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 9a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25V15a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V9z" clip-rule="evenodd" />
        </svg>
        <span class="text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300">Integrations</span>
      </button>
    </nav>
  </div>
</div>

Componente de pestañas de modo oscuro

Un componente de pestañas responsivo diseñado teniendo en cuenta el modo oscuro, que utiliza Tailwind CSS.

Abrir vista previa

                <div class="bg-gray-900 text-white rounded-lg p-4">
  <div class="flex space-x-2">
    <button class="tab-button active bg-gray-700 rounded-lg px-4 py-2 focus:outline-none">Tab 1</button>
    <button class="tab-button bg-gray-700 rounded-lg px-4 py-2 focus:outline-none">Tab 2</button>
    <button class="tab-button bg-gray-700 rounded-lg px-4 py-2 focus:outline-none">Tab 3</button>
  </div>
  <div class="tab-content mt-4">
    <div class="content active">
      <h2 class="text-lg font-semibold">Content for Tab 1</h2>
      <img src="https://picsum.photos/400/200?random=1" alt="Random placeholder" class="mt-2 rounded-lg">
      <p class="mt-2">This is the content for the first tab. Here you can add more information, images, etc.</p>
    </div>
    <div class="content hidden">
      <h2 class="text-lg font-semibold">Content for Tab 2</h2>
      <img src="https://picsum.photos/400/200?random=2" alt="Random placeholder" class="mt-2 rounded-lg">
      <p class="mt-2">This is the content for the second tab. More details can be added here.</p>
    </div>
    <div class="content hidden">
      <h2 class="text-lg font-semibold">Content for Tab 3</h2>
      <img src="https://picsum.photos/400/200?random=3" alt="Random placeholder" class="mt-2 rounded-lg">
      <p class="mt-2">Here is the content for the third tab, where additional insights can be included.</p>
    </div>
  </div>
</div>
<style>
  .tab-button.active {
    background-color: #1f2937;
    border: 1px solid #4b5563;
  }
  .tab-button:hover {
    background-color: #374151;
  }
  .content.hidden {
    display: none;
  }
  .content.active {
    display: block;
  }
</style>

Un componente de pestañas responsivo diseñado para el modo oscuro usando Tailwind CSS. Cuenta con diferentes pestañas en las que los usuarios pueden hacer clic para revelar el contenido, junto con imágenes de marcador de posición y avatares.

Abrir vista previa

                <div class="bg-gray-800 text-white rounded-lg shadow-md">
    <div class="flex border-b border-gray-700">
        <button class="py-2 px-4 text-sm font-medium hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600" onclick="showTab('tab1')">Tab 1</button>
        <button class="py-2 px-4 text-sm font-medium hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600" onclick="showTab('tab2')">Tab 2</button>
        <button class="py-2 px-4 text-sm font-medium hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600" onclick="showTab('tab3')">Tab 3</button>
    </div>
    <div id="tab1" class="p-4">
        <h2 class="text-lg font-semibold">Tab 1 Content</h2>
        <p>Content for tab 1 goes here.</p>
        <img src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" class="rounded-md mt-2">
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>John Doe</span>
        </div>
    </div>
    <div id="tab2" class="hidden p-4">
        <h2 class="text-lg font-semibold">Tab 2 Content</h2>
        <p>Content for tab 2 goes here.</p>
        <img src="https://picsum.photos/400/200?random=2" alt="Placeholder Image" class="rounded-md mt-2">
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>Jane Doe</span>
        </div>
    </div>
    <div id="tab3" class="hidden p-4">
        <h2 class="text-lg font-semibold">Tab 3 Content</h2>
        <p>Content for tab 3 goes here.</p>
        <img src="https://picsum.photos/400/200?random=3" alt="Placeholder Image" class="rounded-md mt-2">
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>Mike Smith</span>
        </div>
    </div>
</div>

Componente de pestañas skeuomórficas

Un componente de pestañas responsivo con estilo skeuomorphism, que utiliza Tailwind CSS para imitar elementos de diseño del mundo real. Incluye soporte para temas oscuros e imágenes de marcador de posición.

Abrir vista previa

                <div class="flex flex-col w-full max-w-md mx-auto p-4">
  <div class="tabs flex space-x-2">
    <button class="tab px-4 py-2 font-semibold text-white bg-gray-800 rounded-lg shadow-lg focus:outline-none ">Tab 1</button>
    <button class="tab px-4 py-2 font-semibold text-gray-800 bg-white rounded-lg shadow-lg focus:outline-none ">Tab 2</button>
    <button class="tab px-4 py-2 font-semibold text-gray-800 bg-white rounded-lg shadow-lg focus:outline-none ">Tab 3</button>
  </div>
  <div class="tab-content mt-4 p-4 bg-gray-200 rounded-lg shadow-lg dark:bg-gray-800">
    <div class="flex items-center space-x-4">
      <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
      <div class="text-gray-700 dark:text-gray-300">
        <h2 class="font-bold text-lg">Tab 1 Content</h2>
        <p>This section contains information related to Tab 1.</p>
        <img class="mt-2 rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" />
      </div>
    </div>
  </div>
</div>
<style>
  /* Dark Mode Support */
  @media (prefers-color-scheme: dark) {
    .bg-gray-800 { background-color: #2d3748; }
    .bg-gray-200 { background-color: #4a5568; }
    .text-gray-700 { color: #cbd5e0; }
  }
</style>

Categorías