Html
copy
reset
Run
Netbax Online Editor Try it Yourself
<center><time datetime="2024-06-25" class="bax"> <em>2024</em> <strong>June</strong> <span>25</span><p> </center> </time> <br> <style> time.bax { font-size: 1.5em; display: block; position: relative; width: 7em; height: 7em; background-color: #fff; border-radius: 0.6em; box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd; overflow: hidden; } time.bax * { display: block; width: 100%; font-size: 1em; font-weight: bold; font-style: normal; text-align: center; } time.bax strong { position: absolute; top: 0; padding: 0.7em 0; color: #fff; background-color: #fd9f1b; border-bottom: 1px dashed #f37302; box-shadow: 0 2px 0 #fd9f1b; } time.bax em { position: absolute; bottom: 0.3em; color: #fd9f1b; } time.bax span { font-size: 2.8em; letter-spacing: -0.05em; padding-top: 0.9em; color: #2f2f2f; } </style>
