JSFiddle - React, Tailwind, and code Playground

by Kamlesh Gupta

HTML

<script src="http://fonts.googleapis.com/css?family=Share+Tech+Mono"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div><h1></h1></div>

CSS

body{
 background: #111; 
}
div{
  position: relative;
  background-color: #030303;
  background-image: linear-gradient(rgba(255, 255, 255, .1) 50%, transparent 50%, transparent);
  text-align: center;
  font-family: 'Share Tech Mono', sans-serif;
  font-size: 2.5em;
  width: 12em;
  margin: 2em auto;
  border-radius: .4em;
  padding: .5em;
}
div:before{
  content: 'snooze';
  font-size: .25em;
  line-height: .9em;
  padding: 0;
  height: .9em;
  width: 9em;
  position: absolute;
  top: -1.05em;
  right: 4.2em;
  color: #777;
  background-color: #000;
  background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-size: 1px 3px;
  border: 1px solid #444;
  border-bottom:0;
  border-top-right-radius: 30px;
  border-top-left-radius: 30px;
}
h1{
  background-color: #000;
  border: 3px solid #000;
  border-radius: .15em;
  padding: .1em .3em .1em .1em;
  display: inline-block;
  color: #fff;
  text-align: center;
  text-transform: lowercase;
  letter-spacing: -.05em;
  white-space: nowrap;
  margin: 0;
}
h1:before, h1:after{
  content: ' ';
  background: #000;
  background-image: linear-gradient(30deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-size: 3px 3px;
  position: absolute;
  height: .15em;
  width: .5em;
  bottom: -.15em;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
h1:before{
  left: .5em;
}
h1:after{
  right: .5em;
}

JavaScript

var setTime = function(){
  var d = new Date();
  var s = d.getSeconds();
  var time = d.toLocaleTimeString();
  var styles = {
      'color': 'hsla(' + (s*3) +', 90%, 50%, 1)',
      'textShadow': '0px 0px 5px hsla(' + (s*3) +', 100%, 70%, .5)',
      'borderColor': 'hsla(' + (s*3) +', 50%, 20%, .4)',
      'backgroundColor': 'hsla(' + (s*3) +', 80%, 20%, .9)'
    };
  $('h1').text(time).css(styles);
  setTimeout(setTime, 1000);
}
setTime();
if(setTime==new Date("07-19-2015 19-51-000")){
    alert("hello");
}