5+ CSS Twitter Login Page Examples

This post contains a total of 5+ Hand-Picked CSS Twitter Login Page Examples with Source Code. All these Twitter Login Pages are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Twitter Login Page Examples

1. By Volkan Yildiz

Made by Volkan Yildiz. Minimalistic Twitter Login Page. Source

CSS twitter login page by Volkan Yildiz
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
:root {
  --blue: rgb(29, 161, 242);
  --blue-hover: rgb(26, 145, 218);
  --blue-pressed: rgb(23, 129, 194);
}

* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  background-color: rgb(21,32,43);
  color: #fff;
}

h1 {
  font-size: 23px;
}

.container {
  display: grid;
  place-items: center;
  margin: 0 auto;
  width: 30%;
}

.twitter-logo {
  height: 36px;
  width: 36px;
  fill: #fff;
  margin: 20px 0;
}

.form-element {
  display: flex;
  flex-direction: column-reverse;
  margin-top: 40px;
  width: 100%;
}

.form-element label {
 color: rgb(136, 153, 166); 
}

.form-element input {
  padding: 2px 0 5px 0;
  background: transparent;
  width: 100%;
  font-size: 19px;
  color: #fff;
  border-bottom: 2px solid gray; /* borderdaki radius'u yaparsΔ±n sen */
}

.form-element input:focus {
  outline: none;
  border-bottom-color: var(--blue);
}

input:focus + div label {
  color: var(--blue);
}

.form-element .btn {
  font-size: 15px;
  font-weight: bold;
  line-height: 19.6px;
  padding: 15px 30px;
  border-radius: 30px;
  cursor: pointer;
  outline: none;
}

.form-element .btn.btn-blue {
  background-color: var(--blue);
  color: #fff;
}

.form-element .btn.btn-blue:hover {
  background-color: var(--blue-hover);
}

.form-element .btn.btn-blue:active {
  background-color: var(--blue-pressed);
}
</style>
</head>
<body>
  <div class="container">
  <div class="twitter-logo">
    <svg viewBox="0 0 24 24" class="r-jwli3a r-4qtqp9 r-yyyyoo r-j66t93 r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"></path></g></svg>
  </div>
  <h1>Twitter Login</h1>
  
  <div class="form-element">    
    <input type="text" id="account_identifier" class="form-input">  
      <div>
      <label for="account_identifier">Text</label>
      </div>
  </div>
  
  
<div class="form-element">
    
    <input type="text" id="account_identifier" class="form-input">  
      <div>
      <label for="account_identifier">test</label>
    </div>
  </div>
  
  <div class="form-element">
    <button class="btn btn-blue">Log In</button>
  </div>
  
</div>
</body>
</html>

2. By Janet

Made by Janet. Twitter CSS Login Page Clone. Source

CSS twitter login page by Janet
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
  
<style>
@import
url("https://fonts.googleapis.com/css?family=Prompt");
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body,html{
  width:100vw;
  height:100%;
  font-family: sans-serif;
  overflow-x:hidden;
}
#login-button, #sign-up, #login{
  font-family: "Prompt";
  letter-spacing:1px;
}
.main-container{
  display:flex;
  height:100vh;
  width:100vw;
  
}
.left, .right{
  flex:1;
  height:100%;
}
.left{
  display:flex;
  align-items:center;
  justify-content:center;
  background: url('http://1000logos.net/wp-content/uploads/2017/06/Twitter-Logo.png') no-repeat, #25aafc;
  background-position:30% 50%;
}
.icon{
  color:#fff;
  font-family:FontAwesome;
  font-size:2em; 
  display:inline-block;
}
.search::before{
  content:'\f002';
  font-family:FontAwesome;
}
.chat::before{
  content:'\f0e5';
  font-family:FontAwesome;
}
.group::before{
  content:'\f0c0';
  font-family:FontAwesome;
}
.communication-box{
  display:flex;
  flex-direction:column;
}
.message{
  margin:1em;
  display:flex;
  align-items:center;
}
/*RIGHT SIDE*/
.right input, 
#login-button{
  padding:1em;
}
.username,
.password{
  padding:0 .5em;
}
.left p {
  display:inline-block;
  margin:0 1em;
  color:#fff;
  font:bold 1.1em/1 "Helvetica";
}
.right{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  z-index:1;
}
.login-form{
  position:absolute;
  top:20px;
  display:flex;
}
.right input{
  border:1px solid rgba(0,0,0,.08);
  color:#aaa; 
}
.right input:focus{
  border:1px solid #47b8ff;
}
.right input:focus::placeholder{
  color:#aaa;
}
.forgot-pass{
  display:block;
  margin:5px 0 0 0;
}
.forgot-pass a{
  text-decoration:none;
  font-size:.9em;
  color:#aaa;
}
.forgot-pass a:hover{
  text-decoration:underline;
}
#login-button{
  align-self:flex-start;
  border-radius:100px;
  border:1px solid #25aafc;
  background-color:#fff;
  font-weight:bold;
  color:#1f98e2;
  line-height:1.3em;
  cursor:pointer;
  transition: all .2s ease-in-out;
}
#login-button:hover{
  background-color:rgba(36, 164, 242, .1);
}
.join-box{
  max-width:350px;
}
.bird::before{
  content:"\f099";
  font-family:FontAwesome;
  color: #25aafc;
  font-size:1.5em;
}
.bird{
  margin:0 0 .3em 0;
}
.join-box h1{
  font-size:1.7em;
  margin:0 0 1.5em 0;
}
.join-box h2{
  font-size:1.2em;
  padding:1em 0;
}
#sign-up, #login{
  width:100%;
  padding:.7em;
  margin:.5em 0;
  border-radius:100px;
  border:none;
  font-weight:bold;
  cursor:pointer;
}
#sign-up{
  background-color:#25aafc;
  color:#fff;
}
#login{
  background-color:#fff;
  border:1px solid #25aafc;
  color:#25aafc;
}

/*FOOTER*/
footer{
  border-top:1px solid #ccc;
  padding:1em;
  width:100%;
  background-color:#fff;
}
footer a, footer p{
  color:#bbb;
  font-size:.8em;
  text-align:center;
}
.footer-content{
  display:table;
  margin:0 auto;
}
footer p{
  display:inline;
}
footer a{
  text-decoration:none;
  margin:0 .4em;
}
footer a:hover{
  text-decoration:underline;
}

@media screen and (max-width:1000px),
  screen and (max-height:500px){
  .login-form{
    display:none;
  }
}
@media screen and (max-width:770px){
  .main-container{
    display:block;
    position:relative;
    height:100%;
  }
  footer{
    position:absolute;
    bottom:0;
  }
}
</style>
</head>
<body>
  <div class = "main-container">
  <div class = "left">
    <div class = "communication-box">
      <div class = "message"><span class = "icon search"></span><p>Follow your interests.</p></div>
      <div class = "message"><span class = "icon group"></span><p>Hear what people are talking about</p></div>
      <div class = "message"><span class = "icon chat"></span><p>Join the conversation.</p></div>
    </div>
  </div>
  <div class = "right">
    <div class = "login-form">
      <div class = "username">
        <input type="text" placeholder = "Phone, email, or username">
      </div>
      <div class = "password">
        <input type="password" placeholder = "Password"> 
        <span class = "forgot-pass"><a href = "#">Forgot password?</a></span></div>
      <button id = "login-button">Log in</button>
    </div>
    <div class = "join-box">
      <span class = "icon bird"></span>
      <h1>See what's happening in the world right now</h1>
      <h2>Join Twitter today.</h2>
      <div class = "signup-login">
        <button id = "sign-up">Sign Up</button>
        <button id = "login">Log in</button>
      </div>
    </div>
  </div>
</div>
<footer>
  <div class = "footer-content">
    <a href="#">About</a>
    <a href="#">Help Center</a>
    <a href="#">Blog</a>
    <a href="#">Status</a>
    <a href="#">Jobs</a>
    <a href="#">Terms</a>
    <a href="#">Privacy Policy</a>
    <a href="#">Cookies</a>
    <a href="#">Ads info</a>
    <a href="#">Brand</a>
    <a href="#">Apps</a>
    <a href="#">Advertise</a>
    <a href="#">Marketing</a>
    <a href="#">Businesses</a>
    <a href="#">Developers</a>
    <a href="#">Directory</a>
    <a href="#">Settings</a>
    <p>Β© 2018 Twitter</p>
  </div>
</footer>
</body>
</html>

3. By anas alpure

Made by anas alpure. Classic Twitter Login Page. Source

CSS twitter login page by anas alpure
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
*{
    box-sizing: border-box;
}
html{
    font-family: Arial, Helvetica, sans-serif;
}

body{
    margin: 0;
}
.twitter-login-box {
    max-width: 600px;
    margin: 20px auto;
}

.twitter-login-box header img{
    width: 70px;
}

.twitter-login-box header{
    text-align: center;
}
.input-wrapper{
    margin-bottom: 15px;
}

.input-wrapper label,
.input-wrapper input{
    width: 100%;
    display: block;
}

.input-wrapper input{
    border: none;
    background-color: #eee;
    padding: 10px;
    font-size: 20px;
    border-bottom: 3px solid #6a6a6a;
}

.input-wrapper input[type="password"]{
   border-bottom: 3px solid red;
}

.input-wrapper input:focus{
    outline: none;
}

.input-wrapper label{
    background-color: #eee;
    padding: 10px;
    color: #6a6a6a;
}

.twitter-btn{
    background-color: #33b3ee;
    border: none;
    width: 100%;
    padding: 15px;
    border-radius: 30px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}

.twitter-login-box .footer{
    text-align: center;
    margin-top: 20px;
    color: #33b3ee;
}
.twitter-login-box .footer a{
    color: #33b3ee;
    text-decoration: none;
}
</style>
</head>
<body>

    <div class="twitter-login-box">
        <header>
            <img src="https://static01.nyt.com/images/2014/08/10/magazine/10wmt/10wmt-jumbo-v4.jpg?quality=90&auto=webp" alt="twitter logo">
            <h1>Login To Twitter</h1>
        </header>

        <form>
            <div class="input-wrapper">
                <label for="user-name-id">Phone, Email or Username</label>
                <input type="text" name="username" id="user-name-id">
            </div>

            <div class="input-wrapper">
                <label for="password-id">Password</label>
                <input type="password" name="password" id="password-id">
            </div>

            <button class="twitter-btn">Log in</button>
        </form>

        <div class="footer">
            <a href="#">Forget Password</a> . 
            <a href="#">Sign up to twitter</a>
        </div>
    </div>
</body>
</html>

4. By Piyush Jatola

Made by Piyush Jatola. Twitter Login Page with Tailwind CSS. Source

CSS twitter login page by piyush jatola
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
  <style>
  .bg {
      background-color: rgb(29, 161, 242);
  }
  .bg:hover {
      background-color:#1a91da!important;
  }
  .border {
      border: 1px solid rgb(29, 161, 242);
  }
 .border:hover {
     background-color:#e8f5fe!important;
  }

  
  .text {
      color: rgb(29, 161, 242);
  }
  </style>
</head>
<body>
  <!-- ... -->

  <div class="flex w-full">
  
    <div class="mb-4">
    <img src="https://abs.twimg.com/sticky/illustrations/lohp_en_850x623.png" alt="Twitter" style="width:100%;height:540px;">
    <img src="https://pngimg.com/uploads/twitter/small/twitter_PNG15.png" alt="Twitter" style="position: absolute;left: 20%;top: 25%;">
    </div>

    <div class="px-10 py-16" style="width:50%">
        <div><img src="https://www.creativefreedom.co.uk/wp-content/uploads/2017/06/Twitter-logo-2012.png" alt="Twitter Logo" class="w-12 mb-16"></div>
        <p class="text-6xl font-black mb-12">Happening now</p>
        <p class="text-4xl font-bold mb-12">Join Twitter today.</p>

        <button class="bg block w-80 rounded-full py-3 text-white mb-5">Sign up</button>
        <button class="w-80 rounded-full py-3 border text font-bold">Log in</button>
    </div>
  
  </div>

  <div class="text-center mb-2">
<span><a href="#" class="mx-1 text-sm  hover:underline text-gray-500">About</a></span>
<span><a href="#" class="mx-1 text-sm  hover:underline text-gray-500">Help Center</a></span>
<span><a href="#" class="mx-1 text-sm  hover:underline text-gray-500">Terms of Service</a></span>
<span><a href="#" class="mx-1 text-sm  hover:underline text-gray-500">Privacy Policy</a></span>
<span><a href="#" class="mx-1 text-sm  hover:underline text-gray-500">Cookie Policy</a></span>
<span><a href="#" class="mx-1 text-sm  hover:underline text-gray-500">Ads info</a></span>
<span><a href="#" class="mx-1 text-sm  hover:underline text-gray-500">Blog</a></span>
<span><a href="#" class="mx-1 text-sm  hover:underline text-gray-500">Status</a></span>
<span><a href="#" class="mx-1 text-sm  hover:underline text-gray-500">Careers</a></span>
<span><a href="#" class="mx-1 text-sm  hover:underline text-gray-500">Brand Resources</a></span>
<span><a href="#" class="mx-1 text-sm  hover:underline text-gray-500">Advertising</a></span>
<span><a href="#" class="mx-1 text-sm  hover:underline text-gray-500">Marketing</a></span>
<span><a href="#" class="mx-1 text-sm  hover:underline text-gray-500">Twitter for Business</a></span>
<span><a href="#" class="mx-1 text-sm  hover:underline text-gray-500">Developers</a></span>
<span><a href="#" class="mx-1 text-sm  hover:underline text-gray-500">Directory</a></span>
<span><a href="#" class="mx-1 text-sm  hover:underline text-gray-500">Settings</a></span>
  </div>
<p class="text-center text-gray-500 text-sm mb-4">Β© 2021 Twitter, Inc.</p>
</body>
</html>

5. By Atul

Made by Atul. Old Twitter Login page Clone. Source

CSS twitter login page by atul
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap" rel="stylesheet">
<style>
* {
    padding: 0px;
    margin: 0px;
}
body {
    background-color: rgba(0, 172, 238, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.box {
    height: 400px;
    width : 690px;
    background: white;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
    position: absolute;
}
.box::before {
    content: "";
    width: 270px;
    height: 100%;
    background: #00acee;
    position: absolute;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
}
.bi-twitter {
    position: absolute;
    font-size: 180px;
    margin-top: 25px;
    margin-left: 50px;
    color: rgba( 255, 255, 255, 0.4);
}
.head {
    font-family: 'poppins', sans-serif;
    position: absolute;
    color: white;
}
.head p {
    margin-top: 280px;
    margin-left: 29px;
}
.head button {
    width: 200px;
    height: 35px;
    font-family: 'poppins', sans-serif;
    background-color: transparent;
    border: 1px solid white;
    color: white;
    border-radius: 30px;
    margin-top: 20px;
    margin-left: 30px;
    transition : all 1s ease;
}
.head button:hover {
    background-color: white;
    border: none;
    color: #00acee;
}
.content h2 {
    font-family: 'poppins', sans-serif;
    position: absolute;
    margin-left: 300px;
    margin-top: 40px;
    font-size: 29px;
}
input {
    position: absolute;
    font-family: 'poppins', sans-serif;
    width: 340px;
    height: 30px;
    border: 1px solid grey;
    padding-left: 10px;
    color: grey;
}
#inp1 {
    margin-top: 200px;
    margin-left: 300px;
}
#inp2 {
    margin-top: 250px;
    margin-left: 300px;
}
.content button {
    position: absolute;
    margin-top: 300px;
    margin-left: 300px;
    width: 150px;
    height: 35px;
    border: none;
    border-radius: 30px;
    background-color: #00acee;
    font-family: 'poppins', sans-serif;
    color: white;
    transition: all 1s ease;
}
.content button:hover {
    background: transparent;
    border: 1px solid #00acee;
    color: #00acee;
}
</style>
</head>
<body>
  <div class="box">
      <i class="bi bi-twitter"></i>
      <div class="head">
    <p>Already have an account ?</p>
    <button>Log In</button>
    </div>
    <div class="content">
        <h2>Join Twitter today and start exploring the world's thoughts.</h2>
        <input type="text" placeholder="Your full name" id="inp1">
        <input type="text" placeholder="Your email address or Phone number" id="inp2">
        <button>Continue</button>
    </div>
  </div>
</body>
</html>

6. By Shubham Singh Rajput

Made by Shubham Singh Rajput. Dark themed CSS Twitter Signin Page. Source

CSS twitter login page by shubham singh rajput
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
*{ 
    padding: 0px;
    margin:0px;
}
body{
    background-color: rgb(44, 44, 44);
}
.container{
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.card{
    height: 600px;
    width: 600px;
    background-color: black;
    border-radius: 50px;
    text-align: center;
}
.container .logo1{
    height: auto;
    width: 600px; 
    text-align: center;
}
.container .logo{
    height: 75px;
    width: 75px;
    padding: 50px 0px;
}
.container h3{ 
    color: white;
    font-weight: bolder;
    margin: 10px;
    font-size: 28px;
}
.login{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px;
}
.log{
    height: 20px;
    width: 20px;
    margin: 5px;
    }
button{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 280px;
    font-weight: bold;
    border-radius: 30px;
}
button:hover{
    cursor: pointer;
    background: rgb(216, 216, 216);
}
h6{
    width: 100%;
    margin: 20px 0px;
    text-align: center;
    color: white;
    font-size: 20px;
    border-bottom: 1px solid rgb(87, 87, 87);
    line-height: 0.1em;

}
h6 span{
    padding: 0px 10px;
    background: rgb(0, 0, 0);
}
input{
    height: 45px;
    width: 280px;
    color: white;
    margin: 10px;
    background: transparent;
    border-radius: 5px;
    border: 1px solid white;
    text-align: center;
}
p{
    color: white;
    margin: 5px;
}
p a{
    text-decoration: none;
    color: rgb(160, 160, 233);
}
.forgot{
    background: transparent;
    color: white;
    border: 1px solid white;
}
.forgot:hover{
    background: rgb(49, 42, 42);
}
@media screen and (max-width: 650px){
    .container{
        background: black;
        border-radius: 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
}
</style>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="logo1">
                <img src="https://freepngimg.com/thumb/twitter/6-2-twitter-png-image.png" alt="" class="logo">
            </div>
            <h3>Sign in to Twitter</h3>
            <div class="login">
                <button>
                    <img src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png" alt="Apple Logo" class="log">
                    Sign in with Google
                </button>
            </div>
            <div class="login">
                <button>
                    <img src="https://www.freepnglogos.com/uploads/mac-cosmetic-png-logo/infinite-island-apple-emblem-mac-cosmetic-png-logo-10.png" alt="Google Logo" class="log">
                    Sign in with Apple
                </button>
            </div>
            <h6><span>or</span></h6>
            <input type="text" placeholder="Phone, email, or username" required>
            <div class="login">
                <button>
                    Next
                </button>
            </div>
            <div class="login">
                <button class="forgot">
                    Forgot passwod?
                </button>
            </div>
            <p>
                Don't have an account? <a href="#">Sign up</a>
            </p>
        </div>
    </div>
</body>
</html>