JSFiddle - React, Tailwind, and code Playground

by hakarune

HTML

<div id="wrapper">
    
    <div id="box">-this is an empty box for content. put an image in here-</div>
    
    <p> This is a paragraph box. </p>
    
    <button>Click Me!</button>
  
    </div>

CSS

body  {
		background-color: #ffffff; 
		font-family: futura, helvetica, arial, sans-serif 
		}
	
	#wrapper {
		position: relative; 
		background-color: #ffffff; 
		width: 800px; 
		height: 600px; 
		margin: 20px auto; 
		border: 1px dotted #000000; 
		padding: 20px;
		} 
	
	p  {
		position: absolute;
		right: 0px;
		bottom: 0px;
		background-color: #ffffff; 
		width: 450px; 
		border: 1px solid #000000; 
		padding: 10px; 
		margin: 0px
		}
	
	#box  {
		position: absolute;
		left: 0px;
		top: 0px;
		padding: 10px;
		background-color: #ffffff; 
		background-repeat: no-repeat; 
		width: 400px; 
		height: 270px; 
		border: 2px solid #000000;
		}
		
	button  {
		position: fixed;
		right: 0px;
		top: 0px;
		}

JavaScript

$("button").click(function(){
    $("#box").animate(
        {width: "620px"},1000);
});