Login with social media

This tailwind example is contributed by Anonymous, on 29-Oct-2026. Component is made with Tailwind v3.4. It is responsive.

Other

Author Anonymous

Tailwind v3.4 3

Fork Fullscreen

<section
  class="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-center justify-center p-6 transition-colors duration-300">
  <div class="space-y-4 w-full max-w-sm">
    
    <button
      class="w-full flex items-center justify-center rounded-2xl shadow-lg dark:shadow-gray-900/40 px-8 py-4 text-base font-semibold transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl active:translate-y-0
      bg-white dark:bg-gray-800 border-2 border-red-100 dark:border-red-900/30 text-gray-800 dark:text-gray-100 hover:bg-red-50 dark:hover:bg-gray-700 group"
    >
      <svg
        class="h-6 w-6 mr-3 transition-transform duration-300 group-hover:animate-bounce-icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="-0.5 0 48 48"
      >
        <g fill="none" fill-rule="evenodd">
          <g transform="translate(-401 -860)">
            <g transform="translate(401 860)">
              <path
                d="M9.827 24c0-1.524.253-2.986.705-4.356L2.623 13.604A23.864 23.864 0 00.214 24c0 3.737.868 7.261 2.407 10.388l7.904-6.051C10.077 26.973 9.827 25.517 9.827 24"
                fill="#FBBC05"
              />
              <path
                d="M23.714 10.133c3.311 0 6.302 1.174 8.652 3.094L39.202 6.4C35.036 2.773 29.695.533 23.714.533c-9.287 0-17.268 5.311-21.09 13.071l7.909 6.04c1.822-5.532 7.017-9.511 13.181-9.511"
                fill="#EB4335"
              />
              <path
                d="M23.714 37.867c-6.165 0-11.359-3.979-13.182-9.51l-7.908 6.037c3.822 7.761 11.803 13.072 21.09 13.072 5.732 0 11.205-2.036 15.311-5.849l-7.507-5.804c-2.118 1.335-4.786 2.054-7.804 2.054"
                fill="#34A853"
              />
              <path
                d="M46.145 24c0-1.387-.213-2.88-.534-4.267H23.714V28.8h12.604c-.63 3.091-2.346 5.468-4.8 7.014l7.507 5.804C43.34 37.614 46.145 31.649 46.145 24"
                fill="#4285F4"
              />
            </g>
          </g>
        </g>
      </svg>
      <span>Continue with Google</span>
    </button>

<button
      class="w-full flex items-center justify-center rounded-2xl shadow-lg dark:shadow-gray-900/40 px-8 py-4 text-base font-semibold transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl active:translate-y-0
      bg-blue-600 hover:bg-blue-700 border-2 border-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 group"
    >
      <svg
        class="h-6 w-6 mr-3 transition-transform duration-300 group-hover:animate-bounce-icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 -2 44 44"
      >
        <g fill="none" fill-rule="evenodd">
          <g transform="translate(-702 -265)" fill="#FFF">
            <path
              d="M746 305h-9.725v-14.062c0-3.68-1.52-6.193-4.866-6.193-2.558 0-3.981 1.696-4.643 3.33-.248.586-.209 1.403-.209 2.22V305h-9.634s.124-24.909 0-27.173h9.634v4.265c.575-1.865 3.654-4.526 8.567-4.526 6.105 0 10.876 3.909 10.876 12.325V305zM707.179 274.428h-.062c-3.105 0-5.117-2.077-5.117-4.71 0-2.684 2.072-4.718 5.238-4.718 3.164 0 5.11 2.029 5.172 4.711 0 2.633-2.008 4.717-5.231 4.717zM703.11 277.827h8.576V305h-8.576v-27.173z"
            />
          </g>
        </g>
      </svg>
      <span>Continue with LinkedIn</span>
    </button>

<button
      class="w-full flex items-center justify-center rounded-2xl shadow-lg dark:shadow-gray-900/40 px-8 py-4 text-base font-semibold transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl active:translate-y-0
      bg-black hover:bg-gray-900 border-2 border-gray-800 text-white dark:bg-gray-900 dark:hover:bg-black dark:border-gray-700 group"
    >
      <svg
        class="h-6 w-6 mr-3 transition-transform duration-300 group-hover:animate-bounce-icon"
        xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="white"
      >
                <path d="M18.244 2H21.5l-7.32 8.366L22 22h-5.99l-4.676-6.07L6.1 22H2.84l7.814-8.937L2 2h6.09l4.219 5.574L18.244 2zM17.18 20h1.65L8.03 4h-1.8l10.95 16z"/>
      </svg>
            <span>Continue with X</span>
    </button>

<button
      class="w-full flex items-center justify-center rounded-2xl shadow-lg dark:shadow-gray-900/40 px-8 py-4 text-base font-semibold transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl active:translate-y-0
      bg-blue-800 hover:bg-blue-900 border-2 border-blue-900 text-white dark:bg-blue-900 dark:hover:bg-blue-950 group"
    >
      <svg
        class="h-6 w-6 mr-3 transition-transform duration-300 group-hover:animate-bounce-icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 48 48"
      >
        <g fill="none" fill-rule="evenodd">
          <g transform="translate(-200 -160)" fill="#FFF">
            <path
              d="M225.638 208h-22.99c-1.463 0-2.649-1.186-2.649-2.649v-42.702c0-1.463 1.186-2.649 2.65-2.649h42.7c1.464 0 2.65 1.186 2.65 2.649v42.702c0 1.463-1.186 2.649-2.65 2.649h-12.231v-18.588h6.24l.934-7.244h-7.174v-4.625c0-2.098.58-3.527 3.508-3.527l3.836-.002v-6.48c-.663-.088-2.94-.285-5.59-.285-5.53 0-9.317 3.376-9.317 9.575v5.344h-6.255v7.244h6.255V208z"
            />
          </g>
        </g>
      </svg>
      <span>Continue with Facebook.</span>
    </button>

<button
      class="w-full flex items-center justify-center rounded-2xl shadow-lg dark:shadow-gray-900/40 px-8 py-4 text-base font-semibold transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl active:translate-y-0
      bg-gray-900 hover:bg-black border-2 border-black text-white dark:bg-gray-800 dark:hover:bg-black dark:border-gray-700 group"
    >
      <svg
        class="h-6 w-6 mr-3 transition-transform duration-300 group-hover:animate-bounce-icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 73 73"
      >
        <g fill="none" fill-rule="evenodd">
          <g transform="translate(2 2)" fill-rule="nonzero">
            <path
              d="M58.307 21.428c-2.411-4.131-5.682-7.401-9.812-9.812C44.364 9.205 39.854 8 34.961 8c-4.891 0-9.403 1.205-13.533 3.616-4.131 2.41-7.401 5.681-9.812 9.812C9.205 25.559 8 30.07 8 34.961c0 5.875 1.714 11.158 5.143 15.85 3.428 4.693 7.858 7.94 13.287 9.742.631.117 1.099.035 1.403-.245.304-.281.456-.632.456-1.053 0-.07-.006-.702-.018-1.896-.012-1.194-.018-2.235-.018-3.124l-.808.14c-.515.094-1.164.134-1.948.123-.784-.011-1.598-.093-2.44-.246-.843-.151-1.627-.502-2.353-1.052-.725-.55-1.24-1.27-1.544-2.159l-.351-.808c-.234-.538-.602-1.135-1.106-1.79-.503-.656-1.012-1.1-1.527-1.334l-.246-.176c-.164-.117-.316-.258-.456-.422-.141-.163-.246-.327-.317-.491-.07-.164-.012-.299.176-.404.187-.106.526-.157 1.018-.157l.702.105c.468.094 1.047.374 1.738.842.69.468 1.258 1.077 1.703 1.826.538.96 1.187 1.691 1.948 2.194.76.503 1.527.755 2.299.755.773 0 1.44-.059 2.002-.175.561-.117 1.088-.293 1.58-.527.21-1.569.784-2.774 1.72-3.616-1.334-.14-2.533-.351-3.598-.632-1.065-.281-2.165-.737-3.3-1.37-1.135-.631-2.077-1.416-2.826-2.352-.749-.936-1.363-2.165-1.843-3.687-.48-1.521-.72-3.276-.72-5.265 0-2.833.925-5.243 2.774-7.233-.89-2.129-.808-4.516.246-7.16.677-.212 1.684-.05 3.018.476 1.334.527 2.311.978 2.931 1.352.621.374 1.118.691 1.492.948 2.177-.608 4.424-.912 6.741-.912 2.317 0 4.564.304 6.741.912l1.335-.842c.913-.562 1.99-1.077 3.23-1.545 1.24-.468 2.189-.597 2.844-.386 1.053 2.645 1.147 5.032.281 7.162 1.85 1.99 2.774 4.401 2.774 7.233 0 1.99-.24 3.75-.72 5.284-.48 1.533-1.095 2.762-1.843 3.686-.749.925-1.697 1.703-2.844 2.335-1.147.632-2.247 1.088-3.3 1.369-1.053.281-2.264.492-3.633.633 1.217 1.053 1.826 2.715 1.826 4.985v7.392c0 .421.147.773.44 1.053.293.281.755.363 1.387.246 5.43-1.802 9.859-5.049 13.288-9.742 3.428-4.693 5.142-9.976 5.142-15.85 0-4.892-1.206-9.403-3.616-13.534z"
              fill="#FFF"
            />
          </g>
        </g>
      </svg>
      <span>Continue with Github</span>
    </button>

<button
      class="w-full flex items-center justify-center rounded-2xl shadow-lg dark:shadow-gray-900/40 px-8 py-4 text-base font-semibold transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl active:translate-y-0
      bg-gradient-to-r from-gray-700 to-gray-800 hover:from-gray-800 hover:to-gray-900 border-2 border-gray-900 text-white dark:from-gray-600 dark:to-gray-700 dark:hover:from-gray-700 dark:hover:to-gray-800 group"
    >
      <svg
        class="h-6 w-6 mr-3 transition-transform duration-300 group-hover:animate-bounce-icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="-1.5 0 20 20"
      >
        <g fill="none" fill-rule="evenodd">
          <g transform="translate(-102 -7439)" fill="#FFF">
            <g transform="translate(56 160)">
              <path
                d="M57.571 7282.193c.729-.845 1.22-2.022 1.086-3.193-1.05.04-2.322.671-3.075 1.515-.676.749-1.267 1.946-1.108 3.094 1.172.087 2.368-.57 3.097-1.416m2.628 7.432c.029 3.027 2.77 4.034 2.801 4.047-.023.071-.438 1.435-1.444 2.845-.87 1.218-1.773 2.431-3.196 2.457-1.397.025-1.847-.818-3.446-.818-1.598 0-2.097.768-3.42.819-1.373.049-2.42-1.318-3.297-2.532-1.793-2.483-3.163-7.017-1.323-10.077.914-1.519 2.547-2.482 4.321-2.506 1.348-.025 2.621.889 3.445.889.824 0 2.371-.984 4.003-.826.68.027 2.592.262 3.819 1.983-.1.059-2.28 1.275-2.256 3.803"
              />
            </g>
          </g>
        </g>
      </svg>
      <span>Continue with Apple</span>
    </button>
  </div>
</section>

Related Examples

Coffee & Tea
Coffee: A brewed drink prepared from roasted seeds, called coffee beans, of the coffee plant. Tea: An agricultural product of the leaves, leaf buds, and internodes of various cultivars and sub-varieties of the Camellia sinensis plant, processed and cured using various methods.

Augustin

1 year ago

1.5k
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Muhammad Rizqi Juniyanto

2 years ago

3.9k
Health Tracker - Diet Calorie Management App
Health Tracker - Diet Calorie Management App

Tanvir Hasan Bappy (Tanvir)

10 months ago

614
AutoTrade
Browse thousands of quality used cars from trusted sellers. Great prices and easy financing options available

INGRIDE MUZIRANENGE

1 year ago

1.3k
HTMLCODE
123

Anonymous

1 year ago

1k
Radial Progress Indicator with TailwindCSS
A sleek and customizable radial progress indicator built with SVG and styled using TailwindCSS. The progress bar is animated with smooth transitions, featuring a circular background, dynamic progress, and centered text or optional imagery. Perfect for showcasing percentages, stats, or any progress-related metrics in your projects.

SHARIFUL ISLAM

1 year ago

3.8k
pages / slides

MD Fardous Alom

1 year ago

2.3k
register

Anonymous

1 week ago

61
Dark dashboard
Dark dashboard

Tanvir Hasan Bappy (Tanvir)

10 months ago

408
Invoice
Invoice

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.4k
Indented Media Panels

Sherry Lynne

2 months ago

114
Maintenance page template
The site is under maintenance placeholder page

Anonymous

2 years ago

12.4k