responsive-layout-snippetslisted

# Skill: Snippets de Layout Responsive ## Propósito Ofrecer **patrones de layout profesionales y probados** que puedes copiar directamente sin escribir CSS custom. Utiliza Tailwind CSS para máxima velocidad y consistencia. --- ## 1. Hero Section (Banner Principal) ### Versión Simple ```html <!-- Hero con texto + CTA --> <section class="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 flex items-center justify-center text-center px-4"> <div class="max-w-2xl mx-auto"> <h1 class="text-5xl md:text-7xl font-bold text-white mb-4"> Tu Título Aquí </h1> <p class="text-xl md:text-2xl text-slate-300 mb-8"> Descripción breve y atractiva </p> <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg transition duration-200"> Call to Action </button> </div> </section> ``` ### Versión con Imagen ```html <section class="min-h-screen grid grid-cols-1 md:grid-cols-2 gap-8 items-center px-4 md:px-8 max-w-6xl mx-auto"> <!-- Texto --> <div> <h1 class="text-5xl md:text-6xl font-bold text-slate-900 mb-4"> Solución Profesional </h1> <p class="text-lg text-slate-600 mb-6"> Descripción detallada de beneficios </p> <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg"> Comenzar Ahora </button> </div> <!-- Imagen --> <div class="hidden md:block"> <img src="hero-image.png" alt="Hero" class="w-full rounded-lg shadow-lg" /> <