JSFiddle - React, Tailwind, and code Playground

by elneco

HTML

<script>
    function calc(form){
    var firstNumber = parseFloat(form.num1.value,"");
    var secondNumber = parseFloat(form.num2.value,"");
    var theTotal;
    
    theTotal = firstNumber * secondNumber;
    form.answer.value = parseInt(theTotal);
    }
</script>

<div class="shadow mydiv mydiv-hz-1">
                   
 <p>
   <form> 
       <input name="num1" size="10" value=""/> x <input name="num2" size="10" value=""/> 
       <INPUT NAME="go" VALUE=" = " TYPE="BUTTON" onClick="calc(this.form)"/> 
    <input name="answer" size="10"/> 
    </form>
    </p>  
</div>

<!-- @iamelneco -->

CSS

.shadow {
            position:relative;
            width:40%;    
            padding:1em 2em; 
            margin:1.5em auto; text-align:center;
            background:#3dc;
            box-shadow:0 1px 80px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.2) inset;
            -webkit-transition:all 0.3s;
        }
.shadow:hover {background:#1fc; padding:1em;}

.shadow:before,
        .shadow:after {
            content:"";
            position:absolute; 
            z-index:-1;
        }

.mydiv:before {
            top:10px;
            bottom:10px;
            left:0px;
            right:50%;
            box-shadow:0 0 20px rgba(20,60,3,1);
            border-radius:5px / 50px;
        }

.mydiv-hz-1:before {
            top:20px;
            bottom:0px; background:rgba(20,60,3,0.5);
            left:10px;
            right:10px;
            border-radius:600px / 100px;

        }