Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Volver al principio Componente de botón

Un componente de botón Volver al principio receptivo con diseño de Glassmorphism, combinación de colores en tonos tierra e interacciones complejas, adecuado para un tablero.

Abrir Vista previa

                <div class="fixed bottom-6 right-6">
  <a href="#top" class="group block">
    <button class="relative flex items-center justify-center w-16 h-16 bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-full shadow-lg transition-all duration-300 ease-in-out hover:scale-110 focus:outline-none focus:ring-4 focus:ring-teal-500 dark:focus:ring-teal-400 focus:ring-opacity-70">
      <svg class="w-8 h-8 text-gray-800 dark:text-gray-200 transform transition-transform duration-300 ease-in-out group-hover:-translate-y-1" 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="M5 10l7-7m0 0l7 7m-7-7v18"></path>
      </svg>
      <span class="absolute top-1/2 left-1/2 -translate-x-1/2 translate-y-full opacity-0 group-hover:opacity-100 group-hover:translate-y-1/2 px-3 py-1 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 text-sm font-semibold rounded-md whitespace-nowrap transition-all duration-300 ease-in-out">
        Back to Top
      </span>
    </button>
  </a>
</div>

<div class="min-h-screen bg-gradient-to-br from-stone-100 via-stone-200 to-stone-300 dark:from-stone-800 dark:via-stone-900 dark:to-black flex flex-col items-center justify-center p-8">
  <h1 id="top" class="text-5xl font-extrabold text-gray-900 dark:text-white mb-8 text-center">Dashboard Overview</h1>
  <p class="text-lg text-gray-700 dark:text-gray-300 max-w-2xl text-center mb-12">
    Scroll down to see the

Botones Me gusta/Reacción

Componente de botones de Me gusta / Reacción con diseño de brutalismo, tonos tierra, interacciones complejas, responsivo, soporte de temas oscuros. Sin JS, HTML puro con Tailwind.

Abrir Vista previa

                <div class="bg-stone-100 dark:bg-stone-900 p-8 min-h-screen flex items-center justify-center">
  <div class="bg-stone-200 dark:bg-stone-800 border-4 border-stone-900 dark:border-stone-100 p-6 rounded-none shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,0.5)] max-w-md w-full">
    <hさんがclass="text-2xl font-bold text-stone-900 dark:text-stone-100 mb-6 font-mono">React to this postさんが</h2>
    
    <div class="flex flex-wrap gap-4 justify-center">
      
      <!-- Like Button -->
      <button class="flex items-center space-x-2 bg-green-700 hover:bg-green-800 text-white font-bold py-3 px-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linear">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんのbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="Mさんが14 10h4.764a2 2 0 011.803 1.138l3.095 7.738A2 2 0 0122が 2さんがh-3V7a3 3 0 00-3-3H4a2 2 0 00-2 2v10a2 2 0 002 2h12M9 20h9さんの</path>
        </svg>
        <span>Like</span>
      </button>

      <!-- Love Button -->
      <button class="flex items-center space-x-2 bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linear">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんのbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M20.84 4. さんが12a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.さんが23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"></path>
        </svg>
        <span>Loveさんが</span>
      </button>

      <!-- Laugh Button -->
      <button class="flex items-center space-x-2 bg-yellow-700 hover:bg-yellow-800 text-white font-bold py-3 px-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linear">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんのbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="Mさんがさんと7h.01Mさんが2 7h.01Mさんの5 7h.01M21 12a9 9 0 さんの9 0 01-18 0z"></path>
        </svg>
        <span>Laughさん</span>
      </button>

      <!--さんが Angry Button -->
      <button class="flex items-さんenter space-x-2 bg-red-900 hover:bg-red-950 text-white font-bold py-さんとpx-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linearさんも">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんがbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="さんMさんが.732 14.597a4.995 4.995 0 00-.173-2.523c-.41-1.028-1.207-2.088-2.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.353-2.935a4.8 4.8 0 00-3.002-2.53m-1.067.895a5.003 5.003 0 01-1.5.242m1.067-.895a5.003 5.003 0 00-1.5.242m0 0.895a4.995 4.995 0 00-.173-2.523c-.41-1.028-1.207-2.088-2.353-2.935a4.8 4.8 0 00-3.002-2.53"></path>
        </svg>
        <span>Angry</span>
      </button>
      
      <!--さんの Sad Button -->
      <button class="flex items-center space-x-2 bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linear">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんのbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="さんMさんが.732 14.597a4.995 4.995 0 00-.173-2.523c-.41-1.028-1.207-2.088-2.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.353-2.935a4.8 4.8 0 00-3.002-2.53m-1.067.895a5.003 5.003 0 01-1.5.242m1.067-.895a5.003 5.003 0 00-1.5.242m0 0.895a4.995 4.995 0 00-.173-2.523c-.41-1.028-1.207-2.088-2.353-2.935a4.8 4.8 0 00-3.002-2.53"></path>
        </svg>
        <span>Sad</span>
      </button>

      <!--さんが Wow Button -->
      <button class="flex items-さんenter space-x-2 bg-orange-700 hover:bg-orange-800 text-white font-bold py-さんとpx-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linearさんが">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんのbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="さんがM-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-さんと0.84 4.さんが12a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.さんが23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"></path>
        </svg>
        <span>Wow</span>
      </button>
    
さんが </div>
  </div>
さん</div>

Componente de botones para compartir en redes sociales

Un componente responsivo de botones para compartir en redes sociales diseñado en un estilo de cristal con un esquema de color monocromático para sitios de comercio electrónico. Cuenta con elementos translúcidos similares al vidrio esmerilado, incluye múltiples botones interactivos para compartir en las redes sociales y es compatible con el modo oscuro con Tailwind CSS.

Abrir Vista previa

                <div class="flex justify-center items-center p-6 bg-white dark:bg-gray-800 bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg space-x-4">
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/200/200" alt="Product Image" class="w-24 h-24 rounded-lg mb-2">
        <h2 class="text-lg text-gray-800 dark:text-gray-200">Share this product</h2>
    </div>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500 text-white hover:bg-blue-700 transition-all duration-300 shadow-lg dark:bg-blue-600 dark:hover:bg-blue-800">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/facebook-new.png" alt="Facebook" class="w-6 h-6">
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-400 text-white hover:bg-blue-600 transition-all duration-300 shadow-lg dark:bg-blue-500 dark:hover:bg-blue-700">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/twitter.png" alt="Twitter" class="w-6 h-6">
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-pink-500 text-white hover:bg-pink-700 transition-all duration-300 shadow-lg dark:bg-pink-600 dark:hover:bg-pink-800">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/instagram-new.png" alt="Instagram" class="w-6 h-6">
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-red-500 text-white hover:bg-red-700 transition-all duration-300 shadow-lg dark:bg-red-600 dark:hover:bg-red-800">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/pinterest.png" alt="Pinterest" class="w-6 h-6">
        </a>
    </div>
</div>

Componente de caja de luz de imagen

Un componente complejo de Image Lightbox diseñado con elementos skeuomórficos y una combinación de colores pastel, adecuado para entornos de tablero. Incluye un diseño responsivo, soporte para temas oscuros y una interfaz interactiva.

Abrir Vista previa

                <div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-75 dark:bg-black">
    <div class="bg-gradient-to-br from-pink-300 to-blue-300 rounded-xl shadow-xl p-5 w-full max-w-3xl relative">
        <button class="absolute top-2 right-2 text-gray-700 dark:text-gray-300 font-bold text-lg hover:text-gray-900 dark:hover:text-white transition">
            &times;
        </button>
        <div class="flex justify-center mb-5">
            <img src="https://picsum.photos/600/400" alt="Lightbox Image" class="rounded-lg shadow-lg max-w-full h-auto brightness-90 dark:brightness-75">
        </div>
        <div class="grid grid-cols-3 gap-4">
            <img src="https://picsum.photos/200/150?random=1" alt="Thumbnail 1" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=2" alt="Thumbnail 2" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=3" alt="Thumbnail 3" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=4" alt="Thumbnail 4" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=5" alt="Thumbnail 5" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=6" alt="Thumbnail 6" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
        </div>
        <div class="flex justify-between items-center mt-5">
            <button class="bg-white text-gray-800 rounded-md px-4 py-2 shadow hover:bg-gray-100 transition">Previous</button>
            <button class="bg-white text-gray-800 rounded-md px-4 py-2 shadow hover:bg-gray-100 transition">Next</button>
        </div>
    </div>
</div>

Componente de paginación

Un componente de paginación monocromático y receptivo inspirado en 3D para interfaces de redes sociales, con soporte para modo oscuro, construido con Tailwind CSS.

Abrir Vista previa

                <nav aria-label="Pagination" class="flex justify-center items-center space-x-2 py-4 bg-gray-100 dark:bg-gray-900">
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
    Previous
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
    1
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
    2
  </a>
    <a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-indigo-600 bg-indigo-50 border border-indigo-500 rounded-md hover:bg-indigo-100 dark:bg-indigo-700 dark:border-indigo-600 dark:text-white dark:hover:bg-indigo-600 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
    3
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
    4
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
    Next
  </a>
</nav>

Componente Mapas

Un componente de Mapas simple con diseño de Glassmorphism, esquema de color en escala de grises y un diseño simple. Es sensible y admite el modo oscuro.

Abrir Vista previa

                <div class="relative flex items-center justify-center w-full h-96 bg-gray-300 dark:bg-gray-700 overflow-hidden" style="backdrop-filter: blur(10px); background-color: rgba(209, 213, 219, 0.3); dark:background-color: rgba(55, 65, 81, 0.3);">
  <div class="absolute inset-0 z-0">
    <img src="https://picsum.photos/seed/maps/800/600" alt="Map background" class="object-cover w-full h-full">
  </div>
  <div class="relative z-10 p-6 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 rounded-lg shadow-lg text-center">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Find Us Here</h2>
    <p class="text-gray-700 dark:text-gray-300">Our location on the map.</p>
  </div>
</div>

Componente de mejora de la navegación

Un componente de navegación responsivo diseñado para una cartera, que utiliza un estilo brutalista con un esquema de color pastel y soporte para modo oscuro.

Abrir Vista previa

                <nav class="bg-white dark:bg-gray-800 p-6 flex justify-between items-center shadow-lg">
    <a href="#" class="text-2xl font-bold text-pink-600 dark:text-pink-300">My Portfolio</a>
    <div class="flex space-x-4">
        <a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">Home</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">Projects</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">About</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">Contact</a>
    </div>
</nav>

<section class="p-6 bg-gray-100 dark:bg-gray-900">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-200">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
        <div class="border-2 border-pink-600 dark:border-pink-300 p-4 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
            <img src="https://picsum.photos/300/200?random=1" alt="Project Image" class="w-full h-48 object-cover rounded-lg">
            <h3 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Brief description of the project, emphasizing its features, technologies used, and challenges faced.</p>
        </div>
        <div class="border-2 border-pink-600 dark:border-pink-300 p-4 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
            <img src="https://picsum.photos/300/200?random=2" alt="Project Image" class="w-full h-48 object-cover rounded-lg">
            <h3 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Brief description of the project, focusing on user experience and the development process.</p>
        </div>
        <div class="border-2 border-pink-600 dark:border-pink-300 p-4 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
            <img src="https://picsum.photos/300/200?random=3" alt="Project Image" class="w-full h-48 object-cover rounded-lg">
            <h3 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Brief description of the project, detailing the problem solved and feedback received.</p>
        </div>
    </div>
</section>

<section class="p-6 bg-gray-100 dark:bg-gray-900">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-200">Meet the Team</h2>
    <div class="flex flex-wrap justify-center space-x-6 mt-6">
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-24 h-24 rounded-full border-4 border-pink-600 dark:border-pink-300">
            <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
            <p class="text-gray-600 dark:text-gray-400">Frontend Developer</p>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-24 h-24 rounded-full border-4 border-pink-600 dark:border-pink-300">
            <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
            <p class="text-gray-600 dark:text-gray-400">Backend Developer</p>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-24 h-24 rounded-full border-4 border-pink-600 dark:border-pink-300">
            <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Adam Johnson</h3>
            <p class="text-gray-600 dark:text-gray-400">UI/UX Designer</p>
        </div>
    </div>
</section>

Componente Paneles

Un componente de paneles de control simple y receptivo diseñado para la exhibición de cartera, con microinteracciones y centrado en los tonos tierra. Es compatible con el tema oscuro usando Tailwind CSS.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-800 p-6">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Portfolio Dashboard</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=1" alt="Portfolio Item">
            <div class="p-4">
                <h2 class="font-bold text-gray-800 dark:text-gray-200">Project Title 1</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project showcasing key details.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=2" alt="Portfolio Item">
            <div class="p-4">
                <h2 class="font-bold text-gray-800 dark:text-gray-200">Project Title 2</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project showcasing key details.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=3" alt="Portfolio Item">
            <div class="p-4">
                <h2 class="font-bold text-gray-800 dark:text-gray-200">Project Title 3</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project showcasing key details.</p>
            </div>
        </div>
    </div>
    <footer class="mt-8 text-center text-gray-600 dark:text-gray-400">
        <p>Created by <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Your Name</a></p>
    </footer>
</div>

Botones Me gusta/Reacción

Componente de botones Me gusta/Reacción con diseño Retro/Vintage

Abrir Vista previa

                <div class="flex items-center justify-center space-x-4 p-4 bg-gray-200 dark:bg-gray-800">
  <button class="flex items-center space-x-2 px-3 py-1 rounded-full bg-gray-300 text-gray-700 hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition duration-300 ease-in-out">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
    </svg>
    <span>Like</span>
  </button>

  <button class="flex items-center space-x-2 px-3 py-1 rounded-full bg-gray-300 text-gray-700 hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition duration-300 ease-in-out">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path d="M10 2a6 6 0 00-6 6v3.586l1.707 1.707A3 3 0 017 14h6a3 3 0 012.293.707L16 11.586V8a6 6 0 00-6-6zM12 15.5a1 1 0 100 2h-4a1 1 0 100 2H7a1 1 0 100 2h6a3 3 0 003-3v-6a3 3 0 00-3-3h-2l-.45.45A4 4 0 0111 14H9a4 4 0 01-1.55-.45L7 13V8a4 4 0 014-4h2a4 4 0 014 4v6a4 4 0 01-4 4h-6.5a1.5 1.5 0 00-1.06.44L4 17.5V15a1 1 0 00-1-1h-.5a1.5 1.5 0 000 3H3v.5a1.5 1.5 0 001.5 1.5h8.086a2.5 2.5 0 011.768.732L15 20.5V21h1a1 1 0 100-2h-1v-.5a1.5 1.5 0 00-1.5-1.5z" />
    </svg>
    <span>React</span>
  </button>

</div>

Componente de paginación

Un componente de paginación responsivo simple diseñado para el modo oscuro con un esquema de color análogo, adecuado para un portafolio.

Abrir Vista previa

                <div class="flex justify-center items-center space-x-4 py-6">
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">&laquo; Previous</a>
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">1</a>
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">2</a>
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">3</a>
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">Next &raquo;</a>
</div>

1 ... 103 104 105 106 107 ... 282

Categorías

Todos los componentes