JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<!DOCTYPE html>
<html>
    <head>
    	<title>Result</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     
	</head>
	<body>
        <div class="header">Home</div>
        <div class="header">About Us</div>
        <div class="header">Contact</div>   
        <br>
        <form class="">
        MESSAGE: <input type="text" name="message" value="Type your text here!">
        </form>
        <button>Add!</button><br/>
        <div id="messages"></div>
         <img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg"/>
	</body>
</html>

CSS

form {
    font-size: 12px;
    font-family: Verdana, Arial, Sans-Serif;
    display: inline-block;
}
#messages {
    font-size: 14px;
	font-family: Garamond, Times, Serif;
}
.red{
  font-size :30px;
 }
 .header {
    
    margin-bottom: 1000px;
    border-radius: 5px;
    background-color: #ABCDEF;
    transition: background-color 0.5s ease;
    display:inline;
    font-size:25px;
    padding:20px;
    border:1px solid #ccc;
    margin-top:10px;
}

.active {
    background-color:#556677;
}

img {
    position: relative;
    left: 0;
    top: 0;
}

JavaScript

$(document).ready(function() {
    $('button').click(function() {
    	var toAdd = $("input[name=message]").val();
        $('#messages').append("<p>"+toAdd+"</p>");
    });
    $('div').hover(
    function(){
    $(this).addClass('active')
    },
    function(){
     $(this).removeClass()}
  );
 $(document).keydown(function(key) {
        switch(parseInt(key.which,10)) {
			// Left arrow key pressed
			case 37:
				$('img').animate({left: "-=10px"}, 'fast');
				break;
			// Up Arrow Pressed
			
			case 38:
			$('img').animate({top: "-=10px"}, 'fast');
				break;
			// Right Arrow Pressed
			case 39:
				$('img').animate({left: "+=10px"}, 'fast');
				break;
			// Down Arrow Pressed
			case 40:
			$('img').animate({top: "+=10px"}, 'fast');
				break;
		}
	});

});