Todos los componentes

Componente Pestañas

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

Abrir vista previa

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

Componente Pestañas

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

Abrir vista previa

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

Componente de formulario de pago

Componente de formulario de pago de diseño de materiales con esquema de color monocromático para fines de cartera, receptivo con soporte de tema oscuro.

Abrir vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-6">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="p-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Checkout</h2>
      <form>
        <div class="mb-4">
          <label for="name" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Full Name</label>
          <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="John Doe">
        </div>
        <div class="mb-4">
          <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-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="[email protected]">
        </div>
        <div class="mb-4">
          <label for="address" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Address</label>
          <input type="text" id="address" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="123 Main St">
        </div>
        <div class="mb-4">
          <label for="city" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">City</label>
          <input type="text" id="city" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Anytown">
        </div>
        <div class="mb-4">
          <label for="zip" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Zip Code</label>
          <input type="text" id="zip" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="12345">
        </div>
        <div class="mb-6">
          <label for="card-number" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Card Number</label>
          <input type="text" id="card-number" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="**** **** **** ****">
        </div>
        <div class="flex items-center justify-between">
          <button type="button" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:hover:bg-gray-600">
            Submit Payment
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

Componente Mapas

Un componente de mapa complejo y vibrante para redes sociales, con microinteracciones, diseño responsivo y compatibilidad con el modo oscuro mediante Tailwind CSS.

Abrir vista previa

                <div class="relative h-screen bg-gray-100 dark:bg-gray-900 overflow-hidden">
  <!-- Map Area -->
  <div class="absolute inset-0">
    <img src="https://picsum.photos/1600/900" alt="Map Background" class="w-full h-full object-cover filter blur-sm opacity-70">
  </div>

  <!-- Content Overlay -->
  <div class="relative z-10 flex items-center justify-center h-full">
    <div class="bg-white dark:bg-gray-800 bg-opacity-90 dark:bg-opacity-90 rounded-lg shadow-xl p-6 max-w-md mx-auto transform transition duration-500 ease-in-out hover:scale-105">
      <div class="text-center">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Explore Connections Nearby</h2>
        
        <!-- User Avatars Grid with Microinteractions -->
        <div class="grid grid-cols-4 gap-4 mb-6">
          <div class="relative group">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-pink-500 dark:border-pink-400 group-hover:border-pink-700 dark:group-hover:border-pink-600 transition duration-300 ease-in-out transform group-hover:scale-110">
            <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-green-500 dark:bg-green-400"></span>
          </div>
          <div class="relative group">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 dark:border-blue-400 group-hover:border-blue-700 dark:group-hover:border-blue-600 transition duration-300 ease-in-out transform group-hover:scale-110">
             <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-yellow-500 dark:bg-yellow-400"></span>
          </div>
          <div class="relative group">
            <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500 dark:border-purple-400 group-hover:border-purple-700 dark:group-hover:border-purple-600 transition duration-300 ease-in-out transform group-hover:scale-110">
             <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-gray-500 dark:bg-gray-400"></span>
          </div>
          <div class="relative group">
            <img src="https://randomuser.me/api/portraits/women/91.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-red-500 dark:border-red-400 group-hover:border-red-700 dark:group-hover:border-red-600 transition duration-300 ease-in-out transform group-hover:scale-110">
             <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-green-500 dark:bg-green-400"></span>
          </div>
           <div class="relative group">
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-teal-500 dark:border-teal-400 group-hover:border-teal-700 dark:group-hover:border-teal-600 transition duration-300 ease-in-out transform group-hover:scale-110">
             <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-red-500 dark:bg-red-400"></span>
          </div>
          <div class="relative group">
            <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-orange-500 dark:border-orange-400 group-hover:border-orange-700 dark:group-hover:border-orange-600 transition duration-300 ease-in-out transform group-hover:scale-110">
             <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-green-500 dark:bg-green-400"></span>
          </div>
           <div class="relative group">
            <img src="https://randomuser.me/api/portraits/men/88.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-indigo-500 dark:border-indigo-400 group-hover:border-indigo-700 dark:group-hover:border-indigo-600 transition duration-300 ease-in-out transform group-hover:scale-110">
             <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-gray-500 dark:bg-gray-400"></span>
          </div>
          <div class="relative group">
            <img src="https://randomuser.me/api/portraits/women/23.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-pink-500 dark:border-pink-400 group-hover:border-pink-700 dark:group-hover:border-pink-600 transition duration-300 ease-in-out transform group-hover:scale-110">
             <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-green-500 dark:bg-green-400"></span>
          </div>
        </div>
        
        <!-- Interactive Buttons -->
        <div class="flex justify-center space-x-4">
          <button class="bg-pink-600 dark:bg-pink-700 text-white py-2 px-6 rounded-full font-semibold hover:bg-pink-700 dark:hover:bg-pink-800 transition duration-300 ease-in-out transform hover:scale-105 shadow-lg">
            Find Friends
          </button>
          <button class="bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white py-2 px-6 rounded-full font-semibold hover:bg-gray-400 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105 shadow-lg">
            View Map
          </button>
        </div>

        <!-- Status Indicators with Animations -->
        <div class="mt-6 text-sm text-gray-600 dark:text-gray-300">
          <p class="flex items-center justify-center">
            <span class="h-2 w-2 rounded-full bg-green-500 dark:bg-green-400 mr-2 animate-pulse"></span>
            5 friends online nearby
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Componente de retroalimentación

Un componente de retroalimentación receptivo diseñado con los principios de Material Design, incorporando tonos tierra y equipado para soporte de modo oscuro. Este componente está diseñado específicamente para paneles y cuenta con varios elementos interactivos.

Abrir vista previa

                <div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">User Feedback</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Feedback Item -->
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3" />
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
            </div>
            <p class="text-gray-600 dark:text-gray-300">"The new dashboard layout is intuitive and allows for quick access to data. I really appreciate the improvements!"</p>
            <div class="mt-2">
                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Rating: </span>
                <span class="text-yellow-500 font-bold">⭐⭐⭐⭐⭐</span>
            </div>
        </div>
        <!-- Feedback Item -->
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3" />
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
            </div>
            <p class="text-gray-600 dark:text-gray-300">"Great features! However, I would like to see more customization options for the charts."</p>
            <div class="mt-2">
                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Rating: </span>
                <span class="text-yellow-500 font-bold">⭐⭐⭐⭐</span>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <textarea class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-500" rows="4" placeholder="Leave your feedback here..."></textarea>
    </div>
    <button class="mt-4 bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">Submit Feedback</button>
</div>

Componente de formas brutalistas

Un componente de formularios diseñado con una estética brutalista, utilizando colores pastel, y adecuado para sitios web de negocios/corporativos. Cuenta con un diseño responsivo con soporte para temas oscuros.

Abrir vista previa

                <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-pink-600 dark:text-pink-400 mb-4">Contact Us</h2>
    <form>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
            <input class="block w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" type="text" id="name" placeholder="Your Name" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
            <input class="block w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" type="email" id="email" placeholder="Your Email" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="message">Message</label>
            <textarea class="block w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" id="message" rows="4" placeholder="Your Message" required></textarea>
        </div>
        <div class="flex items-center justify-between">
            <button type="submit" class="bg-pink-600 text-white font-bold py-2 px-4 rounded hover:bg-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-600 dark:bg-pink-500 dark:hover:bg-pink-400">Send</button>
        </div>
    </form>
    <div class="mt-6 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
        <p class="text-gray-600 dark:text-gray-300">Stay connected with us!</p>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="rounded-md shadow-md object-cover w-full">
    </div>
</div>

Componentes de visualización de datos

Componentes de visualización de datos con estilo neumorfismo para una cartera con compatibilidad con temas oscuros

Abrir vista previa

                <div class="bg-gray-300 dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-gray-800 dark:text-gray-200 text-2xl font-semibold mb-4">Data Visualization</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Chart Component -->
    <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl">
      <h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">Sales Analytics</h3>
      <img src="https://picsum.photos/400/200?random=1" alt="Sales Chart" class="rounded-md" />
      <p class="text-gray-600 dark:text-gray-400 mt-2">An overview of sales performance over the last year.</p>
    </div>
    <!-- Chart Component -->
    <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl">
      <h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">User Engagement</h3>
      <img src="https://picsum.photos/400/200?random=2" alt="User Engagement Chart" class="rounded-md" />
      <p class="text-gray-600 dark:text-gray-400 mt-2">Statistics related to user interaction across different platforms.</p>
    </div>
    <!-- Profile Component -->
    <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl col-span-1 md:col-span-2">
      <h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">Team Profile</h3>
      <div class="flex items-center mb-3">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member" class="w-12 h-12 rounded-full mr-3" />
        <div class="text-gray-900 dark:text-gray-100">
          <p class="font-semibold">Jane Doe</p>
          <p class="text-gray-600 dark:text-gray-400">Data Scientist</p>
        </div>
      </div>
      <p class="text-gray-600 dark:text-gray-400">Jane specializes in data analysis and machine learning, with over 5 years of experience.</p>
    </div>
  </div>
</div>

Acordeón de Redes Sociales

Componente de acordeón responsivo con soporte de tema oscuro para interfaces de redes sociales, utilizando principios de diseño de materiales, un esquema de color triádico y un diseño simple. Sin JavaScript, solo HTML con clases CSS de Tailwind. Los estilos de modo oscuro se incluyen con el prefijo dark:.

Abrir vista previa

                <div x-data='{ open: false }' class='max-w-md mx-auto bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md overflow-hidden md:max-w-lg my-4'>
    <div class='md:flex'>
        <div class='w-full p-4'>
            <div class='flex justify-between items-center'>
                <h2 class='text-lg leading-6 font-medium text-stone-900 dark:text-stone-100'>Accordion Title 1</h2>
                <button x-on:click='open = !open' class='text-stone-500 dark:text-stone-300 hover:text-stone-600 dark:hover:text-stone-400 focus:outline-none'>
                    <svg class='h-6 w-6 transform' :class='{ "rotate-180": open }' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
                        <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'></path>
                    </svg>
                </button>
            </div>
            <div x-show='open' class='mt-2 text-sm text-stone-600 dark:text-stone-400'>
                <p>This is the collapsible content for Accordion Item 1. It provides additional information or details related to the title. The design is simple and follows Material Design principles with subtle shadows and rounded corners.</p>
            </div>
        </div>
    </div>
</div>

<div x-data='{ open: false }' class='max-w-md mx-auto bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md overflow-hidden md:max-w-lg my-4'>
    <div class='md:flex'>
        <div class='w-full p-4'>
            <div class='flex justify-between items-center'>
                <h2 class='text-lg leading-6 font-medium text-stone-900 dark:text-stone-100'>Accordion Title 2</h2>
                <button x-on:click='open = !open' class='text-stone-500 dark:text-stone-300 hover:text-stone-600 dark:hover:text-stone-400 focus:outline-none'>
                    <svg class='h-6 w-6 transform' :class='{ "rotate-180": open }' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
                        <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'></path>
                    </svg>
                </button>
            </div>
            <div x-show='open' class='mt-2 text-sm text-stone-600 dark:text-stone-400'>
                <p>This is the collapsible content for Accordion Item 2. You can add more text, images, or other HTML elements here. The triadic color scheme is subtly applied through text and background colors that are somewhat evenly spaced on the color wheel, like various shades of grey/stone which could be paired with other triadic colors like orange and green in a larger layout.</p>
            </div>
        </div>
    </div>
</div>

Componente Componentes de visualización de contenido

Un componente de visualización de contenido receptivo diseñado para sitios web comerciales/corporativos con soporte para modo oscuro y una combinación de colores vibrantes. Incluye secciones para avatares de usuario, contenido de texto e imágenes.

Abrir vista previa

                <div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-4">Our Team</h2>
    <div class="grid md:grid-cols-2 gap-5">
        <div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
            <img class="w-full rounded-lg" src="https://picsum.photos/300/200" alt="Content Image">
            <div class="flex items-center mt-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                <div class="ml-3">
                    <p class="text-lg font-semibold">John Doe</p>
                    <p class="text-sm text-gray-400">CEO</p>
                </div>
            </div>
            <p class="mt-2 text-gray-300">John is the visionary behind the company, driving innovation and strategies.</p>
        </div>
        <div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
            <img class="w-full rounded-lg" src="https://picsum.photos/300/201" alt="Content Image">
            <div class="flex items-center mt-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
                <div class="ml-3">
                    <p class="text-lg font-semibold">Jane Smith</p>
                    <p class="text-sm text-gray-400">CTO</p>
                </div>
            </div>
            <p class="mt-2 text-gray-300">Jane oversees all technical aspects, ensuring seamless operations.</p>
        </div>
    </div>
    <h2 class="text-2xl font-bold mt-10 mb-4">Company Achievements</h2>
    <div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
        <ul class="list-disc list-inside">
            <li class="mt-2 text-gray-300">Awarded "Best Startup of the Year".</li>
            <li class="mt-2 text-gray-300">Reached over 10,000 active users in under a year.</li>
            <li class="mt-2 text-gray-300">Secured $1 million in funding.</li>
        </ul>
    </div>
</div>

Componente de inicio de sesión social

Un componente de inicio de sesión social minimalista diseñado para sitios web comerciales/corporativos con un esquema de color complementario y soporte para modo oscuro.

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 shadow-md rounded-lg p-8 w-96">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-6">Login with Social Media</h2>
        <div class="flex flex-col space-y-4">
            <button class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20" alt="Google Logo"> Login with Google
            </button>
            <button class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20" alt="Facebook Logo"> Login with Facebook
            </button>
            <button class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20" alt="LinkedIn Logo"> Login with LinkedIn
            </button>
        </div>
        <div class="mt-4 text-center text-gray-600 dark:text-gray-400">
            <p>Or login with your email</p>
        </div>
        <div class="mt-4 flex flex-col space-y-4">
            <input type="email" placeholder="Email" class="border dark:border-gray-700 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500" />
            <input type="password" placeholder="Password" class="border dark:border-gray-700 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500" />
            <button class="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 rounded-lg transition duration-200">Login</button>
        </div>
    </div>
</div>

Categorías