JSFiddle - React, Tailwind, and code Playground
HTML
<div class="amx-inputDateTime-picker-wrapper">
<div class="amx-inputDateTime-picker-DateTab-selected"><span class="amx-inputDateTime-picker-dateText">Jun 20, 2012</span></div>
<div class="amx-inputDateTime-picker-TimeTab"><span class="amx-inputDateTime-picker-timeText">10:45 AM<span></div>
<table class="amx-inputDateTime-datePicker-inner-container">
<tr>
<td class="amx-inputDateTime-datePicker-firstColumn-increment incrementIcon"></td>
<td class="amx-inputDateTime-datePicker-secondColumn-increment incrementIcon"></td>
<td class="amx-inputDateTime-datePicker-thirdColumn-increment incrementIcon"></td>
</tr>
<tr>
<td class="amx-inputDateTime-datePicker-month-text">JUN</td>
<td class="amx-inputDateTime-datePicker-day-text">20</td>
<td class="amx-inputDateTime-datePicker-year-text">2012</td>
</tr>
<tr>
<td class="amx-inputDateTime-datePicker-firstColumn-decrement decrementIcon"></td>
<td class="amx-inputDateTime-datePicker-secondColumn-decrement decrementIcon"></td>
<td class="amx-inputDateTime-datePicker-thirdColumn-decrement decrementIcon"></td>
</tr>
</table>
<div class="amx-inputDateTime-picker-setButton"><span class="picker-button-text">Set</span></div>
<div class="amx-inputDateTime-picker-cancelButton"><span class="picker-button-text">Cancel</span></div>
</div>
<div class="amx-inputDateTime-picker-wrapper">
<div class="amx-inputDateTime-picker-DateTab"><span class="amx-inputDateTime-picker-dateText">Jun 20, 2012</span></div>
<div class="amx-inputDateTime-picker-TimeTab-selected"><span class="amx-inputDateTime-picker-timeText">10:45 AM<span></div>
<table class="amx-inputDateTime-timePicker-inner-container">
<tr>
<td...
CSS
/* Date and Time Picker for Android */
.amx-inputDateTime-picker-wrapper {
margin: 8px;
padding: 10px;
border-radius: 5px;
opacity: .96;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.00, #000103), color-stop(0.1, #3b434d), color-stop(0.25, #3b434d), color-stop(0.52, #272d37), color-stop(0.92, #171f28), color-stop(0.96, #576271), color-stop(0.99, #8694a7), color-stop(1.00, #a4b2c7));
width: 223px;
height: 218px;
position: relative;
border: 1px solid #000000;
box-shadow: 0px 0px 2px 2px #000000;
}
.amx-inputDateTime-picker-DateTab {
height: 30px;
width: 226px;
border: solid 1px #191919;
border-radius: 5px 5px 0px 0px;
font-weight: bold;
font-size: 14px;
font-family: 'Helvetica Neue',Arial,sans-serif;
overflow:hidden;
white-space:nowrap;
text-align:center;
color: #fff;
padding: 5px 0 0 0;
background-image: -webkit-gradient(linear, left bottom, left top,
color-stop(0, #2f6bac),
color-stop(0.49, #214d81),
color-stop(0.5, #2c588d),
color-stop(1.0, #6d98c9));
cursor: pointer;
box-sizing: border-box;
}
.amx-inputDateTime-picker-TimeTab {
height: 30px;
width: 226px;
border: solid 1px #191919;
border-radius: 0px 0px 5px 5px;
font-weight: bold;
font-size: 14px;
font-family: 'Helvetica Neue',Arial,sans-serif;
overflow:hidden;
white-space:nowrap;
text-align:center;
color: #fff;
padding: 5px 0 0 0;
background-image: -webkit-gradient(linear, left bottom, left top,
color-stop(0, #2f6bac),
color-stop(0.49, #214d81),
color-stop(0.5, #2c588d),
color-stop(1.0, #6d98c9));
cursor: pointer;
box-sizing: border-box;
}
.amx-inputDateTime-picker-DateTab-selected,
.amx-inputDateTime-picker-TimeTab-selected {
height: 26px;
width: 224px;
border: solid 1px #191919;
...