JSFiddle - React, Tailwind, and code Playground

by Vanessa RC

HTML

<script src="&lt;link href=&quot;//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css&quot; rel=&quot;stylesheet&quot;&gt;"></script>
<button type="button" class='hp' ><i class="fa fa-check"></i> Send </button> 

<button type="button" class="parents"> Save </button>

<button type="button" class="cancel"> Cancel action </button>

<button type="button" class="create"> Create eRedbook </button>

<i class="fa fa-camera-retro fa-lg"></i>

SCSS

.icon{
    color:#000;
    font-size: 12px;
}

/* for parents, with right colors and dimensions */
.parents{
    margin:15px;
    display:block
    font-family:'Open Sans', sans-serif;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    background-color: #00b4ed;
    color:#fff;
    font-weight: 300;
    padding: 5px 20px;
}

/* for hp, with right colors and dimensions */
.hp{
    margin:15px;
    display:block;
    font-family:'Open Sans', sans-serif;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    background-color: #9cce58;
    color:#fff;
    font-weight: 400;
    padding: 5px 20px;
}

/* for cancel, with right colors and dimensions */
.cancel{
    margin:15px;
    display:block;
    font-family:'Open Sans', sans-serif;
    font-size: 14px;
    border: 2px solid #ccc;
    border-radius: 2px;
    background-color: #fffb77;
    color:#888;
    font-weight: 400;
    padding: 5px 20px; 
}

.create{
    margin:15px;
    display:block;
    font-family:'Open Sans', sans-serif;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    background-color: #e82d40;
    color:#fff;
    font-weight: 400;
    padding: 5px 20px; 
}