JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div id="wrapper">
  <div id="header" >
    <div id="headerright">Login with Facebook | Contact Us| Help </div>
    <div id="headerleft"><img src="anaawez.png"  /></div>
  </div>
  <div id="search">
    <form>
      <label>ANA AWEZ</label>
      <input type="text" />
      <select name="type">
        <option name="work" value="work">work</option>
      </select>
      <input type="button" value="submit" />
    </form>
  </div>
  <div id="container">
    <div id="blockcontainer">
      <div id="blockouterleft">
        <div id="blockinnerleftleft">
        <div >
        <div id="image" ><p ><img src="dta2.png" align="left" height="90px" width="90px"/></p></div></div>
          <div id="contenttext">i want you to spread my shitty facebook application , please i need to steal your data ASAP ! :D <a href="#">view ad</a></div>
        </div>
        <div id="blockinnerleftmiddle"></div>
      </div>
      <div id="blockouterright">
        <div id="blockinnerrightleft"></div>
      </div>
      <div id="blockouterleft">
        <div id="blockinnerleftleft"></div>
        <div id="blockinnerleftmiddle"></div>
      </div>
      <div id="blockouterright">
        <div id="blockinnerrightleft"></div>
      </div>
      <div id="blockouterleft">
        <div id="blockinnerleftleft"></div>
        <div id="blockinnerleftmiddle"></div>
      </div>
      <div id="blockouterright">
        <div id="blockinnerrightleft"></div>
      </div>
    </div>
  </div>
  <div id="tagcloud">BlackBerry IPHONE 4GS SAMSUNG GALAXY SII MIDO BADER JOB PROGRAMMER </div>
  <div id="bottom"></div>
</div>

CSS

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    height: 97%;
    background-image: url(bg.jpg);
    background-repeat-x: repeat;
    background-repeat-y: no-repeat;
    background-attachment: initial;
    background-position-x: initial;
    background-position-y: initial; /*background-origin*/
-webkit-background-origin: initial;
    -moz-background-origin: initial;

    background-origin: initial; /*background-clip*/
-webkit-background-clip: initial;
    background-color: #718693;
}

#wrapper {
    background: white;
    border: 1px solid #000;
    margin: auto;
    margin-top: 10px;
    font: 1.5em arial, verdana, sans-serif;
    width: 960px;
    height: 100%%; /*border-radius*/

-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

#header {
    height: 8%;
    background-color: white;
    font-family: verdana;
    font-size: 15px;
    margin: 10px; /*border-radius*/

-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 10px;
}

#headerleft {
    text-align: left;
    vertical-align: top;
    float: left;
}

#headerright {
    text-align: right;
    float: right;
}

#search {
    height: 5%;
    text-align: center;
}

#container {
    height: 50%;
    text-align: right;
    font-family: verdana;
    font-size: 15px;
    margin: 10px; /*border-radius*/

-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
}

#blockcontainer {
    height: 80%;
}

#blockouterleft {
    float: left;
    width: 65%;
    height: 39%;
    margin-top: 5px; /*border-radius*/

-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

#blockinnerleftleft {
    float: left;
    width: 45%;
    height: 100%;
    background-color: #FDFDFD; /*border-radius*/

-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius:...