Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente del Foro de la Comunidad

Un componente responsivo del Foro de la Comunidad diseñado con los principios de Material Design utilizando Tailwind CSS, con soporte para temas oscuros e imágenes de marcador de posición.

Abrir Vista previa

                <div class="container mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4">
            <div class="flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">John Doe</h3>
            </div>
            <p class="text-gray-700 dark:text-gray-300">This is a great place to discuss various topics and share ideas with others. Feel free to start a conversation!</p>
            <img src="https://picsum.photos/400/200" alt="Community Discussion" class="rounded-lg shadow mt-2">
            <div class="mt-3">
                <span class="text-gray-500 dark:text-gray-400 text-sm">Posted on January 1, 2023</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4">
            <div class="flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Jane Smith</h3>
            </div>
            <p class="text-gray-700 dark:text-gray-300">I love the community here! Everyone is so friendly and welcoming. Looking forward to more discussions.</p>
            <img src="https://picsum.photos/400/201" alt="Community Discussion" class="rounded-lg shadow mt-2">
            <div class="mt-3">
                <span class="text-gray-500 dark:text-gray-400 text-sm">Posted on January 2, 2023</span>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h4 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Join the Conversation</h4>
        <textarea class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md" rows="4" placeholder="Share your thoughts..."></textarea>
        <button class="mt-2 bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Post</button>
    </div>
</div>

Componente de notificaciones

Un componente de notificaciones responsivo diseñado en modo oscuro usando Tailwind CSS.

Abrir Vista previa

                <div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg max-w-md mx-auto">
  <h2 class="text-xl font-semibold mb-4">Notifications</h2>
  <div class="space-y-4">
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">John Doe</p>
        <p>Just completed a new task.</p>
        <span class="text-gray-400 text-sm">10 minutes ago</span>
      </div>
    </div>
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">Jane Smith</p>
        <p>Commented on your post.</p>
        <span class="text-gray-400 text-sm">20 minutes ago</span>
      </div>
    </div>
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">Michael Brown</p>
        <p>Sent you a friend request.</p>
        <span class="text-gray-400 text-sm">30 minutes ago</span>
      </div>
    </div>
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">Emily Davis</p>
        <p>Liked your photo.</p>
        <span class="text-gray-400 text-sm">1 hour ago</span>
      </div>
    </div>
  </div>
</div>

Componente Paneles

Un componente de tablero minimalista que muestra un diseño plano con efectos responsivos y soporte para temas oscuros, construido con Tailwind CSS.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="container mx-auto px-4 py-8">
        <h2 class="text-3xl font-semibold text-gray-800 dark:text-white mb-6">Dashboard</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Users</h3>
                <p class="text-2xl font-bold text-gray-800 dark:text-white">1,234</p>
                <img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
            </div>
            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Sales</h3>
                <p class="text-2xl font-bold text-gray-800 dark:text-white">567</p>
                <img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
            </div>
            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Revenue</h3>
                <p class="text-2xl font-bold text-gray-800 dark:text-white">$12,345</p>
                <img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
            </div>
            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Sessions</h3>
                <p class="text-2xl font-bold text-gray-800 dark:text-white">1,890</p>
                <img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
            </div>
        </div>
        <div class="mt-8 bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
            <h3 class="text-lg font-medium text-gray-800 dark:text-white">Latest Users</h3>
            <ul class="divide-y divide-gray-200 dark:divide-gray-700">
                <li class="py-4 flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4" />
                    <div>
                        <p class="text-gray-800 dark:text-white">John Doe</p>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
                    </div>
                </li>
                <li class="py-4 flex items-center">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4" />
                    <div>
                        <p class="text-gray-800 dark:text-white">Jane Doe</p>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
                    </div>
                </li>
                <li class="py-4 flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4" />
                    <div>
                        <p class="text-gray-800 dark:text-white">Mike Smith</p>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

Componente de galería

Un componente de galería de estilo vintage retro con efectos responsivos y soporte para temas oscuros.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Retro Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=4" alt="Gallery Image 4" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=5" alt="Gallery Image 5" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=6" alt="Gallery Image 6" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=7" alt="Gallery Image 7" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=8" alt="Gallery Image 8" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        .bg-white { background-color: #1a202c; }
        .text-gray-800 { color: #edf2f7; }
    }
</style>

Componente de retroalimentación

Un componente de retroalimentación receptivo que incorpora microinteracciones con animaciones atractivas. Está diseñado para admitir el modo oscuro y presenta elementos para los comentarios de los usuarios con imágenes de marcador de posición y avatares.

Abrir Vista previa

                <div class="flex flex-col items-center p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
  <h2 class="text-lg font-semibold dark:text-white mb-4">We Value Your Feedback!</h2>
  <div class="flex items-center mb-4">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
    <textarea class="ml-3 w-full h-24 p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-shadow duration-200 ease-in-out" placeholder="Share your thoughts..."></textarea>
  </div>
  <div class="flex justify-between w-full">
    <button class="bg-blue-600 text-white font-semibold py-2 px-4 rounded-md transition-transform transform hover:scale-105 duration-200 ease-in-out">Submit</button>
    <button class="bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded-md hover:bg-gray-400 transition-colors duration-200 ease-in-out dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">Cancel</button>
  </div>
  <p class="text-sm text-gray-500 dark:text-gray-400 mt-3">Your feedback helps us improve!</p>
</div>

Componente de incrustación de medios

Un componente de incrustación de medios con un estilo de diseño 3D para profundidad y compromiso, efectos receptivos y compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="max-w-sm mx-auto p-5 bg-white rounded-lg shadow-lg dark:bg-gray-800 transition-transform transform hover:scale-105 shadow-lg dark:shadow-2xl">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-lg" />
        <div class="ml-3">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">2 hours ago</p>
        </div>
    </div>
    <div class="mb-4">
        <iframe class="w-full h-64 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div>
        <p class="text-gray-700 dark:text-gray-300">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac neque euismod, scelerisque erat a, sollicitudin odio. Integer ac venenatis elit.
        </p>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a202c;
    }
}
</style>

Componentes funcionales Componente

Un componente con un estilo de diseño de glassmorphism con efectos responsivos y soporte para temas oscuros, utilizando Tailwind CSS.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg rounded-lg shadow-lg p-6 w-full max-w-md">
        <div class="flex flex-row items-center mb-4">
            <img class="w-16 h-16 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div class="ml-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-sm text-gray-600 dark:text-gray-300">Web Developer</p>
            </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">
            Passionate about building intuitive and dynamic user experiences. I love coding and design.
        </p>
        <img class="rounded-lg shadow-lg mb-4" src="https://picsum.photos/400/200" alt="Random Image" />
        <button class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Contact Me</button>
    </div>
</div>
<style>
    /* Dark Mode CSS */
    @media (prefers-color-scheme: dark) {
        .bg-opacity-30 {
            background-color: rgba(255, 255, 255, 0.3);
        }
    }
</style>

Componentes de autenticación

Un componente de autenticación responsivo diseñado en la interfaz de usuario del modo oscuro, con formularios de inicio de sesión y registro con imágenes de marcador de posición.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-900 p-4">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm w-full">
        <h2 class="text-white text-2xl mb-6 text-center">Welcome Back</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="email">Email</label>
                <input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="email" id="email" placeholder="[email protected]" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-300 mb-2" for="password">Password</label>
                <input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="password" id="password" placeholder="********" required>
            </div>
            <button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 rounded focus:outline-none focus:ring focus:ring-indigo-400 transition duration-200">Login</button>
        </form>
        <div class="mt-4 text-center">
            <span class="text-gray-400">or</span>
        </div>
        <div class="mt-4">
            <p class="text-gray-400 text-center">Don't have an account? <a href="#" class="text-indigo-400 hover:underline">Sign up</a></p>
        </div>
    </div>
</div>

<div class="min-h-screen flex items-center justify-center bg-gray-900 p-4 mt-10">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm w-full">
        <h2 class="text-white text-2xl mb-6 text-center">Create Account</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="name">Name</label>
                <input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="text" id="name" placeholder="John Doe" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="email-signup">Email</label>
                <input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="email" id="email-signup" placeholder="[email protected]" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-300 mb-2" for="password-signup">Password</label>
                <input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="password" id="password-signup" placeholder="********" required>
            </div>
            <button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 rounded focus:outline-none focus:ring focus:ring-indigo-400 transition duration-200">Sign Up</button>
        </form>
        <div class="mt-4 text-center">
            <span class="text-gray-400">or</span>
        </div>
        <div class="mt-4">
            <p class="text-gray-400 text-center">Already have an account? <a href="#" class="text-indigo-400 hover:underline">Login</a></p>
        </div>
    </div>
</div>

Componente Mega Menú

Un componente de mega menú receptivo diseñado con un estilo skeuomórfico usando Tailwind CSS, con soporte para el modo oscuro.

Abrir Vista previa

                <div class="relative bg-white dark:bg-gray-800">
    <nav class="flex items-center justify-between p-4 shadow-lg">
        <div class="text-2xl font-bold text-gray-800 dark:text-white">My Website</div>
        <ul class="flex space-x-6">
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">Home</a></li>
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">About</a></li>
            <li class="relative">
                <a href="#" class="text-gray-800 dark:text-white hover:underline">Services</a>
                <div class="absolute left-0 hidden mt-2 w-48 bg-white dark:bg-gray-700 shadow-lg rounded-lg transition duration-300 transform scale-95 hover:scale-100" id="menu">
                    <div class="p-4">
                        <h3 class="text-gray-800 dark:text-white font-semibold">Web Design</h3>
                        <img src="https://picsum.photos/200/100?random=1" alt="Web Design" class="my-2 rounded-lg shadow-lg">
                        <p class="text-gray-600 dark:text-gray-300">Creating visually appealing websites.</p>
                    </div>
                    <div class="border-t border-gray-200 dark:border-gray-600"></div>
                    <div class="p-4">
                        <h3 class="text-gray-800 dark:text-white font-semibold">SEO Services</h3>
                        <img src="https://picsum.photos/200/100?random=2" alt="SEO Services" class="my-2 rounded-lg shadow-lg">
                        <p class="text-gray-600 dark:text-gray-300">Optimizing search engine results.</p>
                    </div>
                    <div class="border-t border-gray-200 dark:border-gray-600"></div>
                    <div class="p-4">
                        <h3 class="text-gray-800 dark:text-white font-semibold">Marketing</h3>
                        <img src="https://picsum.photos/200/100?random=3" alt="Marketing" class="my-2 rounded-lg shadow-lg">
                        <p class="text-gray-600 dark:text-gray-300">Promoting your business effectively.</p>
                    </div>
                </div>
            </li>
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">Contact</a></li>
        </ul>
    </nav>
    <div class="hidden md:block mt-4 p-4 bg-gray-100 dark:bg-gray-600 rounded-lg">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">Team Members</h2>
        <div class="flex space-x-4 mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-12 h-12 rounded-full" alt="Avatar">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" class="w-12 h-12 rounded-full" alt="Avatar">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" class="w-12 h-12 rounded-full" alt="Avatar">
        </div>
    </div>
</div>
<style>
    /* Dark mode styles */
    .dark .bg-gray-800 {
        background-color: #333;
    }
    .dark .text-gray-800 {
        color: #f7fafc;
    }
</style>

Componente de ventana de chat

Un componente de ventana de chat diseñado en estilo brutalismo con alto contraste, efectos responsivos y compatibilidad con temas oscuros.

Abrir Vista previa

                <div class="max-w-lg mx-auto mt-10 p-4 bg-gray-100 rounded-lg shadow-lg dark:bg-gray-800 border-2 border-black dark:border-gray-600">
    <div class="flex items-center justify-between mb-4">
        <h2 class="text-xl font-bold text-black dark:text-white">Chat Room</h2>
        <button class="px-3 py-1 text-sm font-semibold text-white bg-blue-600 rounded hover:bg-blue-500 focus:outline-none">Join</button>
    </div>
    <div class="border-2 border-black dark:border-gray-600 h-64 overflow-y-scroll p-4">
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <span class="font-bold text-black dark:text-white">John Doe:</span>
                <p class="text-black dark:text-gray-200">Hello! How is everyone?</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <span class="font-bold text-black dark:text-white">Jane Smith:</span>
                <p class="text-black dark:text-gray-200">I'm doing great, thanks for asking!</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <span class="font-bold text-black dark:text-white">Mike Brown:</span>
                <p class="text-black dark:text-gray-200">Excited for the weekend!</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <span class="font-bold text-black dark:text-white">Emily White:</span>
                <p class="text-black dark:text-gray-200">Same here! Any plans?</p>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <textarea rows="3" class="w-full p-2 border-2 border-black dark:border-gray-600 rounded" placeholder="Type a message..."></textarea>
        <button class="mt-2 px-3 py-1 text-sm font-semibold text-white bg-green-600 rounded hover:bg-green-500 focus:outline-none">Send</button>
    </div>
</div>

1 ... 289 290 291 292 293 ... 307

Categorías

Todos los componentes