hectorrios/dabblet.css

## dabblet.css
/**
 * The first commented line is your dabblet’s title
 */

div#page-wrap {
	width: 500px;
	margin: 25px auto;
}

.header {
  background:#fbeac3;
}

button {
  /* background-color:red; */
  border-radius:5px;
}

table, td {
   border:1px solid black;
   border-radius:5px;
}

.box-three {
  width:300px;
  background:#fbeac3;
  border: 1px solid #534515;
  position: relative;
  border-top-left-radius:15px;
  border-top-right-radius:15px;
  padding:5px;
  margin-top:5px;
  margin-bottom:5px;
}

.box-three .inside1 {
	padding: 0 20px;
}


.box-four {
  width:300px;
  background:#fbeac3;
  border: 1px solid #534515;
  position: relative;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius:15px;
  padding:5px;

}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->

<button id="myBtn" disabled>20/20 Experience</button>
<div id="page-wrap">
    <button>Hector</button>
    <div class="header">
      Header Div
    </div>

    <table>
      <thead>
        <th>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </th>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>


        </tr>
          <td>4</td>
          <td>5</td>
          <td>6</td>
        <tr>

        </tr>
          <td>7</td>
          <td>8</td>
          <td>9</td>
        <tr>
        </tr>
      </tbody>
    </table>

	<div class="box-three">
	   <div class="inside">
	      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
	      sed do eiusmod tempor incididunt ut labore et dolore magna
	      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
	      ullamco laboris nisi ut aliquip ex ea commodo consequat.
	      Duis aute irure dolor in reprehenderit in voluptate velit
	      esse cillum dolore eu fugiat nulla pariatur. Excepteur
	      sint occaecat cupidatat non proident, sunt in culpa
	      qui officia deserunt mollit anim
	      id est laborum.</p>
	   </div>
	</div>

	<!-- Box Four -->
	<div class="box-four">
	    <div class="inside">
	      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
	      sed do eiusmod tempor incididunt ut labore et dolore magna
	      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
	      ullamco laboris nisi ut aliquip ex ea commodo consequat.
	      Duis aute irure dolor in reprehenderit in voluptate velit
	      esse cillum dolore eu fugiat nulla pariatur. Excepteur
	      sint occaecat cupidatat non proident, sunt in culpa
	      qui officia deserunt mollit anim
	      id est laborum.</p>
	   </div>
	</div>
</div>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* The first commented line is your dabblet’s title
	*/

	div#page-wrap {
	width: 500px;
	margin: 25px auto;
	}

	.header {
	background:#fbeac3;
	}

	button {
	/* background-color:red; */
	border-radius:5px;
	}

	table, td {
	border:1px solid black;
	border-radius:5px;
	}

	.box-three {
	width:300px;
	background:#fbeac3;
	border: 1px solid #534515;
	position: relative;
	border-top-left-radius:15px;
	border-top-right-radius:15px;
	padding:5px;
	margin-top:5px;
	margin-bottom:5px;
	}

	.box-three .inside1 {
	padding: 0 20px;
	}


	.box-four {
	width:300px;
	background:#fbeac3;
	border: 1px solid #534515;
	position: relative;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius:15px;
	padding:5px;

	}
	<!-- content to be placed inside <body>…</body> -->

	<button id="myBtn" disabled>20/20 Experience</button>
	<div id="page-wrap">
	<button>Hector</button>
	<div class="header">
	Header Div
	</div>

	<table>
	<thead>
	<th>
	<td>1</td>
	<td>2</td>
	<td>3</td>
	</th>
	</thead>
	<tbody>
	<tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>


	</tr>
	<td>4</td>
	<td>5</td>
	<td>6</td>
	<tr>

	</tr>
	<td>7</td>
	<td>8</td>
	<td>9</td>
	<tr>
	</tr>
	</tbody>
	</table>

	<div class="box-three">
	<div class="inside">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
	sed do eiusmod tempor incididunt ut labore et dolore magna
	aliqua. Ut enim ad minim veniam, quis nostrud exercitation
	ullamco laboris nisi ut aliquip ex ea commodo consequat.
	Duis aute irure dolor in reprehenderit in voluptate velit
	esse cillum dolore eu fugiat nulla pariatur. Excepteur
	sint occaecat cupidatat non proident, sunt in culpa
	qui officia deserunt mollit anim
	id est laborum.</p>
	</div>
	</div>

	<!-- Box Four -->
	<div class="box-four">
	<div class="inside">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
	sed do eiusmod tempor incididunt ut labore et dolore magna
	aliqua. Ut enim ad minim veniam, quis nostrud exercitation
	ullamco laboris nisi ut aliquip ex ea commodo consequat.
	Duis aute irure dolor in reprehenderit in voluptate velit
	esse cillum dolore eu fugiat nulla pariatur. Excepteur
	sint occaecat cupidatat non proident, sunt in culpa
	qui officia deserunt mollit anim
	id est laborum.</p>
	</div>
	</div>
	</div>