JSFiddle - React, Tailwind, and code Playground

by Aboubacar Bah

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 {
  /* put in font-family property for body */
  font-family: Arial, Helvetica, sans-serif;
  background: #ffffff;
}


/* make h1 and h2 different colors by using the color property */

h1 {
  /* give the h1 a bottom border */
  color: red;
}

h2 {
  color: #00ff00;
}

p {
  /* make the line-height to be 150% 
     and the padding-left 2em; */
     line-height: 150%;
     padding-left: 2em;
}

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

.clearfix {
  overflow: auto;
}