Loading repository data…
BR7FORLIFE / repository
Este repositorio reúne una colección de proyectos, componentes y experimentos construidos con TailwindCSS, el framework de utilidades que permite crear interfaces modernas, limpias y totalmente personalizadas sin salir del HTML.
Bienvenido a este repositorio, creado para aprender y practicar Tailwind CSS mediante ejercicios visuales y prácticos. Aquí encontrarás ejemplos de interfaces modernas y componentes interactivos, ideales para mejorar tus habilidades en desarrollo frontend.
├── apple-cards.html
├── iphoneAplication.html
├── joker-dc.html
├── README.md
├── spotifyLogo.html
├── tailwind.config.js
├── TargetInteractive.html
├── transform-transition.html
├── vercel-clone.html
└── assests/
├── iphoneAplication/
├── joker-dc/
└── vercelApp/
assests/)BBHSansBartle-Regular.ttf, imágenes de Joker y otros íconos usados en la landing page.git clone https://github.com/BR7FORLIFE/Tailwind-css.git
tailwind.config.js si deseas agregar colores, fuentes o utilidades propias.apple-cards.htmlTarjetas de productos Apple con diseño responsivo, animaciones al hacer hover y uso de utilidades de Tailwind para grid y sombras.
iphoneAplication.htmlSimulación de la pantalla de un iPhone, con barra de estado, imagen de perfil y notificaciones. Utiliza imágenes externas y recursos propios.
joker-dc.htmlLanding page inspirada en Joker, con fondo personalizado, fuente propia y secciones informativas sobre el personaje.
spotifyLogo.htmlPantalla de login de Spotify, con tabs para alternar entre registro e inicio de sesión, inputs estilizados y botón animado.
TargetInteractive.htmlTarjetas interactivas con efectos de escala, sombra y botones animados al hacer hover.
transform-transition.htmlEjercicios de animaciones y transformaciones: rotación, escalado, transición de color y animación de imágenes con utilidades de Tailwind.
vercel-clone.htmlLanding page inspirada en Vercel, con video de fondo, menú animado y recursos gráficos personalizados.
Las carpetas dentro de assests/ contienen imágenes, íconos, fuentes y videos usados en los ejercicios. Puedes agregar tus propios recursos para personalizar los ejemplos.
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
Puedes modificar cualquier archivo HTML para practicar nuevas utilidades de Tailwind CSS, agregar componentes, o experimentar con animaciones y transiciones.
Si deseas extender la configuración de Tailwind, edita el archivo tailwind.config.js.
Repositorio creado por BR7FORLIFE.
Si tienes sugerencias, dudas o quieres contribuir, abre un issue o pull request en el repositorio.
¡Disfruta aprendiendo Tailwind CSS con estos ejercicios prácticos!
Selected from shared topics, language and repository description—not editorial ratings.
BR7FORLIFE /
Este repositorio reúne buenas prácticas, patrones de diseño, animaciones y funcionalidades interactivas sin depender de frameworks, ideal para mejorar habilidades front-end desde la base.