JSFiddle - React, Tailwind, and code Playground

by Wya Egg

HTML

<html class="new-background"> <head> <title>My Website</title> </head>
<script> 
var a = "green"
string link = "<a href=\"https://scratch.mit.edu/projects/1023086610/embed\" "target=\"_blank\">Hello</a>"
</script>

<! --- Body ---!>
<body>
<h1 class="header"> My Website </h1>
<p class="writing"> <strong> Hello! Welcome to my website! I have made a side bar on both sides. The right one is on the top, and the left one is on the bottom. If you have any suggestions, please notify me! </strong> <br> <br> <br> <br> <br> <br> </p>
<p class="writing2"> <strong> This is a test to see if text can go next to the side bars. Unfortunately, it can't. </strong> </p>
</body>
<! --- /Body ---!>


<! --- Right Side Bar --- !>
<body>
<svg width="530" height="1000">
<rect class="rectangle" width="50" height="410" x="480" y="120" rx="20" ry="20" style="fill:white; stroke-width:2.5;stroke:black"> </rect> Sorry, your browser does not support inline SVG.
<a href="https://scratch.mit.edu/projects/1023086610/embed"> <circle r="18" cx="506" cy="150" fill=red> </circle> </a>
<circle r="18" cx="506" cy="200" fill=orange> </circle>
<circle r="18" cx="506" cy="250" fill=yellow> </circle>
<circle onclick = "makeGreenBackground()" r="18" cx="506" cy="300" fill=green />
<circle r="18" cx="506" cy="350" fill=blue> </circle>
<circle r="18" cx="506" cy="400" fill=purple> </circle>
<circle r="18" cx="506" cy="450" fill=pink> </circle>
<circle r="18" cx="506" cy="500" fill=black> </circle>
</svg>
</body>
<! --- /Right Side Bar --- !>


<! --- Left Side Bar --- !>
<body>
<svg width="530" height="1000">
<rect class="rectangle" width="50" height="410" x="2" y="120" rx="20" ry="20" style="fill:white; stroke-width:2.5;stroke:black"> </rect> Sorry, your browser does not support inline SVG.
<circle r="18" cx="27" cy="150" fill=red> </circle>
<circle r="18" cx="27" cy="200" fill=orange> </circle>
<circle r="18" cx="27" cy="250" fill=yellow> </circle>
<circle r="18" cx="27" cy="300" fill=green>...

CSS

body {
background: linear-gradient(to right, blue, orange, red, purple, white);
}
.header {
    text-align: center;
  }
.writing {
    text-align: center;
    color: green;
    font-size: "10";
}
.writing2 {
    text-align: left;
    color: green;
}
.new-background {
    background-color: linear-gradient(to right, orange, blue, purple);
}

JavaScript

/* JavaScript used in HTML section */