JSFiddle - React, Tailwind, and code Playground

by wllai2001

HTML

<div class="site site-1">
        <div class="rent-info">
            <div class="rent-info-title">1F 實驗劇場 Experimental Theater 出租狀況</div>  
            <div class="rent-info-time">A-10:00-14:00、B-14:00-18:00、C-18:00-22:00</div>
        </div>			
        
        <div class="calendar">				
            <div class="header">
                <button onclick="prevMonth(0,'')">&lt;&lt;上個月</button>
                <h2 class="month-year">2024年5月</h2>
                <button onclick="nextMonth(0,'')">下個月&gt;&gt;</button>
            </div>

            <div class="days">
                <div class="weekday">一</div>
                <div class="weekday">二</div>
                <div class="weekday">三</div>
                <div class="weekday">四</div>
                <div class="weekday">五</div>
                <div class="weekday">六</div>
                <div class="weekday">日</div>
            </div>

            <div class="days calendar-days"><div class="day 未出租"></div><div class="day 未出租"></div><div class="day 未出租"></div><div class="day 已出租">1<div class="room-status"><div class="room rented">A - 已出租</div><div class="room available">B - 未出租</div><div class="room rented">C - 已出租</div></div></div><div class="day 已出租">2<div class="room-status"><div class="room available">A - 未出租</div><div class="room rented">B - 已出租</div><div class="room available">C - 未出租</div></div></div><div class="day 已出租">3<div class="room-status"><div class="room available">A - 未出租</div><div class="room rented">B - 已出租</div><div class="room rented">C - 已出租</div></div></div><div class="day 未出租">4<div class="room-status"><div class="room available">A - 未出租</div><div class="room available">B - 未出租</div><div class="room available">C - 未出租</div></div></div><div class="day 未出租">5<div class="room-status"><div class="room available">A - 未出租</div><div class="room available">B - 未出租</div><div class="room available">C - 未出租</div></div></div><div class="day 未出租">6<div class="room-status"><div class="room...

CSS

/* 整體容器的樣式 */
.site {
    font-family: 'Times New Roman', Times, serif;
    background-color: antiquewhite; /* 古典色調的背景 */
    border: 2px solid #ccc; /* 濃厚的邊框 */
    border-radius: 10px; /* 圓角 */
    padding: 20px; /* 邊距 */
}

/* 租賃信息的樣式 */
.rent-info {
    margin-bottom: 20px;
}

.rent-info-title {
    font-size: 20px;
    font-weight: bold;
}

.rent-info-time {
    font-size: 16px;
}

/* 月曆容器的樣式 */
.calendar {
    border: 2px solid #ccc; /* 濃厚的邊框 */
    border-radius: 10px; /* 圓角 */
    padding: 20px; /* 邊距 */
}

/* 標題的樣式 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header button {
    background-color: #f4f4f4;
    border: 1px solid #ccc;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.month-year {
    font-size: 24px;
}

/* 星期幾的樣式 */
.weekday {
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    padding: 10px;
    background-color: #f4f4f4;
}

/* 日的樣式 */
.day {
    font-size: 16px;
    text-align: center;
    padding: 10px;
    border: 1px solid #ccc;
}

.day.已出租 {
    background-color: #ffd1dc; /* 已出租的背景色 */
}

/* 房間狀態的樣式 */
.room-status {
    margin-top: 5px;
}

.room {
    margin: 2px;
    padding: 2px 5px;
    border-radius: 5px;
}

.room.rented {
    background-color: #ff6961; /* 已出租的房間背景色 */
}

.room.available {
    background-color: #77dd77; /* 未出租的房間背景色 */
}