JSFiddle - React, Tailwind, and code Playground

by godsnake

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="buildingwrap">
<div class="bigparent">
    <div class="parent">
      
	  <div class="child">
	  <div class="numberCircle">1</div>
	  </div>
	  
	  <div class="child">
      <div class="textwrapper">
      <h2>Upload your media and get discovered</h2>
      <p class="text-muted">Share, find, buy, or sell any type of content with the help of filters.
	  
	 </p>
      </div>
	  </div>
	  
    </div>
	
	  <div class="parent">
      
	  <div class="child">
	  <div class="numberCircle">2</div>
	  </div>
	  
	  <div class="child">
      <div class="textwrapper">
      <h2>Represent your city everytime you post</h2>
      <p class="text-muted">Raise local awareness with tags linked to content in your area.</p>
      </div>
	  </div>
	  
    </div>
 

      <div class="parent">
	  <div class="child">
	  <div class="numberCircle">3</div>
	  </div>

	  
	  <div class="child">
      <div class="textwrapper">
      <h2>Make real connections with users nearby</h2>
      <p class="text-muted">Connect with neighbors, friends, fans, and rising stars in your city.</p>
      </div>
	  </div>
	  	  </div>
 

	    <div class="parent">
      
	  <div class="child midcircle">
	  <div class="numberCircle">4</div>
	  </div>
	  
	  <div class="child">
      <div class="textwrapper">
      <h2>Get started by typing your email address</h2>
              <div class="guestlist">
                <form class="guestlist-form form-inline" action="signup" method="post">

           <input name="emailaddress" class="form-control input-lg" id="enterfield" type="email" title="Enter Email Address" class="guestlistfield" placeholder="Enter your Email" />
                    <input class="button btn-lg btn" title="Enter Email" name="submit" type="submit" autofocus="autofocus" value="Sign up!"> 
      ...

CSS

html{
  padding:0; margin:0; height: 100%;
}

html {  box-sizing: border-box; min-height:100% !important; height: 100%;}
*,
*:before,
*:after {
  box-sizing: inherit;
}

body {background:skyblue;}


/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
/* thank you Erik J - negate effect of float*/
}

input:focus {   
  border-color: #000 !important;
  box-shadow:none !important;
  outline: 0 none;
}

.form-control {color:#000 !important;}

.button { background:#f90; color:#fff!important; font-weight:bold;}

.button:hover {background:#fc8c00; color:#fff;}

.signupwrapper {display:inline-block; position:relative; width:auto; }


 .numberCircle {
margin-right:30px; 
  }

 
.numberCircle {
  border-radius: 50%;
  behavior: url(PIE.htc);
  /* remove if you don't care about IE8 */
  background: #333;
  border: 2px solid #333;
  color: #fff;
  text-align: center;
}


.buildingwrap .form-control , textarea {
    border:3px solid #f2f2f2 !important;
  outline: none; background:#f2f2f2;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}


.buildingwrap .form-control:focus, textarea:focus {
    border:3px solid #333 !important;  background:#fff;
}

.buildingwrap .btn {background:#333 !important; color:#fff !important; font-weight:bold;}

.buildingwrap .btn:hover {background:#000 !important; color:#fff !important;}

.bigparent {  display:inline-block;  margin: 0 auto; margin-left:0px;}
.parent{margin-bottom:0px;  margin-top:0px;}		 
.title {font-size:20px; margin-top:60px;  }
.child{display:inline-table;vertical-align:middle;}
 .numberCircle {clear:both; margin:0 auto; margin-right:10px; display:block; } 
 h2 {font-size: 20px; display: inline-block;
}

  .numberCircle {
    font: 36px Arial, sans-serif;
    width: 46px;
    height: 46px;vertical-align:bottom;
  }

.buildingwrap {position:relative;  width:100%;  }
.buildingwrap .form-control {min-width:70%!important;...