JSFiddle - React, Tailwind, and code Playground

by Alexander Branchugov

HTML

<!DOCTYPE html>
<html>
<head>

</head>
<body>
  <div id="root">
    <div>
	  <div id="navigation">
		
	  </div>
	  <div id="_1content">
		<p>Hello {{token}}!</p>
		{% block content %}
		{% endblock %}
		<button id="submit" value="/logout">Log Out!</button>
	  </div>
	  <script type="text/javascript" src="{{ url_for('site.static', filename = 'a-b.js') }}"></script>
	</div>
	
	<div id="submit-container">
	  <div id="_1anim">
	  <form action="/submit" method="POST">
		<input type="text" name="key">
		<button id="submit" value="/">Submit</button>
	  </form>
	  </div>
	</div>
	<script type="text/javascript" src="{{ url_for('site.static', filename='ajax.js') }}"></script>
  </div>
</body>
</html>

CSS

tml{
  width: 100%;
  height: 100%;
}

body{
  font-family: 'Roboto', sans-serif;
  margin: 0; 
  padding: 0;
}

#submit-container{
  text-align: center;
  margin-top: 45vh;
}

#_1anim{
  text-align: center;
  position: relative;
  width: 80vh;
  background: red;
}

#navigation{
  position: fixed;
  background: #eee;
  padding: 7vh;
  width: -webkit-fill-available;
}

#_1content{
  
}