Composant de connexion sociale
Un composant de connexion sociale simple, propre et réactif avec une palette de couleurs vert forêt, conçu pour les sites Web d’actualités et de journalisme, mettant l’accent sur la typographie et les systèmes de grille. Inclut la prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center p-4 min-h-screen bg-gray-50 dark:bg-gray-900 font-sans">
<div class="w-full max-w-sm p-6 space-y-6 bg-white rounded-lg shadow-md dark:bg-gray-800 transition-colors duration-300">
<div class="text-center">
<h2 class="text-2xl font-bold text-emerald-800 dark:text-emerald-300 mb-2 transition-colors duration-300">Sign In/Up</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm transition-colors duration-300">Access exclusive content and personalized news.</p>
</div>
<div class="space-y-3">
<button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 transition-colors duration-300">
<svg class="w-4 h-4 mr-2 text-red-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12.0003 12.723c3.309-1.01 5.922-4.103 5.922-7.857C17.9223 2.146 15.7063 0 12.9633 0c-3.15 0-5.877 2.155-5.877 4.887c0 3.754 2.613 6.847 5.922 7.857zM12.0003 18.003c-5.521 0-10.002-4.482-10.002-10.002S6.4793 0 12.0003 0s10.002 4.482 10.002 10.002-4.481 10.002-10.002 10.002zM12.0003 24c-6.627 0-12-5.373-12-12C0.0003 5.373 5.3733 0 12.0003 0s12 5.373 12 12c0 6.627-5.373 12-12 12zM12.0003 16.002c-4.417 0-8.001-3.584-8.001-8.001S7.5833 0 12.0003 0s8.001 3.584 8.001 8.001-3.584 8.001-8.001 8.001z"/>
<path d="M12.0003 19.999c-3.313 0-6.001-2.688-6.001-6.001s2.688-6.001 6.001-6.001 6.001 2.688 6.001 6.001-2.688 6.001-6.001 6.001zM12.0003 24c-6.627 0-12-5.373-12-12C0.0003 5.373 5.3733 0 12.0003 0s12 5.373 12 12c0 6.627-5.373 12-12 12zM12.0003 22c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10z"/>
<path d="M12.0003 15.002c-2.761 0-5.001-2.24-5.001-5.001s2.24-5.001 5.001-5.001 5.001 2.24 5.001 5.001-2.24 5.001-5.001 5.001zM12.0003 19.999c-3.313 0-6.001-2.688-6.001-6.001s2.688-6.001 6.001-6.001 6.001 2.688 6.001 6.001-2.688 6.001-6.001 6.001zM12.0003 24c-6.627 0-12-5.373-12-12C0.0003 5.373 5.3733 0 12.0003 0s12 5.373 12 12c0 6.627-5.373 12-12 12zM12.0003 22c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10z"/>
<path d="M12.0003 22c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10z"/>
<path d="m20.916 11.23a9.92 9.92 0 0 0-.022-.249c-.1-.703-.263-1.405-.512-2.09-.76-.02-1.523-.02-2.285 0-.469 1.1-.96 2.148-1.472 3.123.633.208 1.258.461 1.864.757.777-.735 1.4-1.564 1.89-2.541zm-15.066 0c.49.977 1.113 1.806 1.89 2.541.606-.296 1.23-.549 1.864-.757-.512-.975-1.003-2.023-1.472-3.123-.762-.02-1.525-.02-2.285 0-.249.686-.412 1.388-.512 2.09-.02.083-.027.166-.022.249zm1.312-3.136c.036-.076.07-.152.106-.226l-1.04-.602 1.455-.788c.37.52.813 1.002 1.326 1.44zm11.137-1.44l1.455.788-1.04.602c.036.074.07.15.106.226-.513-.438-.956-.92-1.326-1.44zm-7.382-2.012c.706 0 1.413 0 2.119 0-.027.702-.132 1.404-.326 2.09-.646.07-1.294.07-1.942 0-.194-.686-.299-1.388-.326-2.09zm.006 13.916c-.026-.686-.13-1.382-.322-2.07-.643-.07-1.284-.07-1.927 0-.192.688-.296 1.384-.322 2.07.703 0 1.407 0 2.571 0zm.014-4.218c-.512-.975-1.003-2.023-1.472-3.123-.633-.208-1.258-.461-1.864-.757.777.735 1.4 1.564 1.89 2.541.606.296 1.23.549 1.864.757zm4.304-.757a9.92 9.92 0 0 0-.022-.249c-.1-.703-.263-1.405-.512-2.09-.76-.02-1.523-.02-2.285 0-.469 1.1-.96 2.148-1.472 3.123.633.208 1.258.461 1.864.757.777-.735 1.4-1.564 1.89-2.541zm-10.748-1.127c-.49-.977-1.113-1.806-1.89-2.541-.606.296-1.23.549-1.864.757.512.975 1.003 2.023 1.472 3.123.762-.02 1.525-.02 2.285 0 .249-.686.412-1.388.512-2.09.02-.083.027-.166.022-.249zm-1.312 3.136c-.036.076-.07.152-.106.226l1.04.602-1.455.788c-.37-.52-.813-1.002-1.326-1.44zm-1.096-7.348c.026.686.13 1.382.322 2.07.643.07 1.284.07 1.927 0 .192-.688.296-1.384.322-2.07-.703 0-1.407 0-2.571 0z"/>
<circle cx="12.0003" cy="4.9997" r="2.0001"/>
<path d="m12.0003 12.0003c-2.209 0-4.0002-1.791-4.0002-4.0002s1.791-4.0002 4.0002-4.0002 4.0002 1.791 4.0002 4.0002-1.791 4.0002-4.0002 4.0002zm0 1.9999c-.735 0-1.41-.227-1.966-.607-.556-.38-.97-.905-1.233-1.503-.984-2.247-3.926-7.65-4.524-8.818-.28-.541-.448-1.272-.448-2.027 0-2.545 1.579-4.708 3.75-5.592.518-.21.997-.331 1.478-.331h.001c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.001.001-.001.001-.001.002-.001.001 0 .001 0 .002 0 .001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.001.001 0 .001 0 .002 0 .001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.001.001 0 .001 0 .002 0 .001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002c.001-.001c.001-.001.001-.001.002-.001c.001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002c.001-.001c.001-.001.001-.001.002-.001c.001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002c.001-.001c.001-.001.001-.001.002-.001c.001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02-.823-1.077-1.488-2.264-1.996-3.528-1.036-.337-2.12-.524-3.238-.524h-.001c-3.111 0-5.836 1.776-7.202 4.364-.475.86-.777 1.83-.895 2.845-.065.556 4.398 7.57 4.962 8.528.268.455.617.848 1.024 1.178.407.33.864.582 1.354.74h-.001c.001 0 .001.001.002.001.001 0 .001.001.002.001h.001c.001 0 .001.001.002.001.001 0 .001.001.002.001l.001.001c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c-.001 0-.001-.001-.002-.001l-.001 0c-.001 0-.001 0-.002 0h-.001z" fill="currentColor"/>
<path d="m12 0c-3.15 0-5.877 2.155-5.877 4.887 0 3.754 2.613 6.847 5.922 7.857a6.0007 6.0007 0 0 1-.045.006c-3.313 0-6.001-2.688-6.001-6.001s2.688-6.001 6.001-6.001 6.001 2.688 6.001 6.001v-.001c0-3.754-2.613-6.847-5.922-7.857zm.0003 16.002c-4.417 0-8.001-3.584-8.001-8.001S7.5833 0 12.0003 0s8.001 3.584 8.001 8.001-3.584 8.001-8.001 8.001z" fill="currentColor"/>
</svg>
Continue with Google
</button>
<button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 transition-colors duration-300">
<svg class="w-4 h-4 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 0C5.373 0 0 5.373 0 12c0 5.084 3.78 9.388 8.718 10.375V14.06H5.443V12h3.275V9.387c0-3.23 1.957-5.021 4.877-5.021 1.397 0 2.457.25 2.79.362v2.666h-1.68C13.213 7.85 1.17 9.336 12.002 9.336l.002-.002V22.375C20.22 21.01 24 16.716 24 12c0-6.627-5.373-12-12-12z"/>
</svg>
Continue with Facebook
</button>
<button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 transition-colors duration-300">
<svg class="w-4 h-4 mr-2 text-black dark:text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12.002 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12c0-6.627-5.373-12-12-12zm5.717 17.098c-.295.772-.888 1.493-1.636 2.115-.747.622-1.571 1.055-2.457 1.258-2.128.48-4.29.48-6.418 0-.886-.203-1.71-.636-2.457-1.258-.748-.622-1.341-1.343-1.636-2.115-.48-1.29-.48-2.58 0-3.87.295-.772.888-1.493 1.636-2.115.747-.622 1.571-1.055 2.457-1.258 2.128-.48 4.29-.48 6.418 0 .886.203 1.71.636 2.457 1.258.748.622 1.341 1.343 1.636 2.115.48 1.29.48 2.58 0 3.87zM12.002 5.567c-1.42 0-2.825.267-4.148.802-.674.265-1.254.598-1.76.996C5.586 7.73 5.17 8.16 4.887 8.653c-.31.54-.486 1.13-.526 1.748-.04.617-.008 1.25.093 1.884-.253-.162-.485-.348-.696-.554-.21-.205-.386-.43-.532-.676-.146-.245-.25-.503-.314-.766-.064-.263-.08-1.006-.08-1.006h-.002c-1.554-1.353-2.094-1.92-2.094-1.92-.127-.13-.263-.263-.408-.398-.242-.22-.497-.432-.767-.636-.27-.204-.543-.39-.817-.558-.274-.168-.54-.316-.798-.445-.257-.13-.509-.234-.755-.314-.247-.078-.487-.135-.72-.167l-.02-.005a3.064 3.064 0 0 0-1.03-.004c-.394.02-.78.077-1.157.172-.377.094-.74.22-.984.34-.243.12-.464.26-.66.417-.197.157-.367.327-.514.498-.146.171-.266.347-.36.526-.094.18-.16-.36-.16-.36l-.001-.001c-.13-.266-.28-.52-.45-.76-.17-.24-.356-.47-.558-.69-.2-.22-.41-.428-.627-.62-.218-.19-.434-.367-.648-.53-.213-.163-.42-.31-.62-.437-.2-.127-.39-.234-.567-.32-.178-.087-.34-.15-.49-.19l-.02-.007c-.4-.05-.79-.06-1.18-.03-.39.03-.77.108-1.13.238-.36.13-.69.293-.98.487-.29.194-.546.417-.768.667-.22.25-.402.52-.54.802-.138.283-.23.578-.277.88-.046.302-.04.606.012.906.053.3.14.6.26.885.12.285.27.56.45.816.18.256.39.49.63.702.235.212.493.398.767.558.274.159.56.288.857.387.297.098.604.168.913.208.31.04.614.04.912 0 .3-.04.59-.115.86-.226.27-.11.52-.25.75-.41.23-.16.43-.34.6-.53.17-.19.31-.4.42-.61s.19-.43.23-.65l.006-.03c.09-1.282.046-2.316-.134-3.076-.138-.588-.344-1.11-.618-1.564-.275-.453-.61-.83-.988-1.127-.38-.297-.8-.51-1.25-.638-1.4-.385-2.88-.34-4.275.12-.59.19-1.18.45-1.76.75-.58.3-.98.66-1.19.99-.21.33-.28.59-.21.78.07.19.26.28.56.28.3 0 .6-.07.9-.21.3-.14.58-.33.84-.57.26-.24.52-.49.77-.75.25-.26.49-.52.7-.77.21-.25.4-.49.57-.73.18-.24.32-.47.43-.68.11-.21.18-.4.2-.56.02-.16-.01-.3-.08-.43-.07-.13-.19-.22-.36-.28-.17-.06-.39-.08-.66-.08-1.11 0-2.28.27-3.41.81-.67.32-1.3.7-1.89 1.13-.58.43-1.13.9-1.63 1.4-1.5.75-2.9 1.63-4.22 2.65-.66.5-.94.75-.84.75h-.001c.01 0 .02-.002.03-.005.04-.01.07-.02.1-.03.04-.01.07-.02.1-.03.03-.01.06-.02.09-.02.03-.01.06-.01.09-.02.03-.01.06-.01.09-.01.02 0 .04-.002.06-.002.02 0 .04-.002.06-.002.007 0 .013-.001.02-.001.002 0 .004 0 .006 0 .002 0 .004 0 .006 0 .002 0 .004 0 .006 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 -.001 .002 -.001 .002 -.001 .001 -.001 .002 -.001 .001 -.001 .002 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001-.082.016-.395.045-.596.088-.857.147-1.002.327-.145.18-.08.3-.06.36.02.06.07.1.15.11.08.01.21-.01.38-.05.17-.04.37-.1.59-.19.22-.09.46-.2.72-.32.26-.12.55-.26.86-.4.31-.14.65-.29 1.02-.45 1.48-.65 3.06-1.12 4.71-1.34 2.22-.3 4.49-.03 6.64.8.44.16.86.35 1.25.59.39.23.76.51 1.1.84.34.33.64.67.9.99h.002c.08-.02.16-.04.24-.06.08-.02.16-.04.24-.05.08-.01.16-.02.24-.02.08 0 .16-.01.24-.01.08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002-.12-.01-.24-.01-.36-.01-.12 0-.24 0-.36 0-.12 0-.24-.001-.36-.001-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002c-1.144-.065-2.29-.005-3.414.185-.72.12-.22-.1-.22-.1z"/>
<path d="M12.002 12s-1.898 3.53-2.617 4.908c-.71-1.378-2.617-4.908-2.617-4.908-.344-.658-.3-1.63.12-2.3.42-.67 1.15-1.07 1.95-1.12.8 0 1.54.45 1.95 1.12.42.67.46 1.64.12 2.3z"/>
<ellipse cx="12.002" cy="7.417" rx="1.5" ry="1.5"/>
</svg>
Continue with Apple
</button>
</div>
<div class="relative flex py-2 items-center">
<div class="flex-grow border-t border-gray-300 dark:border-gray-700"></div>
<span class="flex-shrink mx-4 text-gray-500 dark:text-gray-400 text-sm">Or continue with email</span>
<div class="flex-grow border-t border-gray-300 dark:border-gray-700"></div>
</div>
<form class="space-y-4">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
<div class="mt-1">
<input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm bg-white dark:bg-gray-700 transition-colors duration-300">
</div>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<div class="mt-1">
<input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm bg-white dark:bg-gray-700 transition-colors duration-300">
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700 dark:checked:bg-emerald-600 transition-colors duration-300">
<label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-emerald-600 hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300 transition-colors duration-300">Forgot your password?</a>
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-emerald-700 hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">
Sign In
</button>
</div>
</form>
<div class="text-center text-sm text-gray-600 dark:text-gray-400 transition-colors duration-300">
Not a member? <a href="#" class="font-medium text-emerald-600 hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300 transition-colors duration-300">Sign up now</a>
</div>
</div>
</div>Composants associés
Composant de connexion sociale
Composant de connexion sociale réactif avec le style Glassmorphism, les couleurs vives et la prise en charge du thème sombre.
Composant de connexion sociale
Composant de connexion sociale de conception matérielle avec schéma de couleurs analogue, complexité simple, à des fins de portefeuille, réactif avec prise en charge du thème sombre.
Composant Art Déco Social Login
Un composant de connexion sociale complexe, inspiré de l’Art déco, avec une palette de couleurs bonbon/doux, conçu pour les tableaux de bord, entièrement réactif avec prise en charge du mode sombre.