Calender UI Design Using Tailwind UI
Elevate your scheduling experience with a sleek Calendar UI crafted using Tailwind CSS.
other
Loading component...
102 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
.body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<div class="bg-gray-100 min-h-screen flex items-center justify-center">
<div class="bg-white rounded-lg shadow p-4 sm:p-6 mx-4">
<div class="flex justify-around items-center mb-4">
<button class="p-2 sm:p-4 border rounded-lg hover:bg-gray-200">
<svg class="w-4 h-4 sm:w-5 sm:h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M4.83594 12.0001L11.043 18.2072L12.4573 16.793L7.66436 12.0001L12.4573 7.20718L11.043 5.79297L4.83594 12.0001ZM10.4858 12.0001L16.6929 18.2072L18.1072 16.793L13.3143 12.0001L18.1072 7.20718L16.6929 5.79297L10.4858 12.0001Z">
</path>
</svg>
</button>
<button class="p-2 sm:p-4 border rounded-lg hover:bg-gray-200">
<svg class="w-4 h-4 sm:w-5 sm:h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z">
</path>
</svg>
</button>
<div class="text-base font-semibold">August 2023</div>
<button class="p-2 sm:p-4 border rounded-lg hover:bg-gray-200">
<svg class="w-4 h-4 sm:w-5 sm:h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M13.1714 12.0007L8.22168 7.05093L9.63589 5.63672L15.9999 12.0007L9.63589 18.3646L8.22168 16.9504L13.1714 12.0007Z">
</path>
</svg>
</button>
<button class="p-2 sm:p-4 border rounded-lg hover:bg-gray-200">
<svg class="w-4 h-4 sm:w-5 sm:h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M19.1643 12.0001L12.9572 5.79297L11.543 7.20718L16.3359 12.0001L11.543 16.793L12.9572 18.2072L19.1643 12.0001ZM13.5144 12.0001L7.30728 5.79297L5.89307 7.20718L10.686 12.0001L5.89307 16.793L7.30728 18.2072L13.5144 12.0001Z">
</path>
</svg>
</button>
</div>
<div class="grid grid-cols-7 gap-2">
<div class="text-center text-gray-500">Su</div>
<div class="text-center text-gray-500">Mo</div>
<div class="text-center text-gray-500">Tu</div>
<div class="text-center text-gray-500">We</div>
<div class="text-center text-gray-500">Th</div>
<div class="text-center text-gray-500">Fr</div>
<div class="text-center text-gray-500">Sa</div>
<!-- Calendar days -->
<div class="text-center text-gray-500 p-2 sm:p-4 hover:bg-gray-500 hover:text-white rounded-md">-</div>
<div class="text-center text-gray-500 p-2 sm:p-4 hover:bg-gray-500 hover:text-white rounded-md">-</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">1</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">2</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">3</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">4</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">5</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">6</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">7</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">8</div>
<div
class="text-center text-white bg-gray-900 p-2 sm:p-4 hover:bg-white hover:text-gray-900 rounded-md hover:border border-gray-500">
9</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">10</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">11</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">12</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">13</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">14</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">15</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">16</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">17</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">18</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">19</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">20</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">21</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">22</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">23</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">24</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">25</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">26</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">27</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">28</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">29</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">30</div>
<div class="text-center text-gray-700 p-2 sm:p-4 hover:bg-gray-900 hover:text-white rounded-md">31</div>
</div>
<div class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-2 justify-between mx-auto w-full mt-4">
<button
class="w-full py-2 px-5 border border-gray-700 text-gray-900 text-base rounded-lg hover:bg-gray-400 hover:border-0 hover:text-white">
Cancel
</button>
<button
class="w-full py-2 bg-gray-900 px-5 text-white text-base rounded-lg hover:bg-black">
Apply
</button>
</div>
</div>
</div>