JSFiddle - React, Tailwind, and code Playground

by Murat Kezli

HTML

<style>
@import url('https://fonts.googleapis.com/css?family=Muli:400,700,900&subset=latin-ext');
</style>

<div style="max-width:990px; padding-left:10px; margin:10px auto; padding:40px;">


<div class="form-contanier">

<label class="w100 ust">
<input type="text" name="isim" tabindex="1" value="" onfocusout="fctrl(this)" required/>
<div class="labeltext">User Name</div>
</label>

<label class="w100 alt">
<input type="text" name="isim" tabindex="1" value="" onfocusout="fctrl(this)" required/>
<div class="labeltext">Password</div>
</label>


</div>

CSS

:root {
  --background: rgba(250, 250, 250, 1);
  --formyazi:rgba(20,20,20,1);
--active:rgba(57,181,74,1);
--koyu: rgba(220, 220, 220, 0.5);
  --acik: rgba(5, 5, 5, 0.5);
  --pasif: rgba(50, 50, 50, 0.5);
  --boxline: rgba(220, 220, 220, 0.3);
  --bordo: rgba(93, 2, 2, 1);
  --beyaz: rgba(92553, 255, 255, 1);
}

body {
  margin: 0px;

  background-color: var(--background);
  font-family: 'Muli', sans-serif;
  font-weight: 400 !important;
  font-size: 18px;
  display:flex;
  justify-content: center;
  align-items: center;
  height:100vh;
  
  
}

.form-contanier{
  

  background-color:transparent;
  width:300px;

}



p {
  color: var(--acik);
  display: inline-block;
}

.w50 {
  width: calc(50% - 30px); float:left;
}

.w100 {
  width: calc(100% -30px); float:none;
}

label, button {
  margin-bottom:0px;
  margin-right:0px;
  height: 36px;
  display: inherit;
  overflow: hidden;
  font-weight: 700;
  
  background-color: var(--beyaz);
  padding:10px;  
}
.ust{ 
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border:solid 1px rgba(0,0,0,0.2);
}

.alt{ 
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
border:solid 1px rgba(0,0,0,0.2);
border-top:solid 0px rgba(0,0,0,0.2);
}

button{ border:none; outline:none;padding: 10px 20px 10px 20px;}
button:hover{ background-color:var(--active); color:white; cursor:pointer; }
button:active{ background-color:var(--pasif); }

.textarealabel{  overflow: auto !important;height: auto!important; }
.labeltextarea{  color:var(--pasif);; font-size: small;  font-weight:400; margin-bottom:5px;}

label input[type='text'], input[type='email']{
  width: 100%;
  height: 50px;
  border: 0px;
  background-color: transparent;
 ...

JavaScript

$(document).ready(function(){
	"use strict";
    
   });
   
 function fctrl(gelen){

var val = $(gelen).val();
 if (val== ""){
$(gelen).next(".labeltext").removeClass("labelup");
 }else{
  $(gelen).next(".labeltext").addClass("labelup");
 }
 
 }
 
 function sogry(gelen)
    {
    var axx = $(gelen).val();
   
    if (axx == ""){gelen.style.color = "var(--pasif)";
      } else {gelen.style.color = "var(--formyazi)"; }
    }