Todos los componentes

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 Componentes de diseño

Un componente de diseño diseñado en un estilo skeuomórfico que imita a sus homólogos del mundo real, con elementos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.

Abrir vista previa

                <div class="min-h-screen flex flex-col bg-gray-100 dark:bg-gray-900">
    <header class="bg-white dark:bg-gray-800 shadow-md flex justify-between items-center p-4 rounded-lg">
        <h1 class="text-xl font-bold text-gray-800 dark:text-white">My Skeuomorphic Layout</h1>
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700">
    </header>
    <main class="flex-grow p-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transition-all transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=1" alt="Placeholder" class="w-full h-32 object-cover mb-2">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Card Title</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the card content. It mimics a real-world element.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transition-all transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=2" alt="Placeholder" class="w-full h-32 object-cover mb-2">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Card Title</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the card content. It mimics a real-world element.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transition-all transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=3" alt="Placeholder" class="w-full h-32 object-cover mb-2">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Card Title</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the card content. It mimics a real-world element.</p>
            </div>
        </div>
    </main>
    <footer class="bg-white dark:bg-gray-800 shadow-md p-4 text-center rounded-lg">
        <p class="text-gray-600 dark:text-gray-400">© 2023 My Company. All rights reserved.</p>
    </footer>
</div>

Componente de navegación de ruta de navegación

Un componente de navegación de migas de pan receptivo diseñado en el estilo Neumorphism, compatible con el modo oscuro, creado con Tailwind CSS.

Abrir vista previa

                <nav class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 mx-4">
    <ol class="list-reset flex items-center space-x-2">
        <li>
            <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition duration-300">
                Home
            </a>
            <svg class="w-4 h-4 text-gray-400 dark:text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7l7-7-7-7" /></svg>
        </li>
        <li>
            <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition duration-300">
                Category
            </a>
            <svg class="w-4 h-4 text-gray-400 dark:text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7l7-7-7-7" /></svg>
        </li>
        <li>
            <span class="text-gray-400 dark:text-gray-600">
                Sub-category
            </span>
        </li>
    </ol>
</nav>

<style>
    /* Neumorphism Styling */
    .bg-white {
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.7);
    }
    .dark .bg-gray-800 {
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), -10px -10px 20px rgba(0, 0, 0, 0.7);
    }
    a {
        transition: all 0.3s ease;
    }
</style>

Componentes de visualización de datos

Un componente de visualización de datos de estilo retro/vintage con soporte para temas oscuros y efectos responsivos utilizando Tailwind CSS.

Abrir vista previa

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Data Visualization</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow">
            <img src="https://picsum.photos/400/200?random=1" alt="Data Chart 1" class="rounded-lg mb-2"> 
            <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Chart Title 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of chart 1 showing insightful data.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow">
            <img src="https://picsum.photos/400/200?random=2" alt="Data Chart 2" class="rounded-lg mb-2">
            <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Chart Title 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of chart 2 providing valuable insights.</p>
        </div>
    </div>

    <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow mt-6">
        <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300">User Profiles</h3>
        <div class="flex mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1" class="w-16 h-16 rounded-full mr-4">
            <div>
                <p class="text-gray-700 dark:text-gray-300 font-bold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Data Scientist</p>
            </div>
        </div>
        <div class="flex mt-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar 2" class="w-16 h-16 rounded-full mr-4">
            <div>
                <p class="text-gray-700 dark:text-gray-300 font-bold">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Data Analyst</p>
            </div>
        </div>
    </div>
</div>

Componente de mapa del sitio

Componente de mapa del sitio con diseño minimalista / plano, efectos responsivos y soporte para temas oscuros.

Abrir vista previa

                <footer class='bg-white dark:bg-gray-900'>
    <div class='mx-auto max-w-screen-xl px-4 py-8 sm:px-6 lg:px-8'>
        <div class='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'>
            <div>
                <h2 class='text-lg font-bold text-gray-900 dark:text-white'>Company</h2>
                <nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
                    <a href='#' class='hover:opacity-75'>About Us</a>
                    <a href='#' class='hover:opacity-75'>Careers</a>
                    <a href='#' class='hover:opacity-75'>Contact Us</a>
                </nav>
            </div>
            <div>
                <h2 class='text-lg font-bold text-gray-900 dark:text-white'>Services</h2>
                <nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
                    <a href='#' class='hover:opacity-75'>Web Development</a>
                    <a href='#' class='hover:opacity-75'>Mobile Development</a>
                    <a href='#' class='hover:opacity-75'>SEO Optimization</a>
                </nav>
            </div>
            <div>
                <h2 class='text-lg font-bold text-gray-900 dark:text-white'>Legal</h2>
                <nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
                    <a href='#' class='hover:opacity-75'>Privacy Policy</a>
                    <a href='#' class='hover:opacity-75'>Terms of Service</a>
                    <a href='#' class='hover:opacity-75'>Cookie Policy</a>
                </nav>
            </div>
            <div>
                <h2 class='text-lg font-bold text-gray-900 dark:text-white'>Follow Us</h2>
                <nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
                    <a href='#' class='hover:opacity-75'>Facebook</a>
                    <a href='#' class='hover:opacity-75'>Twitter</a>
                    <a href='#' class='hover:opacity-75'>Instagram</a>
                </nav>
            </div>
        </div>
        <div class='mt-8 border-t border-gray-100 dark:border-gray-800 pt-8 sm:flex sm:items-center sm:justify-between'>
            <p class='text-xs/relaxed text-gray-500 dark:text-gray-400'>
                © 2024 Your Company. All rights reserved.
            </p>
        </div>
    </div>
</footer>

Componente de línea de tiempo retro/vintage

Un componente de línea de tiempo receptivo con diseño retro / vintage y soporte para modo oscuro.

Abrir vista previa

                <div class="container mx-auto px-4 py-8">
  <div class="flex flex-col md:flex-row">
    <div class="mr-10 w-full md:w-1/2">
      <div class="mb-8 flex items-center justify-between">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-purple-500 object-cover">
          <div class="text-lg font-bold text-gray-800 dark:text-white">Event 1</div>
        </div>
        <div class="text-sm text-gray-600 dark:text-gray-300">1985</div>
      </div>
      <div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
        <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="w-full md:w-1/2">
      <div class="mb-8 flex items-center justify-between">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-pink-500 object-cover">
          <div class="text-lg font-bold text-gray-800 dark:text-white">Event 2</div>
        </div>
        <div class="text-sm text-gray-600 dark:text-gray-300">1990</div>
      </div>
      <div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
        <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>
  <div class="flex flex-col md:flex-row">
    <div class="mr-10 w-full md:w-1/2">
      <div class="mb-8 flex items-center justify-between">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-green-500 object-cover">
          <div class="text-lg font-bold text-gray-800 dark:text-white">Event 3</div>
        </div>
        <div class="text-sm text-gray-600 dark:text-gray-300">1995</div>
      </div>
      <div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
        <p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>
    </div>
    <div class="w-full md:w-1/2">
      <div class="mb-8 flex items-center justify-between">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-yellow-500 object-cover">
          <div class="text-lg font-bold text-gray-800 dark:text-white">Event 4</div>
        </div>
        <div class="text-sm text-gray-600 dark:text-gray-300">2000</div>
      </div>
      <div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
        <p class="text-gray-700 dark:text-gray-300">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
</div>

Componente de reseñas de productos

Un componente de reseñas de productos con elementos de diseño 3D, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.

Abrir vista previa

                <div class="antialiased w-full">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-2/3 mx-auto">
        <div class="max-w-2xl mx-auto">
          <div class="mb-6 md:mb-8">
            <span class="text-lg text-blue-500 font-bold">Reviews</span>
            <h2 class="text-3xl md:text-4xl mt-2 font-bold font-heading">Customer Reviews</h2>
          </div>
          <div class="mb-6">
            <div class="flex items-center justify-between mb-4">
              <div class="flex items-center">
                <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/33.jpg" alt="user avatar">
                <div class="ml-4">
                  <p class="text-lg font-semibold">Alice Williams</p>
                  <p class="text-sm text-gray-500">January 20, 2024</p>
                </div>
              </div>
              <div class="flex items-center">
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-gray-300 text-xl">&#9733;</span>
              </div>
            </div>
            <div class="p-6 bg-gray-100 rounded-lg shadow-md dark:bg-gray-700">
              <p class="leading-loose text-gray-500 dark:text-gray-300">"Absolutely love this product! The quality is top-notch, and it exceeded my expectations. Highly recommend it to everyone."</p>
            </div>
          </div>
          <div class="mb-6">
            <div class="flex items-center justify-between mb-4">
              <div class="flex items-center">
                <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/76.jpg" alt="user avatar">
                <div class="ml-4">
                  <p class="text-lg font-semibold">Robert Johnson</p>
                  <p class="text-sm text-gray-500">January 18, 2024</p>
                </div>
              </div>
              <div class="flex items-center">
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl">&#9733;</span>
              </div>
            </div>
            <div class="p-6 bg-gray-100 rounded-lg shadow-md dark:bg-gray-700">
              <p class="leading-loose text-gray-500 dark:text-gray-300">"This is by far the best purchase I

Componente del botón Seguir

Un componente de botón de seguimiento receptivo diseñado en el estilo de Material Design con soporte de modo oscuro usando Tailwind CSS.

Abrir vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="flex flex-col items-center p-6 bg-white dark:bg-gray-900 rounded-lg shadow-lg space-y-4">
        <img src="https://picsum.photos/100" alt="User Avatar" class="w-24 h-24 rounded-full border-2 border-indigo-500 shadow-md">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-400">Software Developer</p>
        <button class="flex items-center justify-center w-full px-4 py-2 font-semibold text-white bg-blue-600 rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600">
            <span>Follow</span>
        </button>
    </div>
</div>

Componente de menciones de usuario

Un componente de menciones de usuario que usa CSS de Tailwind con diseño de Glassmorphism, capacidad de respuesta y compatibilidad con temas oscuros.

Abrir vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg p-6">
    <h3 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Mentions</h2>
    <div class="space-y-4">
      <div class="flex items-center space-x-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">John Doe</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a comment.</p>
        </div>
      </div>
      <div class="flex items-center space-x-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Jane Smith</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a post.</p>
        </div>
      </div>
      <div class="flex items-center space-x-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Peter Jones</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a message.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Navegación pegajosa brutalista

Un componente de navegación pegajoso de estilo brutalista con comportamiento responsivo y compatibilidad con el modo oscuro mediante Tailwind CSS. Presenta alto contraste, tipografía audaz y una estética cruda y cruda.

Abrir vista previa

                <header class="bg-yellow-400 text-black sticky top-0 z-50 border-b-4 border-black dark:bg-purple-800 dark:text-white dark:border-white">
  <nav class="container mx-auto px-6 py-4 flex justify-between items-center">
    <div class="text-2xl font-bold uppercase tracking-tighter">Brutal Nav</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-black hover:underline dark:text-white">Home</a>
      <a href="#" class="text-black hover:underline dark:text-white">About</a>
      <a href="#" class="text-black hover:underline dark:text-white">Services</a>
      <a href="#" class="text-black hover:underline dark:text-white">Contact</a>
    </div>
    <button class="md:hidden text-black dark:text-white focus:outline-none">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path></svg>
    </button>
  </nav>
</header>

Categorías