JSFiddle - React, Tailwind, and code Playground

HTML

<svg></svg>

CSS

g.axis line, g.axis path {
    fill:none;
    stroke:royalblue;
    shape-rendering:crispEdges;
}
g.axis text{
    fill:royalblue;
    font-family:sans-serif;
}
g.axis path {
    stroke-width:2;
    stroke:seagreen;
}

JavaScript

(function () {
    //Set up SVG and axis//   
    var svg = d3.select("svg");

    var width = window.getComputedStyle(svg[0][0])["width"];
        width = parseFloat(width);
    var height = window.getComputedStyle(svg[0][0])["height"];
        height = parseFloat(height);
    var margin = 50;

    var scale = d3.scale.linear()
        .domain([0, 1])
        .range([0, height - 2*margin]);

    var formatPercent = d3.format(".0%");

    var axis = d3.svg.axis()
        .scale(scale)
        .orient("right")
        .ticks(10)
        .tickFormat(formatPercent);

    svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + [margin, margin]+")")
        .call(axis);

    d3.selectAll("g.y.axis g.tick line")
    .attr("x2", function(d){
        //d for the tick line is the value
        //of that tick 
        //(a number between 0 and 1, in this case)
       if ( (10*d)%2 ) //if it's an even multiple of 10%
           return 10;
       else
           return 4;
    });

})();