JSFiddle - React, Tailwind, and code Playground
by Keith Jeter
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col padds">
<h1>
Sample Tests
</h1>
<h2>
Test 1: DOM Order
</h2>
<p>
Please look at the sample DOM below and place the css and javascript external links in the optimal order for page performance. Don't worry about the markup, this is just a simple reorder exercise.
</p>
<pre>
//--html--
//--head--
--script src="http://someplace.com/overrides.js"--
--script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"--
--head--//
//--body--
-- Body stuff goes here --
--body--//
--link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css--
--link rel="stylesheet" href="http://someplace.com/overrides.css--
--script src="https://code.jquery.com/jquery-2.2.4.js--
--link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css--
--html--//
</pre>
<h2>
Test 2: Simple Floats
</h2>
<p>
Using this fiddle and the CSS and JS Libraries already attached, restyle the elements below so that they are 2up, have a background color and border color. Also center the text and makes sure it wraps correctly if the content goes longer than one row.
</p>
</div>
<div class="row">
<div class="col-xs-12">
ONE
</div>
<div class="col-xs-12">
TWO
</div>
<div class="col-xs-12">
THREE
</div>
<div...
CSS
body { background: yellow; }