JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<div class="global-notification global-notification--devkinsta" aria-hidden="true">
<div class="bodymovin global-notification__image" data-name="logo">
<center><div class="tiklogo">T</div></center>

<div class="animationBox" aria-hidden="true" style="width: 70px; height: 70px; display: none;"></div>
</div><h3 class="global-notification__title heading--small">רוצה להוסיף מדריכים?</h3>
<!--- <p class="global-notification__text">בוא לקחת חלק</p> -->
<a href="https://tiktakit.com/wp-login.php?action=register" class="button global-notification__cta">הצטרפו אלינו</a><p style="font-family:arial;color:white;font-size:20px;">או</p>

<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>
			התחברו עם Google		</a>
	</div>
</div>

</div>

CSS

.global-notification--devkinsta {
    background-image: url(https://cdn.pixabay.com/photo/2017/03/30/07/22/cyber-2187407__340.jpg);
    background-size: cover;
    background-position: 50%;
    color: #fff;
    text-align: center;
    max-width: 240px;
    height: 270px; 
    direction:rtl;
}

.tiklogo {
  box-shadow: 0px 1px 20px #FFFFFF;
  line-height: 0.95;
  width:60px;
  height: 60px;
  border-radius:8px;
  color:white;
  font-size:64px;
  font-weight: bold;
  font-family: 'calibri';
background: rgb(27,15,109);
background: linear-gradient(278deg, rgba(27,15,109,1) 0%, rgba(83,51,237,1) 100%);
  }
 
 .google {}

.global-notification {
    display: block;
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    background-color: #fff;
    color: #43414e;
    border-radius: 10px;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 30%);
    max-width: 290px;
    padding: 1.5rem;
    z-index: 10000;
    opacity: 1;
    transform: translateY(0);
    transition: transform .6s,opacity .6s;
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, main, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: initial;
}

*, :after, :before {
    box-sizing: border-box;
}

@media (min-width: 64em)
.global-notification--devkinsta .global-notification__title {
    font-size: 1.5rem;
}
.global-notification--devkinsta .global-notification__title {
    font-size: 1.45rem;
}
.global-notification__title {
  padding-top:15px;
    font-weight: 700;
    font-family: Brandon...