JSFiddle - React, Tailwind, and code Playground

by second9040

HTML

<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">
     
    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>
  </head> 
  
  <body> 
   
      
      <table>
      <caption>2019 May</caption>
        <tr>
          <th id="weekend">Sunday</th>
          <th>Monday</th>
          <th>Tuesday</th>
          <th>Wednesday</th>
          <th>Thursday</th>
          <th>Friday</th>
          <th id="weekend">Saturday</th>
        </tr>
        
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td id="holiday">1</td>
          <td>2</td>
          <td>3</td>
          <td id="weekend">4</td>
        </tr>
        
        <tr>
          <td id="weekend">5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>10</td>
          <td id="weekend">11</td>
        </tr>
        
        
        <tr>
          <td id="weekend">12</td>
          <td>13</td>
          <td>14</td>
          <td>15</td>
          <td>16</td>
          <td>17</td>
          <td id="weekend">18</td>
        </tr>
        
        
        <tr>
          <td id="weekend">19</td>
          <td>20</td>
          <td>21</td>
          <td>22</td>
          <td>23</td>
          <td>24</td>
          <td id="weekend">25</td>
        </tr>
        
        
        <tr>
          <td id="weekend">26</td>
          <td>27</td>
          <td>28</td>
          <td>29</td>
          <td>30</td>
          <td>31</td>
          <td id="weekend"></td>
        </tr>
      </table>
  
  </body>
  
  </html>

CSS

caption {
  text-align: center;
  color: black;
  border: solid 5px #CCBBFF;
}

table,th,td {
    border: solid 3px #CCBBFF;
    border-collapse: collapse;
    text-align: center;
    padding: 3px;
 }

#weekend {
  color: red;
}

table ,tr {
  border: solid 5px #CCBBFF;
}

#holiday {
  color: red;
  background: #FFB7DD;
}