JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<div class="wp_google_login">
	<div class="wp_google_login__button-container">
		<a class="wp_google_login__button" href="https://accounts.google.com/o/oauth2/auth?client_id=544489753911-19v7rteffst738956vk7obfgmj2cu1r2.apps.googleusercontent.com&amp;redirect_uri=https%3A%2F%2Ftiktakit.com%2Fwp-login.php&amp;state=eyJub25jZSI6ImQ1MGE5YzQzMzYiLCJyZWRpcmVjdF90byI6Imh0dHBzOlwvXC90aWt0YWtpdC5jb21cL3dwLWFkbWluXC8iLCJwcm92aWRlciI6Imdvb2dsZSJ9&amp;scope=email+profile+openid&amp;access_type=online&amp;response_type=code">
			<span class="wp_google_login__google-icon"></span>
			Log in with Google		</a>
	</div>
</div>

CSS

.wp_google_login {
    margin: 40px auto 0;
    clear: both;
    padding-top: 10px;
   }
 
 .wp_google_login__button {
    border: solid #ccced0;
    border-width: 1px 1px 2px;
    cursor: pointer;
    display: block;
    width: 100%;
    margin: 0;
    outline: 0;
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    text-decoration: none;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 25px;
    border-radius: 4px;
    padding: 10px 15px;
    background-color: #fff;
    color: #3d4145;
    text-align: center;
}
    

.wp_google_login__google-icon {
    background: url(https://tiktakit.com/wp-content/plugins/login-with-google/assets/build/images/google_light.png) no-repeat 50%;
    width: 25px;
    height: 25px;
    display: inline-block;
    background-size: contain;
    vertical-align: middle;
    margin-right: 10px;
}