JSFiddle - React, Tailwind, and code Playground

by akmiecik

HTML

<input type="text" name="timepicker" class="timepicker"/>

CSS

.wickedpicker {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-shadow: 0 0 0 1px rgba(14, 41, 57, .12), 0 2px 5px rgba(14, 41, 57, .44), inset 0 -1px 2px rgba(14, 41, 57, .15);
    background: #fefefe;
    margin: 0 auto;
    border-radius: .1px;
    width: 270px;
    height: 130px;
    font-size: 14px;
    display: none
}

.wickedpicker__title {
    background-image: -webkit-linear-gradient(top, #fff 0, #f2f2f2 100%);
    position: relative;
    background: #f2f2f2;
    margin: 0 auto;
    border-bottom: 1px solid #e5e5e5;
    padding: 12px 11px 10px 15px;
    color: #4C4C4C;
    font-size: inherit
}

.wickedpicker__close {
    -webkit-transform: translateY(-25%);
    -moz-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    -o-transform: translateY(-25%);
    transform: translateY(-25%);
    position: absolute;
    top: 25%;
    right: 10px;
    color: #34495e;
    cursor: pointer
}

.wickedpicker__close:before {
    content: '\00d7'
}

.wickedpicker__controls {
    padding: 10px 0;
    line-height: normal;
    margin: 0
}

.wickedpicker__controls__control,
.wickedpicker__controls__control--separator {
    vertical-align: middle;
    display: inline-block;
    font-size: inherit;
    margin: 0 auto;
    width: 35px;
    letter-spacing: 1.3px
}

.wickedpicker__controls__control-down,
.wickedpicker__controls__control-up {
    color: #34495e;
    position: relative;
    display: block;
    margin: 3px auto;
    font-size: 18px;
    cursor: pointer
}

.wickedpicker__controls__control-up:before {
    content: '\e800'
}

.wickedpicker__controls__control-down:after {
    content: '\e801'
}

.wickedpicker__controls__control--separator {
    width: 5px
}

.text-center,
.wickedpicker__controls,
.wickedpicker__controls__control,
.wickedpicker__controls__control--separator,
.wickedpicker__controls__control-down,
.wickedpicker__controls__control-up,
.wickedpicker__title {
    text-align:...

JavaScript

!function($,window,document){"use strict";function Wickedpicker(e,t){this.element=$(e),this.options=$.extend({},defaults,t),this.element.addClass("hasWickedpicker"),this.element.attr("onkeypress","return false;"),this.element.attr("aria-showingpicker","false"),this.createPicker(),this.timepicker=$(".wickedpicker"),this.up=$("."+this.options.upArrow),this.down=$("."+this.options.downArrow),this.separator=$(".wickedpicker__controls__control--separator"),this.hoursElem=$(".wickedpicker__controls__control--hours"),this.minutesElem=$(".wickedpicker__controls__control--minutes"),this.secondsElem=$(".wickedpicker__controls__control--seconds"),this.meridiemElem=$(".wickedpicker__controls__control--meridiem"),this.close=$("."+this.options.close);var i=this.timeArrayFromString(this.options.now);this.options.now=new Date(today.getFullYear(),today.getMonth(),today.getDate(),i[0],i[1],i[2]),this.selectedHour=this.parseHours(this.options.now.getHours()),this.selectedMin=this.parseSecMin(this.options.now.getMinutes()),this.selectedSec=this.parseSecMin(this.options.now.getSeconds()),this.selectedMeridiem=this.parseMeridiem(this.options.now.getHours()),this.setHoverState(),this.attach(e),this.setText(e)}"function"!=typeof String.prototype.endsWith&&(String.prototype.endsWith=function(e){return e.length>0&&this.substring(this.length-e.length,this.length)===e});var isMobile=function(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)},today=new Date,pluginName="wickedpicker",defaults={now:today.getHours()+":"+today.getMinutes(),twentyFour:!1,upArrow:"wickedpicker__controls__control-up",downArrow:"wickedpicker__controls__control-down",close:"wickedpicker__close",hoverState:"hover-state",title:"Timepicker",showSeconds:!1,secondsInterval:1,minutesInterval:1,beforeShow:null,show:null,clearable:!1};$.extend(Wickedpicker.prototype,{showPicker:function(e){"function"==typeof...