JSFiddle - React, Tailwind, and code Playground

by lborgman

HTML

<p>Test Test Test</p>
<div class="myDiv1">
    <div class="myDiv2">I am a div</div>
    <button class="myDiv2">I am a button</button>
</div>

CSS

.myDiv1 {
    float:left;
    width:200px;
}

.myDiv1 p {
    background:#f0f0f0;
}

.myDiv2 {
    animation-delay: 0s;
    animation-direction: normal;
    animation-duration: 0.65s;
    animation-fill-mode: none;
    animation-iteration-count: 1;
    animation-name: click-wave;
    animation-play-state: running;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #CE742B;
    background-image: none;
    background-origin: padding-box;
    background-position: 0% 0%;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    box-sizing: border-box;
    color: #333;
    cursor: pointer;
    display: inline-block;
    float: none;
    font-family: RobotoDraft,"Helvetica Neue",Helvetica,Arial;
    font-size: 14px;
    font-weight: 400;
    height: 32px;
    line-height: 17px;
    margin-bottom: 0px;
    margin-left: 8px;
    margin-right: 0px;
    margin-top: 0px;
    min-width: 80px;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 0px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 0px;
    position: relative;
    text-align:right;
    width: 80px;
}