JSFiddle - React, Tailwind, and code Playground

by DigitalBiscuits

HTML

<div id="page_wrapper">
    <div id="content_wrapper">
        
        <h1 id="title">Hello World</h1>
        
        <div id="clickme" class="button">Click Me</div>
    
        <div id="result"></div>
        
    </div>
</div>

CSS

#page_wrapper
{
    background: #CCC;
    width:100%;
    height:100%;
}

#content_wrapper
{
    width:500px;
    min-height:500px;
    margin: 0 auto;
}

h1
{
    font-size: 32px;
    padding: 15px 0 0 0;
    font-weight: 100;
    font-family: "Helvetica Neue", Segoe UI, Arial, sans-serif;
    color:#666;
}

.button 
{
    display: block;
    zoom: 1;
    vertical-align: center;
    width: 200px;
    padding: 20px;
    margin:50px auto;
    
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    font-size: 22px;
    font-weight: 100;
    font-family: "Helvetica Neue", Segoe UI, Arial, sans-serif;
       
    cursor: pointer;
    text-align: center;
        
    color: #606060;
    border: solid 1px #DDD;
    background: white;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(#EDEDED));
    background: -moz-linear-gradient(top, white, #EDEDED);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');

}

#title
{
    text-align:center;
}
#result
{
    margin-top: 20px;
}

JavaScript

$(document).ready(
  {
      $("#clickme").click(function()
      {
          $("#result").html("Thank You...");
      });
  });