JSFiddle - React, Tailwind, and code Playground

by Dyaa Eldin Moustafa

HTML

<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-ripple/paper-ripple.html">
  
  <section>
    <div class="button raised">
      <div class="center" fit>SUBMIT</div>
      <paper-ripple fit></paper-ripple>
    </div>
    
    <div class="button raised grey">
      <div class="center" fit>CANCEL</div>
      <paper-ripple fit></paper-ripple>
    </div>
    
    <div class="button raised blue">
      <div class="center" fit>COMPOSE</div>
      <paper-ripple fit></paper-ripple>
    </div>
    
    <div class="button raised green">
      <div class="center" fit>OK</div>
      <paper-ripple fit></paper-ripple>
    </div>
    
  </section>
  
  <section>
    
    <div class="button raised grey narrow">
      <div class="center" fit>+1</div>
      <paper-ripple fit></paper-ripple>
    </div>
    
    <div class="button raised grey narrow label-blue">
      <div class="center" fit>+1</div>
      <paper-ripple fit></paper-ripple>
    </div>
    
    <div class="button raised grey narrow label-red">
      <div class="center" fit>+1</div>
      <paper-ripple fit></paper-ripple>
    </div>
    
  </section>
  
  <section>
    
    <div class="icon-button">
      <core-icon icon="menu"></core-icon>
      <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
    </div>
    
    <div class="icon-button">
      <core-icon icon="more-vert"></core-icon>
      <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
    </div>
    
    <div class="icon-button red">
      <core-icon icon="delete"></core-icon>
      <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
    </div>
    
    <div class="icon-button blue">
      <core-icon icon="account-box"></core-icon>
      <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
    </div>
    
  </section>
  
  <section>
  
    <div class="fab red">
      <core-icon icon="add"></core-icon>
      <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
   ...

CSS

body {
    background-color: #f9f9f9;
    font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
}

section {
    padding: 30px 25px;
}

section > * {
    margin: 10px
}

/* Button */
.button {
    display: inline-block;
    position: relative;
    width: 120px;
    height: 32px;
    line-height: 32px;
    border-radius: 2px;
    font-size: 0.9em;
    background-color: #fff;
    color: #646464;
}

.button > paper-ripple {
    border-radius: 2px;
    overflow: hidden;
}

.button.narrow {
    width: 60px;
}

.button.grey {
    background-color: #eee;
}

.button.blue {
    background-color: #4285f4;
    color: #fff;
}

.button.green {
    background-color: #0f9d58;
    color: #fff;
}

.button.raised {
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.2s;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.button.raised:active {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
    transition-delay: 0s;
}

/* Icon Button */
.icon-button {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 56px;
}

.icon-button > core-icon {
    margin: 16px;
    transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-button:hover > core-icon {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.icon-button > paper-ripple {
    overflow: hidden;
    color: #646464;
}

.icon-button.red > core-icon::shadow path {
    fill: #db4437;
}

.icon-button.red > paper-ripple {
    color: #db4437;
}

.icon-button.blue > core-icon::shadow path {
    fill: #4285f4;
}

.icon-button.blue > paper-ripple {
    color: #4285f4;
}

/* FAB */
.fab {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
...