Coder un Toggle Switch avec Tailwind CSS, sans JS !

Codons un checkbox animé ou toggle switch personnalisé à l'aide de TailwindCSS en CSS/HTML sans utiliser de JavaScript ou librairie externe. 📹 Apprendre Grid CSS : https://youtu.be/tcrAaPIZbLo 📹 Coder un Toggle Switch avec Tailwind CSS : https://youtu.be/zof8bE3N7xM 📚 Documentation de Tailwind CSS : https://tailwindcss.com/ 🖥️ Abonnez-vous sur YouTube : https://www.youtube.com/parfaitementweb?sub_confirmation=1 Chapitres : 00:00 Faire un Toggle Switch en CSS 00:16 Installer Tailwind CSS 3 via CDN 00:26 Utiliser une configuration personnalisée avec le CDN de Tailwind 00:44 Center un élément verticalement en CSS avec flexbox 01:20 Création du label 01:30 Rendre le texte du checkbox clickable 02:13 Habiller le label visuellement 02:45 Créer le toggle switch personnalisable en CSS 03:30 Qu'est-ce que la pseudo-class ::after ? 04:45 Rendre le toggle switch responsif 05:20 Animer le switch en fonction de l'attribut checked 05:30 Comment utiliser peer: et peer-check: en TailwindCSS ? 07:00 Animation du bouton en CSS via translate et translate-x 08:45 Supporter la navigation au clavier 11:05 Conclusion 👨‍💻 Qui suis-je ? Je m'appelle Alexis et je suis développeur web full stack (front-end et back-end) ainsi que gérant d'une agence web spécialisée dans le développement PHP, Laravel & Wordpress depuis plus de 15 ans. Au fil des années, autodidicate, j'ai eu l'occasion d'apprendre et maitriser un grand nombre de langages de programmations et technologies de développement comme PHP, Laravel, MySQL, Python, HTML, CSS, JavaScript, VueJs, NodeJS, React, Angular. Je propose des cours de développement web et formations complètes pour devenir développeur ou apprendre à développer ainsi que partager mes conseils et retours d'expériences qui seront utiles à tous les développeurs freelance.