JSFiddle - React, Tailwind, and code Playground

by Ramya Ranganathan

HTML

<header>
  <h1>CSCI E-12 Topics</h1></header>
<h2>Hypertext Markup Language (HTML)</h2>
<div class="clearfix">
  <img class="badge" src="http://cscie12.dce.harvard.edu/resources/images/logo-html5.png" alt="HTML5 logo" />
  <p>HTML is the Web’s core language for creating content for <strong>everyone</strong> to use <strong>anywhere</strong>. The World Wide Web's markup language has always been HTML. </p>
  <p>HTML was originally designed as a language for semantically describing scientific documents, but its general design and adaptations over the years have enabled it to be used to describe a number of other types of documents.</p>
</div>
<h2>Cascading Style Sheets (CSS)</h2>
<div class="clearfix">
  <img class="badge" src="http://cscie12.dce.harvard.edu/resources/images/logo-css3.png" alt="HTML5 logo" />
  <p>Style sheets describe how documents are presented on screens, in print, or perhaps how they are pronounced. Cascading Style Sheets (CSS) is a style sheet mechanism that has been specifically developed to meet the needs of Web designers and users.</p>
</div>
<h2>JavaScript</h2>
<div class="clearfix">
  <img class="badge" src="http://cscie12.dce.harvard.edu/resources/images/logo-js.png" alt="HTML5 logo" />
  <p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic
    control over them.</p>

  <p><em>Client-side JavaScript</em> extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events
    such as mouse clicks, form input, and page navigation.</p>
</div>

CSS

body {
   font-family: "Times New Roman", Georgia, Serif;
  background: #ffffff;
}
h1 {
  color: #A52A2A; 
  text-decoration: underline;
}

h2 {
  color: blue;
}

p {
  line-height: 150%;
   padding: 2em;
}

.badge {
  width: 100px;
  float: right;
  margin-left: 5px;
  margin-right: 5px;
}

.clearfix {
  overflow: auto;
}