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/
- apple-cards.html: Ejemplo de tarjetas de productos Apple con diseño responsivo y animaciones.
- iphoneAplication.html: Simulación de interfaz de iPhone, mostrando barra de estado, perfil y notificaciones.
- joker-dc.html: Landing page inspirada en el personaje Joker de DC, con fuentes personalizadas y fondo temático.
- spotifyLogo.html: Clon de pantalla de login de Spotify, con tabs para registro e inicio de sesión.
- TargetInteractive.html: Tarjetas interactivas con efectos hover y botones animados.
- transform-transition.html: Ejercicios de animaciones y transformaciones con Tailwind (rotación, escalado, transición de color, animación de imágenes).
- vercel-clone.html: Landing page inspirada en Vercel, con video de fondo, menú animado y recursos gráficos personalizados.
- tailwind.config.js: Archivo de configuración de Tailwind CSS (actualmente vacío, puedes personalizarlo según tus necesidades).
- iphoneAplication/: Imágenes y recursos gráficos para la simulación de la interfaz de iPhone.
- joker-dc/: Incluye la fuente personalizada
BBHSansBartle-Regular.ttf, imágenes de Joker y otros íconos usados en la landing page. - vercelApp/: Contiene íconos, imágenes y el video de presentación para la landing de Vercel.
- Clona el repositorio:
git clone https://github.com/BR7FORLIFE/Tailwind-css.git
- Abre los archivos HTML en tu navegador para ver los ejemplos y practicar.
- Modifica los ejemplos para experimentar con las utilidades de Tailwind CSS.
- Personaliza el archivo
tailwind.config.jssi deseas agregar colores, fuentes o utilidades propias.
Tarjetas de productos Apple con diseño responsivo, animaciones al hacer hover y uso de utilidades de Tailwind para grid y sombras.
Simulación de la pantalla de un iPhone, con barra de estado, imagen de perfil y notificaciones. Utiliza imágenes externas y recursos propios.
Landing page inspirada en Joker, con fondo personalizado, fuente propia y secciones informativas sobre el personaje.
Pantalla de login de Spotify, con tabs para alternar entre registro e inicio de sesión, inputs estilizados y botón animado.
Tarjetas interactivas con efectos de escala, sombra y botones animados al hacer hover.
Ejercicios de animaciones y transformaciones: rotación, escalado, transición de color y animación de imágenes con utilidades de Tailwind.
Landing 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.
- Conocimientos básicos de HTML y CSS.
- Tener Tailwind CSS instalado en tu proyecto, o usar el CDN en los archivos HTML:
<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!