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:Helvetica,Verdana,Arial,sans-serif;
  background: #ffffff;
}



h1 {
  color:	#A52A2A;
  border-bottom:thick solid #A52A2A;/* give the h1 a bottom border */
}

h2 {
  color:blue;
}

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

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

.clearfix {
  overflow: auto;
}