JSFiddle - React, Tailwind, and code Playground

by Semih Muyaoğlu

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">

  <div class="row m-5">

    <div class="col-md-12 mb-3 pl-0">
      <div class="labelInsideBlock"><span>AD SOYAD</span><input type="text" class="form-control labelInside" /></div>
    </div>
    
    <div class="col-md-12 mb-3 pl-0">
      <div class="labelInsideBlock"><span>E-POSTA</span><input type="text" class="form-control labelInside" /></div>
    </div>
    
    <div class="col-md-12 mb-3 pl-0">
      <div class="labelInsideBlock"><span>TELEFON</span><input type="text" class="form-control labelInside" /></div>
    </div>
       
    <div class="col-md-12 mb-3 pl-0">
      <div class="labelInsideBlock"><span>ŞİFRE</span><input type="password" class="form-control labelInside" /></div>
    </div>
    <div class="col-md-12 mb-3 pl-0">
      <button type="submit" class="btn btn-success btn-lg w-100">GÖNDER</button>
    </div>
    
  </div>
</div>

CSS

.labelInsideBlock>span {
  font-family: verdana;
  font-size: .6em;
  z-index: 9999;
  position: absolute;
  left: 15px;
  top: 10px;
  color: #999 !important;
}

.labelInside {
  position: relative;
  font-family: verdana;
  padding-top: 25px !important;
  padding-bottom: 10px !important;
  height: unset !important; border:1px solid #efefef;-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

}


.labelInside[type=password] {
  -webkit-text-security: circle;

  
}

.labelInside:focus { box-shadow:none; border:1px solid #c0c0c0;-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
 }