JSFiddle - React, Tailwind, and code Playground

by gyb314

HTML

<head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/index.css" rel="stylesheet">
        <link href="css/my-css.css" rel="stylesheet">

        <script type="text/javascript">
            $(function() {
                var startDate;
                var endDate;

                var selectCurrentWeek = function() {
                    window.setTimeout(function() {
                        $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
                    }, 1);
                }

                $('.week-picker').datepicker({
                    showOtherMonths: true,
                    selectOtherMonths: true,
                    onSelect: function(dateText, inst) {
                        var date = $(this).datepicker('getDate');
                        startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
                        endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
                        var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
                        $('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings));
                        $('#endDate').text($.datepicker.formatDate(dateFormat, endDate, inst.settings));

                        selectCurrentWeek();
                    },
                    beforeShowDay: function(date) {
                        var cssClass = '';
                        if (date >= startDate && date <= endDate) cssClass =...

CSS

#date {
        position:relative;
        margin-top:5em;
        margin-left: 9%;
    }
    .btn {
        font-family:"Arial";
        display: inline-block;
        text-decoration: none;
        border: 3px solid #000;
        width: 200px;
        height: 50px;
        color: #000;
        margin-top: 5px;
        line-height: 50px;
        text-align: center;
        -webkit-border-radius: 5px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 5px;
        -moz-background-clip: padding;
        border-radius: 5px;
        background-clip: padding-box;
        font-size: 1.7em;
        padding: .5em 1.5em;
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        -o-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
        background: (255, 255, 255, 100%);
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        cursor: pointer;
        zoom: 1;
        -webkit-backface-visibility: hidden;
    }
    .btn:hover {
        -webkit-transition: 0.2s ease;
        -moz-transition: 0.2s ease;
        -o-transition: 0.2s ease;
        transition: 0.2s ease;
        background-color: #ffffff;
        color:rgb(0, 204, 0);
        border-color: rgb(0, 204, 0)
    }
    .btn:focus {
        outline: none;
    }
    .orangeborder {
        border: 2px dashed red;
    }
    div.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all {
        background: none;
        background-color: green;
    }
    /*table.ui-datepicker-calendar tbody
{
  background-color: orange;  
}
tbody tr td.ui-datepicker-week-end a.ui-state-default
{
  background: none;
  background-color: yellow;  
}*/
    .ui-datepicker {
        width: 17em;
        padding: .2em .2em 0;
        display: none;
    }
    .ui-datepicker .ui-datepicker-prev {
        left:2px;
    }
    .ui-datepicker .ui-datepicker-next {
        right:2px;
    }
 ...