JSFiddle - React, Tailwind, and code Playground

by jitendravyas

HTML

<figure>
        <span class="percent"><img alt="" src="http://i.imgur.com/9cfK5.png"/><span class="rotate">20%</span></span><span class="jamna"><img alt="" src="http://www.firstiphonedownloads.com/images/arrow.gif"/></span></span><img alt="" src="http://lorempixum.com/300/400/"><figcaption><span class="description">Good Product</span><span class="description">Good Product</span><span class="description">Good Product</span></figcaption></figure>
        <figure>
        <span class="percent"><img alt="" src="http://i.imgur.com/9cfK5.png"/><span class="rotate">30%</span></span><img alt="" src="http://lorempixum.com/300/400/"><figcaption><span class="description">Good Product</span></figcaption></figure>
        <figure>
        <span class="percent"><img alt="" src="http://i.imgur.com/9cfK5.png"/><span class="rotate">5%</span></span><img alt="" src="http://lorempixum.com/300/400/"><figcaption><span class="description">Good Product</span></figcaption></figure>
        <figure>
        <span class="percent"><img alt="" src="http://i.imgur.com/9cfK5.png"/><span class="rotate">100%</span></span><img alt="" src="http://lorempixum.com/300/400/"><figcaption><span class="description">Good Product</span></figcaption></figure>
        <figure>
        <span class="percent"><img alt="" src="http://i.imgur.com/9cfK5.png"/><span class="rotate">50%</span></span><img alt="" src="http://lorempixum.com/300/400/"><figcaption><span class="description">Good Product</span></figcaption></figure>
        <figure>
        <span class="percent"><img alt="" src="http://i.imgur.com/9cfK5.png"/><span class="rotate">15%</span></span><img alt="" src="http://lorempixum.com/300/400/"><figcaption><span class="description">Good Product</span></figcaption></figure>
        <figure>
        <span class="percent"><img alt="" src="http://i.imgur.com/9cfK5.png"/><span class="rotate">20%</span></span><img alt="" src="http://lorempixum.com/300/400/"><figcaption><span class="description">Good...

CSS

body {
    margin: 0;
    padding: 0;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
figure {
    float: left;
    width: 18%;
    
    padding: 0;position:relative;float:left;
margin:15px;background:yellow;display:inline
}
img {
    width: 100%;
}

figure img{display:block;}

.percent {
    content: '';
    position:absolute;
    right:-15px;
    top:-2px;
    height: 45px;
    width: 45px;
    line-height: 45px;
    font-size: 100%;
}

.percent img {
    width: 100%;
    height: auto;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;   
}

.description {display:block; font-size:120%;}

 

.rotate {
    position: relative;
    z-index: 2;
    
    display: block;
    text-align: center;
    
    color: #FFFFFF;
    font-weight: bold;

    text-shadow: 0 1px 1px #000000;
    }
.jamna {
   position: absolute;
    z-index: 3;
    top: 0;
    right: 0;width: 100%;
    height: auto;    
}

JavaScript

var $desc = $('.description');
var $percent = $('.percent, .jamna');
var orig = {
    description: $desc.width(),
    percent: $percent.width(),
    right: parseInt($percent.css('right'), 10)  
};
var setFontSize = function(){  
    // A ratio of the size change
    var change = $desc.width()/orig.description;  
    
    $desc.css({
        fontSize:  change * 100 + "%" 
    });
    $percent.css({
        fontSize:  change  * 100 + "%",
        width: orig.percent * change + "px",
        lineHeight: orig.percent * change + "px",
        right: orig.right * change + "px"
    });
    
} 
    
setFontSize();    
$(window).resize(setFontSize);