JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<button class="btn connect_to_service_btn">
	<span class="connect_to_service_btn__service_logo">
		<img src="https://static.holdonsam.com/web-app/1.0.2/img/calendar_logo__google.png" class="connect_to_service_btn__service_logo__img"></span> <span class="connect_to_service_btn__text">Conectar Conta Google</span></button>

CSS

*,
*:after,
*:before {
    box-sizing: border-box;
    font: inherit;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    outline: 0;
    color: inherit;
    text-decoration: none;
}

html {
    font-size: 100%;
    font-family: 'Fira Sans','IBM Plex Sans',sans-serif;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
	
	padding: 5em;
}

img {
    vertical-align: bottom;
}



.btn {
    position: relative;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    border-radius: 50px;
    border: 1px solid transparent;
    transition: .2s;
	font-weight: 800;
}


.connect_to_service_btn {
    border: 1px solid #7ba4ed;
    display: inline-flex;
    align-items: initial;
    background-color: #fff;
	font-size: 19px;
}

.connect_to_service_btn__service_logo {
    padding: 15px 16px 15px  24px;
    border-right: 1px solid #77a3ef;
}

.connect_to_service_btn__service_logo__img {
    height: 1.8em;
}

.connect_to_service_btn__text {
    padding: 10px 27px 11px 20px;
    display: flex;
    align-items: center;
    background: #77a3ef26;
    color: #2c60d2;
    border-radius: 0 50px 50px 0;
}