JSFiddle - React, Tailwind, and code Playground

HTML

<section class="shop-cat-overview" id="main">
    <div class="category-img-wrapper"><div class="shop-cat-overlay opacity0"><div class="category-description"><h1 class="category-name-h1" style="font-size: 92px;">Accessoires</h1><p>Artikel in der Kategorie: 1</p><a href="http://127.0.0.1/staging/produkt-kategorie/accessoires/" title="Accessoires: Lorem ipsum dolor sit amet, consetetur sadipscing elitr bum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."> &gt;&gt;&gt; </a></div></div></div><div class="category-img-wrapper"><div class="shop-cat-overlay opacity0"><div class="category-description"><h1 class="category-name-h1" style="font-size: 53.4px;">Backpacks</h1><p>Artikel in der Kategorie: 2</p><a href="http://127.0.0.1/staging/produkt-kategorie/backpacks/" title="Backpacks: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur!"> &gt;&gt;&gt; </a></div></div></div><div  class="category-img-wrapper"><div class="shop-cat-overlay opacity0"><div class="category-description"><h1 class="category-name-h1" style="font-size: 36.8px;">Bandanas</h1><p>Artikel in der Kategorie: 0</p><a href="http://127.0.0.1/staging/produkt-kategorie/bandanas/" title="Bandanas: Die “Titelform (in URLs)” ist die URL-Variante des Namens. Sie besteht normalerweise nur aus Kleinbuchstaben, Zahlen und Bindestrichen."> &gt;&gt;&gt; </a></div></div></div><div style="margin: 0 0 20px 0;" class="hr"></div><div class="category-img-wrapper"><div class="shop-cat-overlay opacity0"><div class="category-description"><h1 class="category-name-h1" style="font-size: 92px;">Black Edition</h1><p>Artikel in der Kategorie: 0</p><a href="http://127.0.0.1/staging/produkt-kategorie/black-edition/"...

CSS

.shop-cat-overview{
    margin: 4% auto !important;
}

.category-img-wrapper{
    cursor: pointer;
    width: 15%;
    height: 400px;
    overflow: hidden;
    float: left;
    margin: 0 2% 2% 0;
    padding: 0;
    width: 100%;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-opacity: 0.40;
    -khtml-opacity: 0.40;
    opacity: 0.40;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
    filter:alpha(opacity=40);
}

.category-img-wrapper:nth-child(2) {
    float: left;
    width: 58%;
}

.category-img-wrapper:nth-child(6){
    float: left;
    width: 58%;
}

.category-img-wrapper:nth-child(3n) {
    margin: 0 0 2%;
    width: 40%;
}

.category-img-wrapper:nth-child(7) {
    margin: 0 0 2% 2%;
    width: 58%;
}

.category-description{
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -10% 0 0 -30%;
    font: 16px/1.8 "Titillium Web", sans-serif;
}

.category-description p{
    font-family: inherit;
}

.category-name-h1{
    color: #f6f6f6;
    font-weight: bolder;
    text-transform: uppercase;
    font-family: inherit;
    margin: 0;
    line-height: 1;
}

.shop-cat-overlay{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #ff0000;
    background-image: url('../images/de3f3f_tile-5x5px.png'),url('../images/stripe.png');
    background-repeat: repeat,repeat;
    background-position: 0 0 , 0 0;
    z-index: 100;
    /*    -moz-opacity: 0.50;
        -khtml-opacity: 0.50;
        opacity: 0.50;
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=5);
        filter:alpha(opacity=5);*/
    -webkit-transition: all 580ms ease;
    -moz-transition: all 580ms ease;
    -o-transition: all 580ms ease;
    -ms-transition: all 580ms ease;
    transition: all 580ms ease;
}

JavaScript

(function($) {
        $.fn.fitText = function(kompressor, options) {
// Setup options
            var compressor = kompressor || 1,
                    settings = $.extend({
                        'minFontSize': Number.NEGATIVE_INFINITY,
                        'maxFontSize': Number.POSITIVE_INFINITY
                    }, options);
            return this.each(function() {
// Store the object
                var $this = $(this);
// Resizer() resizes items based on the object width divided by the compressor * 10
                var resizer = function() {
                    $this.css('font-size', Math.max(Math.min($this.width() / (compressor * 10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
                };
// Call once to set.
                resizer();
// Call on resize. Opera debounces their resize by default.
                $(window).on('resize.fittext orientationchange.fittext', resizer);
            });
        };
    })(jQuery);
    
    jQuery(".category-name-h1").fitText(0.5, { minFontSize: '20px', maxFontSize: '100px' });