JSFiddle - React, Tailwind, and code Playground

by Vanessa RC

HTML

<svg width="478px" height="244px" viewBox="45 140 478 244" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
            <stop stop-color="#00CCF1" offset="0%"></stop>
            <stop stop-color="#007EB3" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
            <stop stop-color="#F0F0F0" offset="0%"></stop>
            <stop stop-color="#BFBFBF" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
            <stop stop-color="#00CCD2" offset="0%"></stop>
            <stop stop-color="#00A2B1" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
            <stop stop-color="#F21D1D" offset="0%"></stop>
            <stop stop-color="#AF001E" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="Graph-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(46.000000, 140.000000)">
        <g id="Lines-and-ovals" transform="translate(65.000000, 27.000000)">
            <path
              d="M202.625372,93.3521088 C195.57664,62.6663001 176.767139,36.4544911 151.181163,19.688489 C132.185533,7.24101467 109.45476,0 85.0285088,0" id="paypal" class="ovals" stroke="url(#linearGradient-1)"></path>
            <path d="M193.485934,93.4175481 C181.413262,44.8672251 137.433934,8.88120077 85.0285088,8.88120077" id="apple"  class="ovals" stroke="url(#linearGradient-2)"></path>
            <path d="M185.150163,96.8289817 C174.49532,51.5081204 133.712681,17.7624015 85.0285088,17.7624015" id="samsung"  class="ovals"...

CSS

html {
  height: 100%;
}

body {
  background-color: #fff;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

svg {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.ovals {
  stroke-linecap: round;
  stroke-linejoin: round;
  z-index: 2000;
  stroke-width: 9px;
  
  -webkit-animation: widthIn 2s none; /* Safari 4+ */
  -moz-animation:    widthIn 2s none; /* Fx 5+ */
  -o-animation:      widthIn 2s none; /* Opera 12+ */
  animation:         widthIn 2s none;
}

@-webkit-keyframes widthIn {
  0%   { stroke-width: 0; }
  100% { stroke-width: 9; }
}

@-moz-keyframes widthIn {
  0%   { stroke-width: 0; }
  100% { stroke-width: 9; }
}

@-o-keyframes widthIn {
  0%   { stroke-width: 0; }
  100% { stroke-width: 9; }
}

@keyframes widthIn {
  0%   { stroke-width: 0; }
  100% { stroke-width: 9; }
}

.ovals-hover {
  stroke-width: 14;
  color:#B6E7DA; 
  z-index: 4000;
}

JavaScript

$("#Paypal00").hover(function() {
   $("#paypal").addClass("ovals-hover")},
function() {
   $("#paypal").removeClass("ovals-hover")});