JSFiddle - React, Tailwind, and code Playground

by Caleb Wong

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<div class="month">November</div>

CSS

body {
    padding: 10px;
}
.month { 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8db7d2), color-stop(4%,#4e8eb6), color-stop(28%,#3c7faa), color-stop(48%,#3477a1), color-stop(100%,#2d6a91)); 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    border: 1px solid #2c6990; 
    color: #fff; 
    display: inline-block; font-weight: normal; 
    height: 25px; 
    letter-spacing: 1px; 
    line-height: 25px; 
    text-align: center; 
    text-shadow: 0 -1px 1px #333; 
    text-transform: uppercase; 
    width: 100%; 
    -webkit-transform: translate3d(0,0,0);
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    // does nothing at the moment
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    // does nothing at the moment
}