JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
  <title>Floats!</title>
</head>
<body>

<div class="wrapper">
  <div class="box hotpink" id="red"></div>
  <div class="box red"></div>
  
  <!-- <div style="clear: both;"></div> -->
  
  <div class="box yellow"></div>
  <div class="box blue"></div>

 <div style="clear: both;"></div>
  
  <div class="box orange"></div> 
  <div class="box green"></div>
  <div class="box purple"></div>
</div>

</body>
</html>

CSS

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

    /* apply a natural box layout model to all elements */    

*, *:before, *:after {
      -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    }
	
@media only screen and (min-width: 768px){
    html, body {
		margin-top: 15%;
      background: #000000;
    }

    .wrapper {
      width: 90%;
      margin: 0 auto;
      padding: 1em;
      background: #3e3d3b;
      color: #fff;
    }

    .box {
      border-width: 4px;
      border-style: solid;
      height: 100px;
      margin-bottom: 1em;
    }

    .red {
      background: #ab331c;
      border-color: #6f2011;
	  width: 32%;
	  float: right;
	  margin-right: 34%;
	  
    }
	
	box .red:after{
	  content: "";
  	  display: table;
  	  clear: both;
	}
    .blue {
      background: #4d6bb6;
      border-color: #243255;
	  width: 66%;
    }

    .green {
      background: #6bbf85;
      border-color: #2c4e36;
	  width: 32%;
	  margin-left: 34%;
    }

    .purple {
      background: #9a74bb;
      border-color: #503d62;
	  width: 32%;
	  float:right;
	  margin-top: -18%;
    }

    .orange {
      background: #c09344;
      border-color: #664e23;
	  width: 32%;
	 ...