Heeyeon Lee
<body class="bg-gray-100 font-sans leading-normal tracking-normal h-screen flex items-center justify-center"> <div class="bg-white shadow-lg rounded-lg p-8 max-w-md w-full"> <h1 class="text-2xl font-bold mb-6 text-center">Calendar</h1> <div class="flex justify-between items-center mb-4"> <button class="text-gray-700 hover:text-gray-900"> <i class="iconoir-arrow-left text-2xl"></i> </button> <span class="text-xl font-bold">October 2023</span> <button class="text-gray-700 hover:text-gray-900"> <i class="iconoir-arrow-right text-2xl"></i> </button> </div> <div class="grid grid-cols-7 gap-4 text-center"> <div class="font-bold">Sun</div> <div class="font-bold">Mon</div> <div class="font-bold">Tue</div> <div class="font-bold">Wed</div> <div class="font-bold">Thu</div> <div class="font-bold">Fri</div> <div class="font-bold">Sat</div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">1</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 1: This is a sample note for the first day of the month.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">2</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 2: Another sample note for the second day.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">3</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 3: This is a note for the third day of the month.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">4</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 4: Sample note for the fourth day.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">5</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 5: This is a note for the fifth day of the month.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">6</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 6: Another sample note for the sixth day.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">7</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 7: This is a note for the seventh day of the month.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">8</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 8: Sample note for the eighth day.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">9</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 9: This is a note for the ninth day of the month.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">10</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 10: Another sample note for the tenth day.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">11</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 11: This is a note for the eleventh day of the month.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">12</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 12: Sample note for the twelfth day.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">13</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 13: This is a note for the thirteenth day of the month.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">14</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 14: Another sample note for the fourteenth day.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">15</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 15: This is a note for the fifteenth day of the month.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">16</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 16: Sample note for the sixteenth day.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">17</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 17: This is a note for the seventeenth day of the month.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">18</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 18: Another sample note for the eighteenth day.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">19</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 19: This is a note for the nineteenth day of the month.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">20</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 20: Sample note for the twentieth day.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">21</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 21: This is a note for the twenty-first day of the month.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">22</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 22: Another sample note for the twenty-second day.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">23</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 23: This is a note for the twenty-third day of the month.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">24</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 24: Sample note for the twenty-fourth day.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">25</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 25: This is a note for the twenty-fifth day of the month.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">26</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 26: Another sample note for the twenty-sixth day.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">27</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 27: This is a note for the twenty-seventh day of the month.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">28</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 28: Sample note for the twenty-eighth day.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">29</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 29: This is a note for the twenty-ninth day of the month.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">30</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 30: Another sample note for the thirtieth day.</div> </div> <div class="text-gray-400 relative h-24"> <span class="absolute top-1 left-1">31</span> <div class="absolute top-6 left-0 right-0 text-xs text-gray-600 px-1">Note 31: This is a note for the thirty-first day of the month.</div> </div> </div> </div> </body>