JSFiddle - React, Tailwind, and code Playground

by Jonathan Sampson

HTML

<p>Click on today's door:</p>
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
<div>07</div>
<div>08</div>
<div>09</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>
<div>24</div>
<div>25</div>
<div>26</div>
<div>27</div>
<div>28</div>
<div>29</div>
<div>30</div>

CSS

div {
    color: #fff;
    text-align: center;
    line-height: 3em;
    display: inline-block;
    height: 3em; width: 2em;
    background-color: black;
    margin-right: .25em;
    margin-bottom: .5em;
    transform-origin: 0 0;
    transition: transform 1s;
}

.open {
    transform: perspective(300px) rotateY(-120deg);
}

JavaScript

(function () {
   
    "use strict";
    
    var day = (new Date).getDate(),
        doors = document.querySelectorAll( "div" );
    
    doors.item( --day ).addEventListener( "click", function openDoor () {
        this.classList.toggle( "open" );
    });
    
}());