JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<div class="signInModal">
  <div class="signInModal__section signInModal__section--social">
    <!-- <div class="signInModal__sectionHeader">Use another account:</div> -->
    <a href="#" class="button button--google">
    <svg class="button__logo" width="18" height="18" version="1.1" viewBox="0 0 4.7625 4.7625" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
      <g transform="translate(577.66 154.42)">
        <g id="logo_googleg_48dp" transform="matrix(.26458 0 0 .26458 -577.66 -154.42)" fill="none" fill-rule="evenodd">
          <path id="Shape" d="m17.64 9.2045c0-0.63818-0.05727-1.2518-0.16364-1.8409h-8.4764v3.4814h4.8436c-0.20864 1.125-0.84273 2.0782-1.7959 2.7164v2.2582h2.9086c1.7018-1.5668 2.6836-3.8741 2.6836-6.615z" fill="#4285f4"/>
          <path d="m9 18c2.43 0 4.4673-0.80591 5.9564-2.1805l-2.9086-2.2582c-0.80591 0.54-1.8368 0.85909-3.0477 0.85909-2.3441 0-4.3282-1.5832-5.0359-3.7105h-3.0068v2.3318c1.4809 2.9414 4.5245 4.9582 8.0427 4.9582z" fill="#34a853"/>
          <path d="m3.9641 10.71c-0.18-0.54-0.28227-1.1168-0.28227-1.71s0.10227-1.17 0.28227-1.71v-2.3318h-3.0068c-0.60955 1.215-0.95727 2.5895-0.95727 4.0418 0 1.4523 0.34773 2.8268 0.95727 4.0418z" fill="#fbbc05"/>
          <path d="m9 3.5795c1.3214 0 2.5077 0.45409 3.4405 1.3459l2.5814-2.5814c-1.5586-1.4523-3.5959-2.3441-6.0218-2.3441-3.5182 0-6.5618 2.0168-8.0427 4.9582l3.0068 2.3318c0.70773-2.1273 2.6918-3.7105 5.0359-3.7105z" fill="#ea4335"/>
          <path d="m0 0h18v18h-18z"/>
        </g>
      </g>
    </svg>
    <span class="button__text">Sign in with Google</button>
  </a>
  <a href="#" class="button button--twitter">
    <svg class="button__logo" width="18" height="18" version="1.1" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"...

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  background: #248c46; /* Green */
  background: #005cce; /* Blue */
  background: #c6cbd1; /* Gray */
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.signInModal {
  display: inline-flex;
  flex-direction: column;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.signInModal__section {
  display: flex;
  flex-direction: column;
  padding: 32px;
  position: relative;
}
.signInModal__section--social {
  background: #fff;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.signInModal__section--social > .button:not(:last-of-type) {
  margin-bottom: 8px;
}
.signInModal__section--email {
  background: #e8ebef;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
/*
.signInModal__sectionHeader {
  font: 500 18px "Roboto", sans-serif;
  margin-bottom: 12px;
  color: #2b2e33;
}
*/
.signInModal__sectionHeaders {
  display: flex;
  position: relative;
}
.signInModal__sectionHeaders:before,
.signInModal__sectionHeaders:after {
  content: "";
  position: absolute;
  height: 50%;
  left: 0;
  right: 0;
}
.signInModal__sectionHeaders:before {
  top: 0;
  background: #fff;
}
.signInModal__sectionHeaders:after {
  bottom: 0;
  background: #e8ebef;
}
.signInModal__sectionHeader {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
  position: relative;
  z-index: 1;
  
  font: 500 16px "Roboto", sans-serif;
}
.signInModal__sectionHeader--social {
  background: #fff;
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}
.signInModal__sectionHeader--email {
  background: #e8ebef;
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
}

.button {
  display: flex;
  align-items: center;
  padding: 4px;
  background: #005cce;
  font: 400 16px...