JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<div class="zoom_controls">
    <a class="profile" id="prof_d" href="#" data-chart="line" data-range="1m">Current</a>
    <a class="profile" id="prof_w"href="#" data-chart="line" data-range="3m">Weekly</a>
    <a class="profile" id="prof_m" href="#" data-chart="line" data-range="6m">Monthly</a>
    <a class="profile" id="prof_d"href="#" data-chart="line" data-range="All">Forecast</a>
</div>

CSS

.zoom_controls a {
                      display: block;
                      width: 80px;
                      height: 16px;
                      line-height: 16px;
                      margin-top: 3px;
                      padding: 2px;
                      float: left;
                      text-decoration: none;
                      color: black !important;
                      text-align: center;
                      border: 1px #CCC inset;
                      background-color: #aaa;
                      /* Should look a lot like the original :) */
                      background-image: linear-gradient(bottom, rgb(214,214,214) 34%, rgb(232,232,232) 100%);
                      background-image: -o-linear-gradient(bottom, rgb(214,214,214) 34%, rgb(232,232,232) 100%);
                      background-image: -moz-linear-gradient(bottom, rgb(214,214,214) 34%, rgb(232,232,232) 100%);
                      background-image: -webkit-linear-gradient(bottom, rgb(214,214,214) 34%, rgb(232,232,232) 100%);
                      background-image: -ms-linear-gradient(bottom, rgb(214,214,214) 34%, rgb(232,232,232) 100%);
                    }
                    .zoom_controls a:hover {
                      background-color: #a6d1ff;
                      background-image: linear-gradient(bottom, rgb(118,175,201) 34%, rgb(166,209,255) 100%);
                      background-image: -o-linear-gradient(bottom, rgb(118,175,201) 34%, rgb(166,209,255) 100%);
                      background-image: -moz-linear-gradient(bottom, rgb(118,175,201) 34%, rgb(166,209,255) 100%);
                      background-image: -webkit-linear-gradient(bottom, rgb(118,175,201) 34%, rgb(166,209,255) 100%);
                      background-image: -ms-linear-gradient(bottom, rgb(118,175,201) 34%, rgb(166,209,255) 100%);
                    }