Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente del sistema de clasificación

Un componente del sistema de clasificación diseñado en un estilo retro / vintage, utilizando un esquema de color complementario y una interfaz compleja para el contenido del blog. Este componente es compatible con el modo oscuro y responde mediante Tailwind CSS.

Abrir Vista previa

                <div class="max-w-md mx-auto bg-gray-50 dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-10">
    <h2 class="text-center text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Rate Our Content</h2>
    <div class="flex items-center justify-center mb-6">
        <img src="https://picsum.photos/60/60" alt="Blog Post" class="rounded-full border-2 border-blue-500 mr-3">
        <div>
            <p class="text-lg text-gray-700 dark:text-gray-300">Fantastic Blog Post Title</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Published on January 1, 2023</p>
        </div>
    </div>
    <div class="flex justify-center mb-6">
        <span class="text-yellow-400">★</span>
        <span class="text-yellow-400">★</span>
        <span class="text-yellow-400">★</span>
        <span class="text-yellow-400">★</span>
        <span class="text-gray-300">★</span>
    </div>
    <textarea class="w-full h-24 p-3 border border-blue-400 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" placeholder="Leave your feedback here..."></textarea>
    <button class="w-full mt-3 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition duration-300">Submit Rating</button>
    <div class="flex items-center justify-between mt-4 text-gray-700 dark:text-gray-300">
        <span>👍 120 Likes</span>
        <span>💔 5 Dislikes</span>
    </div>
</div>

Componente Visor de archivos de neumorfismo

Un componente de visor de archivos de estilo neumorfismo para redes sociales con un esquema de color complementario y complejidad moderada. Es responsivo y admite el tema oscuro usando Tailwind CSS.

Abrir Vista previa

                <div class="p-6 max-w-sm mx-auto bg-gray-100 dark:bg-gray-800 rounded-xl shadow-lg space-y-4">
  <div class="flex items-center space-x-4">
    <div class="flex-shrink-0">
      <svg class="h-12 w-12 text-teal-500 dark:text-teal-300" 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="M9 17v-5m0 0V5c0-1.1.9-2 2-2h2a2 2 0 012 2v5m0 0v5a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
    </div>
    <div class="flex-grow">
      <div class="text-xl font-medium text-black dark:text-white">Document.pdf</div>
      <p class="text-gray-500 dark:text-gray-400">1.5 MB</p>
    </div>
  </div>
  <div class="flex justify-between items-center">
    <button class="px-4 py-2 text-sm text-blue-600 dark:text-blue-300 font-semibold rounded-full border border-transparent bg-blue-200 dark:bg-blue-700 hover:bg-blue-300 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Download</button>
    <button class="px-4 py-2 text-sm text-red-600 dark:text-red-300 font-semibold rounded-full border border-transparent bg-red-200 dark:bg-red-700 hover:bg-red-300 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">Delete</button>
  </div>
  <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5">
    <div class="bg-teal-500 dark:bg-teal-300 h-2.5 rounded-full" style="width: 50%"></div>
  </div>
</div>

<style>
  .shadow-lg {
    box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
  }
  .dark .shadow-lg {
    box-shadow: 7px 7px 15px #6b6b6b, -7px -7px 15px #a1a1a1;
  }
</style>

Componente CAPTCHA

Componente CAPTCHA responsivo en estilo Retro/Vintage con esquema de color Pastel y soporte para modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-900 p-4">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md max-w-sm w-full">
    <div class="text-center mb-6">
      <h2 class="text-2xl font-serif text-gray-700 dark:text-gray-300 mb-4">Security Check</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400">Please verify you are not a robot.</p>
    </div>

    <div class="mb-6 border-2 border-dashed border-gray-400 dark:border-gray-600 p-4 rounded">
      <p class="text-center text-xl font-mono text-gray-800 dark:text-gray-200 tracking-widest">uGh7fX</p>
    </div>

    <div class="mb-6">
      <label for="captchaInput" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Enter the text above:</label>
      <input type="text" id="captchaInput" name="captchaInput" class="form-input mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
    </div>

    <button type="button" class="w-full bg-gradient-to-r from-pink-400 to-purple-500 hover:from-pink-500 hover:to-purple-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
      Verify
    </button>
  </div>
</div>

Componente de Componentes Sociales

Un componente simple de redes sociales diseñado con Skeuomorphism y un esquema de color monocromático para el contenido del blog. Cuenta con un diseño responsivo y soporte de temas oscuros usando Tailwind CSS.

Abrir Vista previa

                <div class="max-w-sm mx-auto bg-gray-100 dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden md:max-w-2xl m-5">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/social/400/300" alt="Social image">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-gray-500 dark:text-gray-400 font-semibold">Social Update</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline">Engaging Title Here</a>
      <p class="mt-2 text-gray-500 dark:text-gray-400">This is a short description of the social update. It's designed to be concise and engaging for blog readers.</p>
      <div class="mt-4 flex items-center">
        <img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <div class="text-sm">
          <p class="text-gray-900 dark:text-white leading-none">John Doe</p>
          <p class="text-gray-600 dark:text-gray-500">Posted on Oct 26, 2023</p>
        </div>
      </div>
    </div>
  </div>
</div>

Componente Botones

Componente de botones responsivos con diseño de materiales, combinación de colores triádica y compatibilidad con temas oscuros.

Abrir Vista previa

                <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-gray-800">
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-blue-700 dark:hover:bg-blue-900 transition duration-300 ease-in-out">Primary Button</button>
  <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-green-700 dark:hover:bg-green-900 transition duration-300 ease-in-out">Secondary Button</button>
  <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-red-700 dark:hover:bg-red-900 transition duration-300 ease-in-out">Danger Button</button>
  <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-yellow-700 dark:hover:bg-yellow-900 transition duration-300 ease-in-out">Warning Button</button>
  <button class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-purple-700 dark:hover:bg-purple-900 transition duration-300 ease-in-out">Info Button</button>
  <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-gray-700 dark:hover:bg-gray-900 transition duration-300 ease-in-out">Neutral Button</button>
</div>

Barra lateral de blog simple y vibrante

Un componente de barra lateral simple y receptivo para el contenido del blog, diseñado con colores vibrantes y una sensación similar a la de un material utilizando Tailwind CSS. Incluye enlaces de navegación y una sección de perfil de usuario. Admite el modo oscuro usando el prefijo dark: de Tailwind. Fijo en pantallas más grandes, oculto en pantallas más pequeñas.

Abrir Vista previa

                <!-- Sidebar Component -->
<div class="hidden lg:block w-64 bg-purple-600 text-white dark:bg-purple-800 dark:text-yellow-200 h-screen fixed top-0 left-0 p-5 space-y-6">
    <!-- Sidebar Header -->
    <div class="flex items-center space-x-3">
        <svg class="w-8 h-8 text-yellow-300 dark:text-yellow-100" 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="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9m2 10V7a2 2 0 00-2-2h-1C9 4 7 2 5 2c-2 0-3 1.5-3 3v15a1 1 0 001 1h16z"></path></svg>
        <span class="text-2xl font-semibold text-yellow-300 dark:text-yellow-100">Blog Name</span>
    </div>

    <!-- Navigation -->
    <nav class="space-y-2">
        <a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
            Home
        </a>
        <a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
            Categories
        </a>
        <a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
            Popular
        </a>
        <a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
            About
        </a>
    </nav>

    <!-- User Profile (Optional) - Position at bottom -->
    <div class="absolute bottom-5 left-5 right-5">
         <div class="flex items-center space-x-3 p-3 bg-purple-700 dark:bg-purple-900 rounded">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/thumb/women/44.jpg" alt="User Avatar">
            <div class="flex flex-col">
                <span class="font-semibold text-yellow-200 dark:text-yellow-100 text-sm">Jane Doe</span>
                <span class="text-xs text-purple-200 dark:text-purple-300">View Profile</span>
            </div>
        </div>
    </div>
</div>

Componentes de mejora de la navegación

Un componente de navegación de estilo retro/vintage diseñado para el consumo de blogs y contenido con soporte para temas oscuros.

Abrir Vista previa

                <nav class="bg-gray-800 text-white p-4 dark:bg-gray-900">
    <div class="container mx-auto flex justify-between items-center">
        <a href="#" class="text-2xl font-bold hover:text-blue-400 dark:hover:text-blue-300">Retro Blog</a>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Home</a>
            <a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">About</a>
            <a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Blog</a>
            <a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Contact</a>
        </div>
        <div class="md:hidden">
            <button class="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-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden">
        <a href="#" class="block py-2 px-4 hover:bg-gray-700">Home</a>
        <a href="#" class="block py-2 px-4 hover:bg-gray-700">About</a>
        <a href="#" class="block py-2 px-4 hover:bg-gray-700">Blog</a>
        <a href="#" class="block py-2 px-4 hover:bg-gray-700">Contact</a>
    </div>
</nav>

<main class="bg-gray-100 dark:bg-gray-800 p-8">
    <h1 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">Welcome to the Retro Blog!</h1>
    <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
        <article class="bg-white dark:bg-gray-900 p-6 rounded shadow hover:shadow-lg transition-shadow">
            <img src="https://picsum.photos/200/150" alt="Blog Post" class="rounded mb-4">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 1</h2>
            <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="#" class="mt-4 inline-block text-blue-500 font-semibold hover:underline dark:text-blue-400">Read More</a>
        </article>
        <article class="bg-white dark:bg-gray-900 p-6 rounded shadow hover:shadow-lg transition-shadow">
            <img src="https://picsum.photos/200/151" alt="Blog Post" class="rounded mb-4">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 2</h2>
            <p class="text-gray-600 dark:text-gray-400">Consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            <a href="#" class="mt-4 inline-block text-blue-500 font-semibold hover:underline dark:text-blue-400">Read More</a>
        </article>
        <article class="bg-white dark:bg-gray-900 p-6 rounded shadow hover:shadow-lg transition-shadow">
            <img src="https://picsum.photos/200/152" alt="Blog Post" class="rounded mb-4">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 3</h2>
            <p class="text-gray-600 dark:text-gray-400">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
            <a href="#" class="mt-4 inline-block text-blue-500 font-semibold hover:underline dark:text-blue-400">Read More</a>
        </article>
    </div>
</main>

<footer class="bg-gray-800 text-white p-4 dark:bg-gray-900 mt-8">
    <div class="container mx-auto text-center">
        <p>&copy; 2023 Retro Blog. All rights reserved.</p>
    </div>
</footer>

Componente de formularios

Un componente de formulario complejo y responsivo con soporte de tema oscuro para sitios web de blogs/contenido, diseñado en un estilo minimalista/plano utilizando un esquema de color análogo.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-6 md:p-12">
  <div class="container mx-auto">
    <div class="flex flex-col lg:flex-row bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
      
      <!-- Form Section -->
      <div class="lg:w-1/2 p-8 lg:p-12">
        <h2 class="text-3xl font-bold mb-6 text-gray-800 dark:text-white">Contact Us</h2>
        
        <form>
          <div class="mb-6">
            <label for="name" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Name</label>
            <input type="text" id="name" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600" placeholder="Your Name">
          </div>

          <div class="mb-6">
            <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
            <input type="email" id="email" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600" placeholder="Your Email">
          </div>

          <div class="mb-6">
            <label for="subject" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Subject</label>
            <input type="text" id="subject" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600" placeholder="Subject of your message">
          </div>

          <div class="mb-6">
            <label for="message" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Message</label>
            <textarea id="message" rows="6" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600" placeholder="Your Message"></textarea>
          </div>

          <div class="flex items-center justify-between">
            <button type="button" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800">
              Send Message
            </button>
          </div>
        </form>
      </div>

      <!-- Image/Content Section (Analogous Color Scheme Example) -->
      <div class="lg:w-1/2 bg-gradient-to-br from-blue-500 to-purple-600 dark:from-blue-700 dark:to-purple-900 p-8 lg:p-12 flex items-center justify-center">
        <div class="text-center">
          <h3 class="text-2xl font-bold text-white mb-4">Get in Touch</h3>
          <p class="text-white text-opacity-90 mb-6">We'd love to hear from you! Fill out the form to get in touch with our team.</p>
          
          <!-- Example of complex elements: Icons and contact info -->
          <div class="text-white text-opacity-90">
            <div class="flex items-center justify-center mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0l-4.242-4.243m2.828 2.828l1.414-1.414m-5.656-5.656l1.414-1.414m6.364 6.364l-1.414 1.414m-7.071-7.071l1.414-1.414M3.432 7.393c-2.102 2.101-2.102 5.514 0 7.615a5.656 5.656 0 008.012 0l-4.243-4.242a1.997 1.997 0 010-2.828l4.243-4.242a5.656 5.656 0 00-8.012 0z"/>
              </svg>
              <p>123 Main Street, Anytown, USA</p>
            </div>
            <div class="flex items-center justify-center mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8m-7 13a9 9 0 110-18 9 9 0 010 18z"/>
              </svg>
              <p>[email protected]</p>
            </div>
            <div class="flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
              </svg>
              <p>+1 234 567 890</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Componente de tablas de datos

Un componente de tabla de datos receptivo con un diseño minimalista y plano, adecuado para sitios web comerciales / corporativos, con soporte para temas oscuros.

Abrir Vista previa

                <div class="overflow-x-auto">
    <table class="min-w-full bg-white dark:bg-gray-800">
        <thead>
            <tr class="w-full bg-gray-200 dark:bg-gray-700">
                <th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">#</th>
                <th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">Name</th>
                <th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">Email</th>
                <th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">Avatar</th>
            </tr>
        </thead>
        <tbody>
            <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">1</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">John Doe</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
            </tr>
            <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">2</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">Jane Smith</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
            </tr>
            <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">3</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">Alice Johnson</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
            </tr>
            <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">4</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">Bob Williams</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
            </tr>
        </tbody>
    </table>
</div>

Componente del Foro de la Comunidad

Componente del foro de la comunidad con diseño de Glassmorphism, combinación de colores vibrantes, nivel de complejidad complejo, para fines de blog / contenido, diseño receptivo con soporte de tema oscuro, utilizando Tailwind CSS.

Abrir Vista previa

                <div class="bg-gray-100 dark:bg-gray-900 py-8">
  <div class="container mx-auto px-4">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-white mb-8">Community Forum</h1>
    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- Forum Categories -->
      <div class="md:col-span-2 backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 rounded-lg p-6 shadow-lg">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Categories</h2>
        
        <!-- Category Card -->
        <div class="mb-4 p-4 backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg shadow-md flex items-center justify-between">
          <div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white">General Discussion</h3>
            <p class="text-gray-600 dark:text-gray-300">Discuss anything and everything.</p>
          </div>
          <span class="text-sm font-semibold text-blue-600 dark:text-blue-400">500+ Topics</span>
        </div>
        
        <!-- Category Card -->
        <div class="mb-4 p-4 backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg shadow-md flex items-center justify-between">
          <div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Announcements</h3>
            <p class="text-gray-600 dark:text-gray-300">Important news and updates.</p>
          </div>
          <span class="text-sm font-semibold text-green-600 dark:text-green-400">100+ Topics</span>
        </div>

        <!-- Add More Categories -->

      </div>

      <!-- Recent Activity -->
      <div class="backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 rounded-lg p-6 shadow-lg">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Recent Activity</h2>

        <!-- Activity Item -->
        <div class="mb-4 pb-4 border-b border-gray-300 dark:border-gray-600 last:border-b-0">
          <p class="text-gray-700 dark:text-gray-300"><span class="font-semibold text-gray-800 dark:text-white">John Doe</span> posted in <span class="font-semibold text-blue-600 dark:text-blue-400">General Discussion</span></p>
          <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
        </div>

        <!-- Activity Item -->
        <div class="mb-4 pb-4 border-b border-gray-300 dark:border-gray-600 last:border-b-0">
          <p class="text-gray-700 dark:text-gray-300"><span class="font-semibold text-gray-800 dark:text-white">Jane Smith</span> replied in <span class="font-semibold text-green-600 dark:text-green-400">Announcements</span></p>
          <p class="text-sm text-gray-500 dark:text-gray-400">1 hour ago</p>
        </div>

        <!-- Add More Activity -->

      </div>
    </div>
  </div>
</div>

1 ... 115 116 117 118 119 ... 262

Categorías

Todos los componentes