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.
    </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 class="col-xs-12">
      FOUR
    </div>
  </div>
  
  <hr/>
  
  <div class="padds">
    <div...

CSS

.padds {
  padding: 10px;
}

.sorter {
  border: solid 1px #000;
  padding: 10px!important;
}

.sorter span {
  position: relative;
  width: 100%;
  float: left;
  white-space: normal;
  word-wrap: break-word;
  overflow: hidden;
  height: 100px;
  background: yellow;
  border: dashed 1px #ccc;
  padding: 10px;
  text-align: center;
}