JSFiddle - React, Tailwind, and code Playground

by Romanouski_Tucke_9

HTML

<html>

  <head>
    <title>CSS</title>

    <body>
      <div id="A1">
        <img src="http://comicsculture.co.uk/wp-content/uploads/2017/09/timeline.png" alt="Marvel Movie Timeline." width="800px" height="500px">
      </div>

      <div id="B2">
        <UL>
          <LI>CSS</LI>
          <LI>Colors</LI>
          <LI>Fonts</LI>
          <LI>Backgrounds</LI>
          <LI>Borders</LI>
          <LI>Margins</LI>
          </UL>
      </div>

      <div id="C3">
      
      </div>


    </body>

CSS

#A1 {
  Background-color: Black;
  Color: Red;
  Border: Black;
  Margin: 10px;
  Text-align: center;
  Text-decoration: underline;
  Text-shadow: 2px .5px White;
  font-size: 40px;
}

#B2 {
  Background-color: Black;
  Color: red;
  Text-align: left;
  Text-decoration: None;
  Display: Inline-block;
}

JavaScript

var button = document.createElement("C3");
button.innerHTML = "More";
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);
button.addEventListener ("click", function() {
  alert("For more about  the  Marvel Cinematic Universe go to http://marvelcinematicuniverse.wikia.com/wiki/Marvel_Cinematic_Universe_Wiki");
});