JSFiddle - React, Tailwind, and code Playground

by BilisimOgretmeni

HTML

<h3 class="animated bounceInDown"><strong>Winsoft HBYS</strong></h3>
                    <div class="login-box clearfix animated flipInY">
                        <div class="login-logo">
                            <img src="../../Content/Images/login/logo.png" />
                        </div> 
                        <hr />
                        <div class="login-form">
			               
<form action="/login?redirect=%2F" id="signupform" method="post"><input autofocus="true" id="UserName" name="UserName" placeholder="Kullanıcı Adı" required="true" type="text" value="" /><input id="Password" name="Password" placeholder="Şifre" required="true" type="password" /><input id="IpAdresi" name="IpAdresi" style="display: none;" type="text" value="" /><input data-val="true" data-val-required="IsEImza alanı gereklidir." id="IsEImza" name="IsEImza" style="display:none" type="checkbox" value="true" /><input name="IsEImza" type="hidden" value="false" />                                <button type="submit" id="girisBtn" class="btn btn-red">GİRİŞ YAP</button>
                                <button type="button" id="girisEImzaBtn" class="btn btn-red" style="display:none" onclick="eImza.sertifikaSifreKontrol()">E-İmza Giriş</button>
</form>                            <div class="login-links"> 
                                <!-- <a href="forgot-password.html">
                                    Şifremi unuttum?
                                    <!--</a>-->
                                <br />
                                <!--<a href="sign-up.html">-->
                                <span onclick="javaScript:eimzaClisck();" style="cursor: pointer; padding-top: 5px" id="eimzaBilgi"><strong>E-İmza</strong> ile Giriş</span>
                                <br/>                                
                                <span onclick="javaScript:sifremiUnuttum();" style="cursor: pointer; padding-top: 5px" id="sifremiUnuttum"><strong>Şifremi Unuttum...

CSS

.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    } 40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.flipInX {
	-webkit-backface-visibility: visible...