COMPONENTS
Tailwind CSS DatePicker
Discover seamless date picking with Tailwind CSS Date Pickers. Effortlessly integrate sleek and customizable date selection components into your web projects, enhancing user experience and streamlining interaction. Explore a range of stylish designs and intuitive features for efficient date input, all powered by the flexibility and simplicity of Tailwind CSS.
Default Datepicker
Use the following example of to create a impressive tailwind datepicker style.
January
|
Mo |
Tu |
We |
Th |
Fr |
Sa |
Su |
|
26 |
27 |
28 |
29 |
30 |
31 |
1 |
|
2 |
3 |
4 |
5 |
6 |
7 |
8 |
|
9 |
10 |
11 |
12 |
13 |
14 |
15 |
|
16 |
17 |
18 |
19 |
20 |
21 |
22 |
|
23 |
24 |
25 |
26 |
27 |
28 |
29 |
|
30 |
31 |
1 |
2 |
3 |
4 |
5 |
<div class="w-full max-w-[330px] px-6 py-7 border border-gray-300 rounded-2xl">
<div class="flex items-center gap-2 mb-2">
<div
class="flex items-center gap-8 border border-gray-300 w-full justify-between rounded-xl py-0.5 px-0.5 text-sm font-medium text-gray-900 ">
<button
class="text-gray-900 p-2 rounded-lg transition-all duration-500 hover:bg-indigo-100 hover:text-indigo-600">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="none">
<path d="M10.0002 11.9999L6 7.99978L10.0025 3.99725" stroke="currentcolor"
stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
January
<button
class="text-gray-900 p-2 rounded-lg transition-all duration-500 hover:bg-indigo-100 hover:text-indigo-600">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="none">
<path d="M6.00236 3.99707L10.0025 7.99723L6 11.9998" stroke="currentcolor"
stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>
<table class="pb-3 ">
<thead class="mb-2">
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Mo</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Tu</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
We</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Th</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Fr</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Sa</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Su</p>
</td>
</tr>
</thead>
<tbody>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
26</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
27</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
28</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
29</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
30</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
31</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
6</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
7</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
8</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
9</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
10</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
11</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
12</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-l-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
13</p>
</td>
<td class="flex items-center justify-center w-10 h-10 ">
<p
class="text-sm font-medium text-white bg-indigo-600 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
14</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
15</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10 rounded-l-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
16</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
17</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
18</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
19</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
20</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
21</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
22</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
23</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
24</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
25</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
26</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
27</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
28</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
29</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
30</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
31</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
</tr>
</tbody>
</table>
</div>
Datepicker with Action buttons
Use below example of date picker in tailwind to add options such as action buttons, date format, orientation.
January
|
Mo |
Tu |
We |
Th |
Fr |
Sa |
Su |
|
26 |
27 |
28 |
29 |
30 |
31 |
1 |
|
2 |
3 |
4 |
5 |
6 |
7 |
8 |
|
9 |
10 |
11 |
12 |
13 |
14 |
15 |
|
16 |
17 |
18 |
19 |
20 |
21 |
22 |
|
23 |
24 |
25 |
26 |
27 |
28 |
29 |
|
30 |
31 |
1 |
2 |
3 |
4 |
5 |
<div class="w-full max-w-[328px] px-6 p-6 border border-gray-300 rounded-3xl">
<div class="flex items-center w-full gap-2 mb-2">
<div
class="flex items-center w-max gap-10 border border-gray-300 rounded-full py-0.5 px-0.5 text-xs font-medium text-gray-900 ">
<button
class="text-gray-900 p-2 rounded-full transition-all duration-500 hover:bg-indigo-100 hover:text-indigo-600">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="none">
<path d="M10.0002 11.9999L6 7.99978L10.0025 3.99725" stroke="currentcolor"
stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
January
<button
class="text-gray-900 p-2 rounded-full transition-all duration-500 hover:bg-indigo-100 hover:text-indigo-600">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="none">
<path d="M6.00236 3.99707L10.0025 7.99723L6 11.9998" stroke="currentcolor"
stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<button
class="flex items-center gap-1.5 py-2.5 pr-1.5 pl-3 rounded-full border border-gray-300 text-xs font-medium text-gray-900 transition-all duration-500 hover:text-indigo-600 hover:bg-indigo-100">
2023
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="none">
<path d="M12 5.99973L7.99984 9.9999L3.99731 5.99738" stroke="currentcolor"
stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<table class="pb-3 border-b border-gray-300">
<thead class="mb-2">
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Mo</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Tu</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
We</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Th</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Fr</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Sa</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Su</p>
</td>
</tr>
</thead>
<tbody>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
26</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
27</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
28</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
29</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
30</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
31</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
6</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
7</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
8</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
9</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
10</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
11</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
12</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-indigo-100 rounded-l-full">
<p
class="text-sm font-medium text-white bg-indigo-600 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
13</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-indigo-100">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
14</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-indigo-100 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
15</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10 bg-indigo-100 rounded-l-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
16</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-indigo-100">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
17</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-indigo-100 rounded-r-full">
<p
class="text-sm font-medium text-white bg-indigo-600 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
18</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
19</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
20</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
21</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
22</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
23</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
24</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
25</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
26</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
27</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
28</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
29</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
30</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
31</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
</tr>
</tbody>
</table>
<div class="flex items-center justify-end pt-3 gap-4">
<button
class="py-2 px-3 rounded-full border border-gray-300 text-xs font-medium text-gray-900 transition-all duration-500 hover:text-indigo-600 hover:bg-indigo-100">Cancel</button>
<button
class="py-2 px-3 rounded-full text-xs font-medium bg-indigo-600 text-white transition-all duration-500 hover:bg-indigo-700">Apply</button>
</div>
</div>
Datepicker with pre-set ranges
You can use this example of tailwind date range picker to select a range of dates in a single datepicker.
January
|
Mo |
Tu |
We |
Th |
Fr |
Sa |
Su |
|
26 |
27 |
28 |
29 |
30 |
31 |
1 |
|
2 |
3 |
4 |
5 |
6 |
7 |
8 |
|
9 |
10 |
11 |
12 |
13 |
14 |
15 |
|
16 |
17 |
18 |
19 |
20 |
21 |
22 |
|
23 |
24 |
25 |
26 |
27 |
28 |
29 |
|
30 |
31 |
1 |
2 |
3 |
4 |
5 |
<div class="w-full max-w-[328px] p-6 border border-gray-300 rounded-2xl">
<div class="flex items-center justify-between gap-2 mb-2">
<div
class="flex items-center w-full gap-8 border border-gray-300 rounded-md py-0.5 px-0.5 text-xs font-medium text-gray-900 ">
<button
class="text-gray-900 p-2 rounded-md transition-all duration-500 hover:bg-indigo-100 hover:text-indigo-600">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="none">
<path d="M10.0002 11.9999L6 7.99978L10.0025 3.99725" stroke="currentcolor"
stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
January
<button
class="text-gray-900 p-2 rounded-md transition-all duration-500 hover:bg-indigo-100 hover:text-indigo-600">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="none">
<path d="M6.00236 3.99707L10.0025 7.99723L6 11.9998" stroke="currentcolor"
stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<button
class="flex items-center gap-1.5 py-2.5 pr-1.5 pl-3 rounded-md border border-gray-300 text-xs font-medium text-gray-900 transition-all duration-500 hover:text-indigo-600 hover:bg-indigo-100">
2023
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="none">
<path d="M12 5.99973L7.99984 9.9999L3.99731 5.99738" stroke="currentcolor"
stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<table class="pb-3 border-b border-gray-300 w-max mx-auto">
<thead class="mb-2">
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Mo</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Tu</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
We</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Th</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Fr</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Sa</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Su</p>
</td>
</tr>
</thead>
<tbody class="">
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
26</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
27</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
28</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
29</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
30</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
31</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
6</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
7</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
8</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
9</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
10</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
11</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
12</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-indigo-100 rounded-l-full">
<p
class="text-sm font-medium text-white bg-indigo-600 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
13</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-indigo-100">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
14</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-indigo-100 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
15</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10 bg-indigo-100 rounded-l-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
16</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-indigo-100">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
17</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-indigo-100 rounded-r-full">
<p
class="text-sm font-medium text-white bg-indigo-600 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
18</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
19</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
20</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
21</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
22</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
23</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
24</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
25</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
26</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
27</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
28</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
29</p>
</td>
</tr>
<tr class="flex pb-3">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
30</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
31</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
</tr>
</tbody>
</table>
<div class="flex items-center justify-end pt-3 gap-4">
<button class="py-2 px-3 rounded-md border border-gray-300 text-xs font-medium text-gray-900 transition-all duration-500 hover:text-indigo-600 hover:bg-indigo-100">Cancel</button>
<button class="py-2 px-3 rounded-md text-xs font-medium bg-indigo-600 text-white transition-all duration-500 hover:bg-indigo-700">Apply</button>
</div>
</div>
Datepicker with time
In this advanced version of tailwind date time picker you can select time that is placed inside datepicker.
January
|
Mo |
Tu |
We |
Th |
Fr |
Sa |
Su |
|
26 |
27 |
28 |
29 |
30 |
31 |
1 |
|
2 |
3 |
4 |
5 |
6 |
7 |
8 |
|
9 |
10 |
11 |
12 |
13 |
14 |
15 |
|
16 |
17 |
18 |
19 |
20 |
21 |
22 |
|
23 |
24 |
25 |
26 |
27 |
28 |
29 |
|
30 |
31 |
1 |
2 |
3 |
4 |
5 |
:
<div class="w-full max-w-[328px] p-6 border border-gray-300 rounded-2xl">
<div class="flex items-center justify-between gap-2 mb-2">
<div
class="flex items-center w-full gap-8 border border-gray-300 rounded-md py-0.5 px-0.5 text-xs font-medium text-gray-900 ">
<button
class="text-gray-900 p-2 rounded-md transition-all duration-500 hover:bg-indigo-100 hover:text-indigo-600">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="none">
<path d="M10.0002 11.9999L6 7.99978L10.0025 3.99725" stroke="currentcolor"
stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
January
<button
class="text-gray-900 p-2 rounded-md transition-all duration-500 hover:bg-indigo-100 hover:text-indigo-600">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="none">
<path d="M6.00236 3.99707L10.0025 7.99723L6 11.9998" stroke="currentcolor"
stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<button
class="flex items-center gap-1.5 py-2.5 pr-1.5 pl-3 rounded-md border border-gray-300 text-xs font-medium text-gray-900 transition-all duration-500 hover:text-indigo-600 hover:bg-indigo-100">
2023
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="none">
<path d="M12 5.99973L7.99984 9.9999L3.99731 5.99738" stroke="currentcolor"
stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<table class="pb-3 border-b border-gray-300 w-max mx-auto">
<thead class="mb-2">
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Mo</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Tu</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
We</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Th</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Fr</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Sa</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Su</p>
</td>
</tr>
</thead>
<tbody class="">
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
26</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
27</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
28</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
29</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
30</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
31</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
6</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
7</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
8</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
9</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
10</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
11</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
12</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-indigo-100 rounded-l-full">
<p
class="text-sm font-medium text-white bg-indigo-600 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
13</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-indigo-100">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
14</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-indigo-100 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
15</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10 bg-indigo-100 rounded-l-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
16</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-indigo-100">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
17</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-indigo-100 rounded-r-full">
<p
class="text-sm font-medium text-white bg-indigo-600 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
18</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
19</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
20</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
21</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
22</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
23</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
24</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
25</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
26</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
27</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
28</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
29</p>
</td>
</tr>
<tr class="flex pb-3">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
30</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
31</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
</tr>
</tbody>
</table>
<div class="flex items-center justify-center py-3 gap-3 border-b border-gray-300">
<select id="hour" class="h-auto border border-gray-300 text-gray-600 text-base rounded-lg block w-14 py-1.5 px-2 focus:outline-none">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option selected="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<span class="text-xl font-semibold text-gray-900">:</span>
<select id="minute" class="h-auto border border-gray-300 text-gray-600 text-base rounded-lg block w-14 py-1.5 px-2 focus:outline-none">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option selected="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
<select id="zone" class="h-auto border border-gray-300 text-gray-600 text-base rounded-lg block w-16 py-1.5 px-2 focus:outline-none">
<option selected="AM">AM</option>
<option value="PM">PM</option>
</select>
</div>
<div class="flex items-center justify-around pt-3 gap-4">
<button class="py-2 px-3 rounded-md text-center w-full border border-gray-300 text-xs font-medium text-gray-900 transition-all duration-500 hover:text-indigo-600 hover:bg-indigo-100">Cancel</button>
<button class="py-2 px-3 rounded-md text-center w-full text-xs font-medium bg-indigo-600 text-white transition-all duration-500 hover:bg-indigo-700">Apply</button>
</div>
</div>
Range Date Picker
Below example show seperate date picker to select date range with action buttons.
January / 2023
february / 2023
|
Mo |
Tu |
We |
Th |
Fr |
Sa |
Su |
|
26 |
27 |
28 |
29 |
30 |
31 |
1 |
|
2 |
3 |
4 |
5 |
6 |
7 |
8 |
|
9 |
10 |
11 |
12 |
13 |
14 |
15 |
|
16 |
17 |
18 |
19 |
20 |
21 |
22 |
|
23 |
24 |
25 |
26 |
27 |
28 |
29 |
|
30 |
31 |
1 |
2 |
3 |
4 |
5 |
|
Mo |
Tu |
We |
Th |
Fr |
Sa |
Su |
|
30 |
31 |
1 |
2 |
3 |
4 |
5 |
|
6 |
7 |
8 |
9 |
10 |
11 |
12 |
|
13 |
14 |
15 |
16 |
17 |
18 |
19 |
|
20 |
21 |
22 |
23 |
24 |
25 |
26 |
|
27 |
28 |
1 |
2 |
3 |
4 |
5 |
|
6 |
7 |
8 |
9 |
10 |
11 |
12 |
<div class="w-fullw-full max-w-xs lg:max-w-2xl mx-auto border border-gray-300 p-4 rounded-2xl">
<div class="flex items-center justify-between gap-2 mb-2 border-b border-gray-300">
<div
class="flex items-center gap-8 py-0.5 px-0.5 text-xs font-medium text-gray-900 ">
<button
class="text-gray-900 p-2 rounded-md transition-all duration-500 hover:bg-indigo-100 hover:text-indigo-600">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="none">
<path d="M10.0002 11.9999L6 7.99978L10.0025 3.99725" stroke="currentcolor"
stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
January / 2023
</div>
<div
class="flex items-center gap-8 py-0.5 px-0.5 text-xs font-medium text-gray-900 ">
<button
class="text-gray-900 p-2 rounded-md transition-all duration-500 hover:bg-indigo-100 hover:text-indigo-600">
</button>
february / 2023
<button
class="text-gray-900 p-2 rounded-md transition-all duration-500 hover:bg-indigo-100 hover:text-indigo-600">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="none">
<path d="M6.00236 3.99707L10.0025 7.99723L6 11.9998" stroke="currentcolor"
stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>
<div class="flex items-center flex-col lg:flex-row gap-6 border-b border-gray-300 justify-between">
<table class="pb-3 w-max ">
<thead class="mb-2">
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Mo</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Tu</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
We</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Th</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Fr</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Sa</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Su</p>
</td>
</tr>
</thead>
<tbody class="">
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
26</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
27</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
28</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
29</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
30</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
31</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
6</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
7</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
8</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
9</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
10</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
11</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
12</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-l-full">
<p
class="text-sm font-medium text-white bg-indigo-600 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
13</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
14</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
15</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10 rounded-l-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
16</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
17</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
18</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
19</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
20</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
21</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
22</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
23</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
24</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
25</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
26</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
27</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
28</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
29</p>
</td>
</tr>
<tr class="flex pb-3">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
30</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
31</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
</tr>
</tbody>
</table>
<div class="w-px relative lg:h-80 bg-gray-300"></div>
<table class="pb-3 w-max ">
<thead class="mb-2">
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Mo</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Tu</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
We</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Th</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Fr</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Sa</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Su</p>
</td>
</tr>
</thead>
<tbody class="">
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
30</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
31</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
6</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
7</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
8</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
9</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
10</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
11</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
12</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
13</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
14</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
15</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
16</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-l-full">
<p
class="text-sm font-medium text-white bg-indigo-600 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
17</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
18</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
19</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10 rounded-l-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
20</p>
</td>
<td class="flex items-center justify-center w-10 h-10 ">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
21</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
22</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
23</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
24</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
25</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
26</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
27</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
28</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
</tr>
<tr class="flex pb-3">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
6</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
7</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
8</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
9</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
10</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
11</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
12</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex items-center justify-end pt-3 gap-4">
<button class="py-2 px-3 rounded-md border border-gray-300 text-xs font-medium text-gray-900 transition-all duration-500 hover:text-indigo-600 hover:bg-indigo-100">Cancel</button>
<button class="py-2 px-3 rounded-md text-xs font-medium bg-indigo-600 text-white transition-all duration-500 hover:bg-indigo-700">Apply</button>
</div>
</div>
Pre-set Range Date Picker
This example of tailwind date and time picker allows to select a pre-set range of dates.
January / 2023
february / 2023
|
Mo |
Tu |
We |
Th |
Fr |
Sa |
Su |
|
26 |
27 |
28 |
29 |
30 |
31 |
1 |
|
2 |
3 |
4 |
5 |
6 |
7 |
8 |
|
9 |
10 |
11 |
12 |
13 |
14 |
15 |
|
16 |
17 |
18 |
19 |
20 |
21 |
22 |
|
23 |
24 |
25 |
26 |
27 |
28 |
29 |
|
30 |
31 |
1 |
2 |
3 |
4 |
5 |
|
Mo |
Tu |
We |
Th |
Fr |
Sa |
Su |
|
30 |
31 |
1 |
2 |
3 |
4 |
5 |
|
6 |
7 |
8 |
9 |
10 |
11 |
12 |
|
13 |
14 |
15 |
16 |
17 |
18 |
19 |
|
20 |
21 |
22 |
23 |
24 |
25 |
26 |
|
27 |
28 |
1 |
2 |
3 |
4 |
5 |
|
6 |
7 |
8 |
9 |
10 |
11 |
12 |
26.01.2023 - 07.02.2023
<div class="w-fullw-full max-w-xs lg:max-w-2xl mx-auto p-4 rounded-2xl border border-gray-300">
<div class="flex items-center justify-between gap-2 pb-2 border-b border-gray-300">
<div
class="flex items-center gap-8 py-0.5 px-0.5 text-xs font-medium text-gray-900 ">
<button
class="text-gray-900 p-2 rounded-md transition-all duration-500 hover:bg-indigo-100 hover:text-indigo-600">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="none">
<path d="M10.0002 11.9999L6 7.99978L10.0025 3.99725" stroke="currentcolor"
stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
January / 2023
</div>
<div
class="flex items-center gap-8 py-0.5 px-0.5 text-xs font-medium text-gray-900 ">
<button
class="text-gray-900 p-2 rounded-md transition-all duration-500 hover:bg-indigo-100 hover:text-indigo-600">
</button>
february / 2023
<button
class="text-gray-900 p-2 rounded-md transition-all duration-500 hover:bg-indigo-100 hover:text-indigo-600">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="none">
<path d="M6.00236 3.99707L10.0025 7.99723L6 11.9998" stroke="currentcolor"
stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>
<div class="flex items-center flex-col lg:flex-row gap-6 border-b border-gray-300 justify-between">
<table class="pb-3 w-max ">
<thead class="mb-2">
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Mo</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Tu</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
We</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Th</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Fr</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Sa</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Su</p>
</td>
</tr>
</thead>
<tbody class="">
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
26</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
27</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
28</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
29</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
30</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
31</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
6</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
7</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
8</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
9</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
10</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
11</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
12</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-l-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
13</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
14</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
15</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10 rounded-l-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
16</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
17</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
18</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
19</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
20</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
21</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
22</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
23</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
24</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
25</p>
</td>
<td class="flex items-center justify-center bg-gray-100 rounded-l-full w-10 h-10">
<p
class="text-sm font-medium text-white bg-indigo-600 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
26</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gray-100">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
27</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gray-100">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
28</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gray-100 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
29</p>
</td>
</tr>
<tr class="flex pb-3">
<td class="flex items-center justify-center w-10 h-10 bg-gray-100 rounded-l-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
30</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gray-100">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
31</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gradient-to-r from-gray-100 to-white">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
</tr>
</tbody>
</table>
<div class="w-px relative lg:h-80 bg-gray-300"></div>
<table class="pb-3 w-max ">
<thead class="mb-2">
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Mo</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Tu</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
We</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Th</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Fr</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Sa</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Su</p>
</td>
</tr>
</thead>
<tbody class="">
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
30</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gradient-to-r from-white to-gray-100">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
31</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gray-100">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gray-100">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gray-100">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gray-100 ">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gray-100 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10 bg-gray-100 rounded-l-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
6</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gray-100 rounded-r-full">
<p
class="text-sm font-medium text-white bg-indigo-600 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
7</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
8</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
9</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
10</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
11</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
12</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
13</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
14</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
15</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
16</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-l-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
17</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
18</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
19</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10 rounded-l-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
20</p>
</td>
<td class="flex items-center justify-center w-10 h-10 ">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
21</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
22</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
23</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
24</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
25</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
26</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
27</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
28</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
</tr>
<tr class="flex pb-3">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
6</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
7</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
8</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
9</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
10</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
11</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
12</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex items-center justify-end pt-3 gap-4">
<span class="text-xs font-normal text-gray-800">26.01.2023 - 07.02.2023</span>
<button class="py-2 px-3 rounded-md border border-gray-300 text-xs font-medium text-gray-900 transition-all duration-500 hover:text-indigo-600 hover:bg-indigo-100">Cancel</button>
<button class="py-2 px-3 rounded-md text-xs font-medium bg-indigo-600 text-white transition-all duration-500 hover:bg-indigo-700">Apply</button>
</div>
</div>
Range With tailwind date time picker
Use below modern layout of datepicker which allows you to select dates between start and end dates and also time.
January / 2023
february / 2023
|
Mo |
Tu |
We |
Th |
Fr |
Sa |
Su |
|
26 |
27 |
28 |
29 |
30 |
31 |
1 |
|
2 |
3 |
4 |
5 |
6 |
7 |
8 |
|
9 |
10 |
11 |
12 |
13 |
14 |
15 |
|
16 |
17 |
18 |
19 |
20 |
21 |
22 |
|
23 |
24 |
25 |
26 |
27 |
28 |
29 |
|
30 |
31 |
1 |
2 |
3 |
4 |
5 |
|
Mo |
Tu |
We |
Th |
Fr |
Sa |
Su |
|
30 |
31 |
1 |
2 |
3 |
4 |
5 |
|
6 |
7 |
8 |
9 |
10 |
11 |
12 |
|
13 |
14 |
15 |
16 |
17 |
18 |
19 |
|
20 |
21 |
22 |
23 |
24 |
25 |
26 |
|
27 |
28 |
1 |
2 |
3 |
4 |
5 |
|
6 |
7 |
8 |
9 |
10 |
11 |
12 |
:
:
26.01.2023 - 07.02.2023
<div class="w-full max-w-xs lg:max-w-2xl mx-auto p-4 border border-gray-300 rounded-2xl">
<div class="flex items-center justify-between gap-2 pb-2 border-b border-gray-300">
<div
class="flex items-center gap-8 py-0.5 px-0.5 text-xs font-medium text-gray-900 ">
<button
class="text-gray-900 p-2 rounded-md transition-all duration-500 hover:bg-indigo-100 hover:text-indigo-600">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="none">
<path d="M10.0002 11.9999L6 7.99978L10.0025 3.99725" stroke="currentcolor"
stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
January / 2023
</div>
<div
class="flex items-center gap-8 py-0.5 px-0.5 text-xs font-medium text-gray-900 ">
<button
class="text-gray-900 p-2 rounded-md transition-all duration-500 hover:bg-indigo-100 hover:text-indigo-600">
</button>
february / 2023
<button
class="text-gray-900 p-2 rounded-md transition-all duration-500 hover:bg-indigo-100 hover:text-indigo-600">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="none">
<path d="M6.00236 3.99707L10.0025 7.99723L6 11.9998" stroke="currentcolor"
stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>
<div class="flex items-center flex-col lg:flex-row gap-6 border-b border-gray-300 justify-between">
<table class="pb-3 w-max ">
<thead class="mb-2">
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Mo</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Tu</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
We</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Th</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Fr</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Sa</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Su</p>
</td>
</tr>
</thead>
<tbody class="">
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
26</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
27</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
28</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
29</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
30</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
31</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
6</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
7</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
8</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
9</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
10</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
11</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
12</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-l-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
13</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
14</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
15</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10 rounded-l-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
16</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
17</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
18</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
19</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
20</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
21</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
22</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
23</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
24</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
25</p>
</td>
<td class="flex items-center justify-center bg-gray-100 rounded-l-full w-10 h-10">
<p
class="text-sm font-medium text-white bg-indigo-600 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
26</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gray-100">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
27</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gray-100">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
28</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gray-100 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
29</p>
</td>
</tr>
<tr class="flex pb-3">
<td class="flex items-center justify-center w-10 h-10 bg-gray-100 rounded-l-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
30</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gray-100">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
31</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gradient-to-r from-gray-100 to-white">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
</tr>
</tbody>
</table>
<div class="w-px relative lg:h-80 bg-gray-300"></div>
<table class="pb-3 w-max ">
<thead class="mb-2">
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Mo</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Tu</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
We</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Th</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Fr</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Sa</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Su</p>
</td>
</tr>
</thead>
<tbody class="">
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
30</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gradient-to-r from-white to-gray-100">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
31</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gray-100">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gray-100">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gray-100">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gray-100 ">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gray-100 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10 bg-gray-100 rounded-l-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
6</p>
</td>
<td class="flex items-center justify-center w-10 h-10 bg-gray-100 rounded-r-full">
<p
class="text-sm font-medium text-white bg-indigo-600 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
7</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
8</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
9</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
10</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
11</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
12</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
13</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
14</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
15</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
16</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-l-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
17</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
18</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
19</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10 rounded-l-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
20</p>
</td>
<td class="flex items-center justify-center w-10 h-10 ">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
21</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
22</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
23</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
24</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
25</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
26</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
27</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
28</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
</tr>
<tr class="flex pb-3">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
6</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
7</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
8</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
9</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
10</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
11</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
12</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex items-center justify-between border-b border-gray-300">
<div class="flex items-center justify-center py-3 gap-3">
<select id="hour" class="h-auto border border-gray-300 text-gray-600 text-base rounded-lg block w-14 py-1.5 px-2 focus:outline-none">
<option value="0-">00</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option selected="12">12</option>
</select>
<span class="text-xl font-semibold text-gray-900">:</span>
<select id="minute" class="h-auto border border-gray-300 text-gray-600 text-base rounded-lg block w-14 py-1.5 px-2 focus:outline-none">
<option selected="0-">00</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
<select id="zone" class="h-auto border border-gray-300 text-gray-600 text-base rounded-lg block w-16 py-1.5 px-2 focus:outline-none">
<option value="AM">AM</option>
<option selected="PM">PM</option>
</select>
</div>
<div class="flex items-center justify-center py-3 gap-3">
<select id="hour" class="h-auto border border-gray-300 text-gray-600 text-base rounded-lg block w-14 py-1.5 px-2 focus:outline-none">
<option value="0-">00</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option selected="12">12</option>
</select>
<span class="text-xl font-semibold text-gray-900">:</span>
<select id="minute" class="h-auto border border-gray-300 text-gray-600 text-base rounded-lg block w-14 py-1.5 px-2 focus:outline-none">
<option selected="0">00</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
<select id="zone" class="h-auto border border-gray-300 text-gray-600 text-base rounded-lg block w-16 py-1.5 px-2 focus:outline-none">
<option value="AM">AM</option>
<option selected="PM">PM</option>
</select>
</div>
</div>
<div class="flex items-center justify-end pt-3 gap-4">
<span class="text-xs font-normal text-gray-800">26.01.2023 - 07.02.2023</span>
<button class="py-2 px-3 rounded-md border border-gray-300 text-xs font-medium text-gray-900 transition-all duration-500 hover:text-indigo-600 hover:bg-indigo-100">Cancel</button>
<button class="py-2 px-3 rounded-md text-xs font-medium bg-indigo-600 text-white transition-all duration-500 hover:bg-indigo-700">Apply</button>
</div>
</div>
Datepicker With date-range list
Use following example to show list of option above datepicker. you can add various options like this month, today, yesterday and many more.
|
Mo |
Tu |
We |
Th |
Fr |
Sa |
Su |
|
26 |
27 |
28 |
29 |
30 |
31 |
1 |
|
2 |
3 |
4 |
5 |
6 |
7 |
8 |
|
9 |
10 |
11 |
12 |
13 |
14 |
15 |
|
16 |
17 |
18 |
19 |
20 |
21 |
22 |
|
23 |
24 |
25 |
26 |
27 |
28 |
29 |
|
30 |
31 |
1 |
2 |
3 |
4 |
5 |
|
Mo |
Tu |
We |
Th |
Fr |
Sa |
Su |
|
30 |
31 |
1 |
2 |
3 |
4 |
5 |
|
6 |
7 |
8 |
9 |
10 |
11 |
12 |
|
13 |
14 |
15 |
16 |
17 |
18 |
19 |
|
20 |
21 |
22 |
23 |
24 |
25 |
26 |
|
27 |
28 |
1 |
2 |
3 |
4 |
5 |
|
6 |
7 |
8 |
9 |
10 |
11 |
12 |
<div class="w-full max-w-xs lg:max-w-2xl mx-auto border border-gray-300 rounded-2xl p-4">
<div class="flex items-center justify-center gap-2 pb-2 border-b border-gray-300">
<ul class="flex items-center gap-3 w-full max-w-2xl overflow-x-auto">
<li><button class="text-xs font-medium tegr600 py-2 px-4 rounded-md whitespace-nowrap border border-gray-300 transition-all duration-300 hover:bg-gray-100 hover:border-gray-500">Today</button></li>
<li><button class="text-xs font-medium tegr600 py-2 px-4 rounded-md whitespace-nowrap border border-gray-300 transition-all duration-300 hover:bg-gray-100 hover:border-gray-500">Yesterday</button></li>
<li><button class="text-xs font-medium tegr600 py-2 px-4 rounded-md whitespace-nowrap border border-gray-300 transition-all duration-300 hover:bg-gray-100 hover:border-gray-500">Last 7 days</button></li>
<li><button class="text-xs font-medium tegr600 py-2 px-4 rounded-md whitespace-nowrap border border-gray-300 transition-all duration-300 hover:bg-gray-100 hover:border-gray-500">Last 30 days</button></li>
<li><button class="text-xs font-medium tegr600 py-2 px-4 rounded-md whitespace-nowrap border border-gray-300 transition-all duration-300 hover:bg-gray-100 hover:border-gray-500">This Month</button></li>
<li><button class="text-xs font-medium tegr600 py-2 px-4 rounded-md whitespace-nowrap border border-gray-300 transition-all duration-300 hover:bg-gray-100 hover:border-gray-500">Last month</button></li>
<li><button class="text-xs font-medium tegr600 py-2 px-4 rounded-md whitespace-nowrap border border-gray-300 transition-all duration-300 hover:bg-gray-100 hover:border-gray-500">Custom Range</button></li>
</ul>
</div>
<div class="flex items-center flex-col lg:flex-row gap-6 border-b border-gray-300 justify-between">
<table class="pb-3 w-max ">
<thead class="mb-2">
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Mo</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Tu</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
We</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Th</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Fr</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Sa</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Su</p>
</td>
</tr>
</thead>
<tbody class="">
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
26</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
27</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
28</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
29</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
30</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
31</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
6</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
7</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
8</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
9</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
10</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
11</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
12</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-l-full">
<p
class="text-sm font-medium text-white bg-indigo-600 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
13</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
14</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
15</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10 rounded-l-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
16</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
17</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
18</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
19</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
20</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
21</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
22</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
23</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
24</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
25</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
26</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
27</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
28</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
29</p>
</td>
</tr>
<tr class="flex pb-3">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
30</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
31</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
</tr>
</tbody>
</table>
<div class="w-px relative lg:h-80 bg-gray-300"></div>
<table class="pb-3 w-max ">
<thead class="mb-2">
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Mo</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Tu</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
We</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Th</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Fr</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Sa</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
Su</p>
</td>
</tr>
</thead>
<tbody class="">
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
30</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
31</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
6</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
7</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
8</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
9</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
10</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
11</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
12</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
13</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
14</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
15</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
16</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-l-full">
<p
class="text-sm font-medium text-white bg-indigo-600 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
17</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
18</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
19</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10 rounded-l-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
20</p>
</td>
<td class="flex items-center justify-center w-10 h-10 ">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
21</p>
</td>
<td class="flex items-center justify-center w-10 h-10 rounded-r-full">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
22</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
23</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
24</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
25</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
26</p>
</td>
</tr>
<tr class="flex">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
27</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-900 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
28</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
1</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
2</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
3</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
4</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
5</p>
</td>
</tr>
<tr class="flex pb-3">
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
6</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
7</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
8</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
9</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
10</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
11</p>
</td>
<td class="flex items-center justify-center w-10 h-10">
<p
class="text-sm font-medium text-gray-300 rounded-full flex items-center justify-center w-full h-full transition-all duration-300 hover:bg-indigo-100 hover:text-indigo-600">
12</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex items-center justify-end pt-3 gap-4">
<button class="py-2 px-3 rounded-md border border-gray-300 text-xs font-medium text-gray-900 transition-all duration-500 hover:text-indigo-600 hover:bg-indigo-100">Cancel</button>
<button class="py-2 px-3 rounded-md text-xs font-medium bg-indigo-600 text-white transition-all duration-500 hover:bg-indigo-700">Apply</button>
</div>
</div>