JSFiddle - React, Tailwind, and code Playground

by Katarina Countiss

HTML

<div class="container">
        <div id="screen">0</div>
        <div class="keys" id="night"><span>&#9733;</span></div>
        <div class="keys" id="day"><span>&#9728;</span></div>
        <div class="keys" id="sunset"><span>&#127751;</span></div>
        <div class="keys" id="rainbow"><span>&#127752;</span></div>
        <div class="keys numpad">7</div>
        <div class="keys numpad">8</div>
        <div class="keys numpad">9</div>
        <div class="keys operator">x</div>
        <div class="keys numpad">4</div>
        <div class="keys numpad">5</div>
        <div class="keys numpad">6</div>
        <div class="keys operator">+</div>
        <div class="keys numpad">1</div>
        <div class="keys numpad">2</div>
        <div class="keys numpad">3</div>
        <div class="keys operator">-</div>
        <div class="keys numpad">0</div>
        <div class="keys numpad">.</div>
        <div class="keys" id="clear">C</div>
        <div class="keys" id="equals">=</div>
    </div>
   <footer class="green">
        <p>Copyright &#169; <a href="file://file2/Coding%20Boot%20Camp/Cohort2/Kat_C/project_7/documents/index.html">Katarina Countiss, 2015</a></p>
    </footer>

CSS

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font: bold 18px Helvetica, Arial, sans-serif;
    background: #F1F1F1;
}
.container {
    background: #1E1E1E;
    border-radius: 10px;
    margin: 60px auto;
    overflow:hidden;
    padding: 10px;
    width: 200px;
}
.keys {
    background: -webkit-linear-gradient(#8D9194, #51585E);
    background: -moz-linear-gradient(#8D9194, #51585E);
    background: linear-gradient(#8D9194, #51585E);
    border: 1px solid #282828;
    border-radius: 50%;
    color: #F7F7F7;
    cursor: pointer;
    float:left;
    margin: 5px 0px;
    margin-right: 5px;
    padding: 10px 5px;
    text-align: center;
    width:40px;
}
.numpad {
    background: -webkit-linear-gradient(#4B4B4B, #1E1E1E);
    background: -moz-linear-gradient(#4B4B4B, #1E1E1E);
    background: linear-gradient(#4B4B4B, #1E1E1E);
    color: #F7F7F7;
}
.operator {
    color: #F7F7F7;
    background: -webkit-linear-gradient(#9B8E88, #645447);
    background: -moz-linear-gradient(#9B8E88, #645447);
    background: linear-gradient(#9B8E88, #645447);
}
#screen {
    background: #D4DAB6;
    border: 1px solid #282828;
    border-radius: 5px;
    font-size: 27px;
    line-height: 36px;
    margin: 10px auto;
    padding-right: 10px;
    text-align: right;
}
#clear {
    color: #F7F7F7;
    background: -webkit-linear-gradient(#9B8E88, #645447);
    background: -moz-linear-gradient(#9B8E88, #645447);
    background: linear-gradient(#9B8E88, #645447);
}
#equals {
    background: -webkit-linear-gradient(#FCB577, #F37C18);
    background: -moz-linear-gradient(#FCB577, #F37C18);
    background: linear-gradient(#FCB577, #F37C18);
}
.keys:hover, #clear:hover, #equals:hover {
    background: #fff;
    color: #648880;
}
span{
 font-size: 15px;
background-color:transparent;
}

footer{
text-align: center;

position: absolute;
bottom: 2px;
}

footer p{
font-size: 10px;
}

JavaScript

$('.keys').mouseenter(function() {
        $(this).fadeTo('slow', 1);
   
    });
    
      $('.keys').mouseleave(function() {
        $(this).fadeTo('slow', 0.1);
   
    });