JSFiddle - React, Tailwind, and code Playground

by jt3k

HTML

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  * { font-family: Calibri,sans-serif,arial }
  h1 {
    padding: 0 25px;
    margin:5px 0;
    font-size:16px;
    font-weight:bold;
    letter-spacing:1px;
  }
  #tsentrushko input[type="text"],
  #tsentrushko input[type="password"] {
    border-radius:10px;
    font-size:20px;
    padding:0 0.4em 0.13em;
    background: #fff;
    border:1px solid #877EB6;
    font-weight: bold;
    margin-bottom:10px;
  }

  #tsentrushko span { line-height:20px; font-size:16px; font-weight:bold; padding:0 5px }
  
  #tsentrushko h1 {
    font-size: 200%;
    font-weight: bold;
     }
</style>
    <script>
var one = 'DEFAULT';
var two = 'DEFAULT';

    function chcolor(obj,mode) {
      if (mode == '1')
      {
          obj.style.backgroundColor='#FCFFDB';
          obj.style.borderColor='#F09445';
          one = obj.value;
        }
      else if (mode == '0')
      {
          obj.style.backgroundColor='#fff';
          obj.style.borderColor='#887EB6';
          two = obj.value;
      }
    }
function checkk()
        {
        if(one != 'DEFAULT' && two != 'DEFAULT')
        {
        document.getElementById('go').style.background='#F09445';
        document.getElementById('go').style.color='#fff';
        }
        }
    </script>
</head>
  <body onload=""><img src="http://www.inetvu.ru/altegrosky.png" height="80" style="clear:both">
    <div style="width:333px;margin:0 auto;">
      <h1>Authorization</h1>
<div id="tsentrushko" style="
    border-radius: 26px;
    background:#fcfcfc;
border:0;
    border-top: 3px solid #887EB6;
    border-bottom: 3px solid #887EB6;
    display:inline-block;
    padding:10px 20px
">
<span>User:</span><br>
  <input type=text
    onFocus="chcolor(this,1)"
    onBlur="chcolor(this,0)"
    onkeyup="checkk()"><br>
    
<span>Password:</span><br>
  <input...