Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de la barra lateral

Un componente de barra lateral responsivo diseñado con el estilo Neumorphism usando Tailwind CSS. Presenta una interfaz de usuario suave con sombras sutiles, admite el modo oscuro e incluye imágenes de marcador de posición y avatar.

Abrir Vista previa

                <div class="flex bg-gray-200 dark:bg-gray-800 h-screen">
    <div class="w-64 h-full shadow-lg rounded-xl bg-gray-300 dark:bg-gray-700 p-4">
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-sm"/>
            <h2 class="ml-3 text-xl font-semibold text-gray-800 dark:text-gray-100">User Name</h2>
        </div>
        <nav>
            <ul>
                <li class="my-2">
                    <a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Dashboard</a>
                </li>
                <li class="my-2">
                    <a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Profile</a>
                </li>
                <li class="my-2">
                    <a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Settings</a>
                </li>
                <li class="my-2">
                    <a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Logout</a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="flex-1 p-10 bg-gray-100 dark:bg-gray-900">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Main Content</h1>
        <img src="https://picsum.photos/500/300" alt="Placeholder" class="mt-4 rounded-lg shadow-md"/>
    </div>
</div>

Componente de paginación neumórfica

Un componente de paginación neumórfica con soporte para modo oscuro.

Abrir Vista previa

                <nav aria-label="Page navigation example">
  <ul class="inline-flex -space-x-px text-base h-10">
    <li>
      <a href="#" class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
        <span class="sr-only">Previous</span>
        <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
        </svg>
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">1</a>
    </li>
    <li>
      <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">2</a>
    </li>
    <li>
      <a href="#" aria-current="page" class="flex items-center justify-center px-4 h-10 text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">3</a>
    </li>
    <li>
      <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">4</a>
    </li>
    <li>
      <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">5</a>
    </li>
    <li>
      <a href="#" class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
        <span class="sr-only">Previous</span>
        <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
        </svg>
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
      <span class="sr-only">Next</span>
        <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
      </a>
    </li>
  </ul>
</nav>

Componente de caja de luz de imagen

Un componente de caja de luz de imagen responsivo con un tema retro/vintage que usa Tailwind CSS, admite el modo oscuro y presenta imágenes de marcador de posición.

Abrir Vista previa

                <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto mt-10">
    <img id="lightbox-trigger" src="https://picsum.photos/600/400?random=1" class="w-full h-48 object-cover rounded-t-lg" alt="Vintage Image">
    <div class="p-4">
        <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Vintage Aesthetic</h2>
        <p class="text-gray-600 dark:text-gray-400">A nostalgic look into the past with a touch of modern design.</p>
    </div>
    <div class="flex justify-center pb-4">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">View More Images</button>
    </div>
    <div id="lightbox" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
        <span class="absolute top-4 right-4 text-white cursor-pointer" onclick="document.getElementById('lightbox').classList.add('hidden')">&times;</span>
        <img src="https://picsum.photos/1200/800?random=1" class="max-w-full max-h-full rounded shadow-lg" alt="Lightbox Image">
    </div>
</div>

<style>
    /* Dark mode styling */
    @media (prefers-color-scheme: dark) {
        .bg-white {
            background-color: #1f2937;
        }
        .text-gray-800 {
            color: #e5e7eb;
        }
        .text-gray-600 {
            color: #d1d5db;
        }
    }
</style>

Componente de navegación pegajosa

Componente de navegación pegajoso con estilo Glassmorphism, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.

Abrir Vista previa

                <nav class="sticky top-0 z-10 backdrop-filter backdrop-blur-lg bg-opacity-30 firefox-safari-fix bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0 flex items-center">
          <span class="text-2xl font-bold text-gray-900 dark:text-white">Glassmorphism Nav</span>
        </div>
        <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
          <a href="#" class="border-indigo-500 text-gray-900 dark:text-white inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> Dashboard </a>
          <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> Team </a>
          <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> Projects </a>
          <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> Calendar </a>
        </div>
      </div>
      <div class="hidden sm:ml-6 sm:flex sm:items-center">
        <button class="bg-gray-100 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-gray-300 dark:hover:text-white">
          <span class="sr-only">View notifications</span>
          <!-- Heroicon name: outline/bell -->
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h2a2 2 0 012 2v2H5v-2a2 2 0 012-2h2m-4 0V5a2 2 0 012-2h4a2 2 0 012 2v12m-4 0h.01m-4 0h.01m-4 0h.01M12 17v2m0-4h.01M8 7h.01M16 7h.01" />
          </svg>
        </button>

        <!-- Profile dropdown -->
        <div class="ml-3 relative">
          <div>
            <button type="button" class="bg-gray-100 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
              <span class="sr-only">Open user menu</span>
              <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/40.jpg" alt="">
            </button>
          </div>
        </div>
      </div>
      <div class="-mr-2 flex items-center sm:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 dark:hover:bg-gray-700" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <!-- Icon when menu is open. -->
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="sm:hidden" id="mobile-menu">
    <div class="pt-2 pb-3 space-y-1">
      <a href="#" class="border-indigo-500 text-gray-700 block px-3 py-2 border-l-4 text-base font-medium dark:text-white">Dashboard</a>
      <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block px-3 py-2 border-l-4 text-base font-medium dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white">Team</a>
      <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block px-3 py-2 border-l-4 text-base font-medium dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white">Projects</a>
      <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block px-3 py-2 border-l-4 text-base font-medium dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white">Calendar</a>
    </div>
    <div class="pt-4 pb-3 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center px-5">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/40.jpg" alt="">
        </div>
        <div class="ml-3">
          <div class="text-base font-medium text-gray-800 dark:text-white">Tom Cook</div>
          <div class="text-sm font-medium text-gray-500 dark:text-gray-300">[email protected]</div>
        </div>
        <button type="button" class="ml-auto flex-shrink-0 bg-gray-100 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-gray-300 dark:hover:text-white">
          <span class="sr-only">View notifications</span>
          <!-- Heroicon name: outline/bell -->
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h2a2 2 0 012 2v2H5v-2a2 2 0 012-2h2m-4 0V5a2 2 0 012-2h4a2 2 0 012 2v12m-4 0h.01m-4 0h.01m-4 0h.01M12 17v2m0-4h.01M8 7h.01M16 7h.01" />
          </svg>
        </button>
      </div>
      <div class="mt-3 space-y-1">
        <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white">Your Profile</a>
        <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white">Settings</a>
        <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white">Sign out</a>
      </div>
    </div>
  </div>
</nav>

Componente de filtros

Un componente de filtros responsivo con microinteracciones, animaciones atractivas y compatibilidad con temas oscuros mediante Tailwind CSS.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 space-y-6">
    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Filters</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="relative">
            <input type="text" placeholder="Search..." class="block w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 rounded-md py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 transition duration-150 ease-in-out" />
        </div>
        <div class="relative">
            <select class="block w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 rounded-md py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 transition duration-150 ease-in-out">
                <option>Category 1</option>
                <option>Category 2</option>
                <option>Category 3</option>
            </select>
        </div>
    </div>
    <div class="flex items-center space-x-4">
        <button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-150 ease-in-out">Apply</button>
        <button class="bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-md hover:bg-gray-400 dark:hover:bg-gray-500 transition duration-150 ease-in-out">Reset</button>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 rounded-md overflow-hidden shadow transition duration-150 ease-in-out hover:shadow-lg">
            <img src="https://picsum.photos/200/100?random=1" alt="placeholder image" class="w-full h-20 object-cover" />
            <div class="p-4">
                <h3 class="text-gray-900 dark:text-white font-bold">Item 1</h3>
                <p class="text-gray-600 dark:text-gray-300">Description of Item 1</p>
            </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 rounded-md overflow-hidden shadow transition duration-150 ease-in-out hover:shadow-lg">
            <img src="https://picsum.photos/200/100?random=2" alt="placeholder image" class="w-full h-20 object-cover" />
            <div class="p-4">
                <h3 class="text-gray-900 dark:text-white font-bold">Item 2</h3>
                <p class="text-gray-600 dark:text-gray-300">Description of Item 2</p>
            </div>
        </div>
    </div>
</div>

Componente Visor de archivos

Un componente de visor de archivos inspirado en Material Design que muestra una lista de archivos con imágenes de vista previa, nombres de archivo, tamaños de archivo y un avatar de usuario. Es compatible con el diseño responsivo y el tema oscuro.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 max-w-lg mx-auto">
    <h2 class="text-xl font-semibold mb-4">File Viewer</h2>
    <div class="grid grid-cols-1 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
            <img src="https://picsum.photos/100/100?random=1" alt="File Preview" class="w-16 h-16 rounded mr-4" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 1</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">2.3 MB</p>
            </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
            <img src="https://picsum.photos/100/100?random=2" alt="File Preview" class="w-16 h-16 rounded mr-4" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 2</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">1.5 MB</p>
            </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
            <img src="https://picsum.photos/100/100?random=3" alt="File Preview" class="w-16 h-16 rounded mr-4" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 3</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">500 KB</p>
            </div>
        </div>
    </div>
</div>

Componente de menciones de usuario

Un componente de menciones de usuario diseñado con microinteracciones, con efectos responsivos y compatibilidad con temas oscuros, construido con Tailwind CSS.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition duration-300 ease-in-out transform hover:scale-105">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Mentions</h2>
    <ul class="list-disc pl-5">
        <li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
            <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-white">@john_doe</span>
        </li>
        <li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
            <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-white">@jane_doe</span>
        </li>
        <li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
            <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-white">@mark_smith</span>
        </li>
    </ul>
    <div class="mt-4">
        <img src="https://picsum.photos/200/100" alt="Random Placeholder" class="rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105">
    </div>
</div>

Componente de nube de etiquetas

Un componente de nube de etiquetas con diseño de Glassmorphism, con efectos responsivos y compatibilidad con temas oscuros.

Abrir Vista previa

                <div class="flex flex-wrap justify-center gap-2 p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="glass-tag bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-2 rounded-md shadow-md backdrop-filter backdrop-blur-sm bg-opacity-20 dark:bg-opacity-20 transition-colors duration-300 hover:scale-105 transform cursor-pointer">#Technology</div>
  <div class="glass-tag bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-2 rounded-md shadow-md backdrop-filter backdrop-blur-sm bg-opacity-20 dark:bg-opacity-20 transition-colors duration-300 hover:scale-105 transform cursor-pointer">#WebDevelopment</div>
  <div class="glass-tag bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-2 rounded-md shadow-md backdrop-filter backdrop-blur-sm bg-opacity-20 dark:bg-opacity-20 transition-colors duration-300 hover:scale-105 transform cursor-pointer">#Glassmorphism</div>
  <div class="glass-tag bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-2 rounded-md shadow-md backdrop-filter backdrop-blur-sm bg-opacity-20 dark:bg-opacity-20 transition-colors duration-300 hover:scale-105 transform cursor-pointer">#TailwindCSS</div>
  <div class="glass-tag bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-2 rounded-md shadow-md backdrop-filter backdrop-blur-sm bg-opacity-20 dark:bg-opacity-20 transition-colors duration-300 hover:scale-105 transform cursor-pointer">#Frontend</div>
  <div class="glass-tag bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-2 rounded-md shadow-md backdrop-filter backdrop-blur-sm bg-opacity-20 dark:bg-opacity-20 transition-colors duration-300 hover:scale-105 transform cursor-pointer">#DarkMode</div>
  <div class="glass-tag bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-2 rounded-md shadow-md backdrop-filter backdrop-blur-sm bg-opacity-20 dark:bg-opacity-20 transition-colors duration-300 hover:scale-105 transform cursor-pointer">#ResponsiveDesign</div>
</div>

Componente Columnas

Un componente de columnas responsivo con elementos de diseño 3D y soporte de temas oscuros mediante Tailwind CSS.

Abrir Vista previa

                <div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=1" alt="Image 1" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Column Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a description for column one. It includes engaging content about the service or feature.</p>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=2" alt="Image 2" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Column Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a description for column two. Showcase your content effectively with appealing design.</p>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=3" alt="Image 3" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Column Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a description for column three. Engage your users with powerful imagery and text.</p>
      </div>
    </div>
  </div>
</div>

Componente de diseño 3D

Un componente de diseño 3D receptivo con imágenes atractivas, que incorpora profundidad a través de sombras y capas. Incluye soporte para el modo oscuro y presenta imágenes y avatares aleatorios.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="max-w-4xl w-full p-6 rounded-lg shadow-2xl bg-white dark:bg-gray-800 transform transition-transform duration-300 hover:scale-105">
        <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">3D Layout Component</h1>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="p-4 bg-gray-50 dark:bg-gray-700 shadow-lg rounded-lg hover:shadow-2xl transition-shadow duration-300">
                <img src="https://picsum.photos/300/200?random=1" alt="Random Image 1" class="w-full h-48 object-cover rounded-lg mb-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 1</h2>
                <p class="text-gray-600 dark:text-gray-300">This is a brief description of the first card item. It's designed to entice the user.</p>
            </div>
            <div class="p-4 bg-gray-50 dark:bg-gray-700 shadow-lg rounded-lg hover:shadow-2xl transition-shadow duration-300">
                <img src="https://picsum.photos/300/200?random=2" alt="Random Image 2" class="w-full h-48 object-cover rounded-lg mb-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 2</h2>
                <p class="text-gray-600 dark:text-gray-300">This is a brief description of the second card item. It's designed to entice the user.</p>
            </div>
        </div>
        <div class="mt-6">
            <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Featured Users</h3>
            <div class="flex flex-wrap">
                <div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-12 h-12 object-cover rounded-full">
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-12 h-12 object-cover rounded-full">
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-12 h-12 object-cover rounded-full">
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User 4" class="w-12 h-12 object-cover rounded-full">
                </div>
            </div>
        </div>
    </div>
</div>

1 ... 213 214 215 216 217 ... 262

Categorías

Todos los componentes