JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<div id="datepicker" style="font: 80% 'Trebuchet MS', sans-serif;"></div>

CSS

#nav {
  font-family: 'MedioRegular', "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 15px;
  text-transform: uppercase;
  margin:10px 0 0 10px;
  padding:0;
  list-style:none;
  line-height: 25px;
  }    

#nav li {
  float:left;
  display:block;
  width:167px;
  position:relative;
  z-index:500;
  margin:0 1px;
  }

#nav li a {
  display:block;
  padding:0 0 0 20px;
  height:25px;
  text-decoration:none;
  color:#fff;
    background: #111;
  text-align:left;
  }    

#nav li a:hover {
  color:#fff;
    background: #111;
  }

#nav a.selected {
  color:#fff;
    background: #111;
  }

#nav ul {
  position:absolute;
  left:0;
  display:none;
  margin:0 0 0 -1px;
  padding:0;
  list-style:none;

  }

#nav ul li {
  width:165px;
  float:left;
  border-left:1px solid #111;
  border-right:1px solid #111;
  }

#nav ul li.underline {
  border-bottom:1px solid #111;
  }

#nav ul a {
  display:block;  
  height:25px;
  padding:0 0 0 23px;
  color:#111;
  background:url(../images/spacer.gif) repeat;
  }

#nav ul a:hover {
  text-decoration:none;    
  }

JavaScript

$("#datepicker").datepicker();

$("#datepicker").change(function(){
     alert ($(this).val());
    
});