JSFiddle - React, Tailwind, and code Playground

by jasonkylefrank

HTML

<h3>CSS Shadows</h3>

<div id="wrapper">
<span id="AddTravelRequestSpan"  >

    <label class="Attr-CursorPointer Attr-VerticalAlignTop">Add Travel Request</label>
                
</span>
</div>

<div id="wrapper2">
<span id="AddTravelRequestSpan2"  >

    <label class="Attr-CursorPointer Attr-VerticalAlignTop">Add Travel Request</label>
                
</span>
</div>

CSS

#AddTravelRequestSpan {
    border-radius: 3px;
    padding: 2px;
    padding-right: 3px;
    margin: 8px;
}

#AddTravelRequestSpan:hover {
    /* box-shadow: inset 2px 3px 5px #444, 1px 1px 1px #aaa; */
    box-shadow: inset 2px 3px 5px #115b74, 1px 1px 1px #6ebcd7;
    background-color: #0790be;
}
#wrapper {
    background: #0099CC;
    padding: 8px;
}

#AddTravelRequestSpan2 {
    border-radius: 3px;
    padding: 2px;
    padding-right: 3px;
    margin: 8px;
}

#AddTravelRequestSpan2:hover {
    /*
    -moz-box-shadow:    .5px 1.5px 5px 0px #555;
    -webkit-box-shadow: .5px 1.5px 5px 0px #555;*/
    box-shadow:         .5px 1.5px 5px 0px #176883;
}
#wrapper2 {
    background: #0099CC;
    padding: 8px;
}