<p class="title">Social Login</p>

<div id="container">

  <div id="white">
  <div id="facebook">
    <p class="facew">f</p>
    <div id="closeface" class="close">X</div>
    <div id="facelogin" class="containerlogin">
      <form method="post">
      <div class="group">
        <input type="text" class="inputmat" placeholder="Username" required>
        <span class="bar"></span>
      </div>
      <div class="group">
        <input type="password" class="inputmat" placeholder="Password" required>
        <span class="bar"></span>
      </div>
      <button class="button" type="submit">Sign in</button>
      </form>
    </div>
  </div>
  <div id="google">
    <p class="facew"><i class="fa fa-google-plus"></i></p>
    <div id="closegoogle" class="close">X</div>
    <div id="googlelogin" class="containerlogin">
      <form method="post">
      <div class="group">
        <input type="text" class="inputmat" placeholder="Username" required>
        <span class="bar"></span>
      </div>
      <div class="group">
        <input type="password" class="inputmat" placeholder="Password" required>
        <span class="bar"></span>
      </div>
      <button class="button" type="submit">Sign in</button>
      </form>
    </div>
  </div>
  <div id="twitter">
    <p class="facew"><i class="fa fa-twitter"></i></p>
    <div id="closetwitter" class="close">X</div>
    <div id="twitterlogin" class="containerlogin">
      <form method="post">
      <div class="group">
        <input type="text" class="inputmat" placeholder="Username" required>
        <span class="bar"></span>
      </div>
      <div class="group">
        <input type="password" class="inputmat" placeholder="Password" required>
        <span class="bar"></span>
      </div>
            <button class="button" type="submit">Sign in</button>
      </form>
    </div>
  </div>
  </div>
</div>