JSFiddle - React, Tailwind, and code Playground

HTML

<section id="eddikefarver">
            <h2 class="h2titel">Vores produkter</h2>
            <div class="bigbox">
                <div class="super-box">
                    <div class="infocontainer">
                        <div class="boxbox1">
                            <div class="icon_bg"></div>
                        </div>
                        <div class="icon">
                            <a href="#" class="billedelink">
                                <img width="42" height="40" src="img/balsamicoroed.png" alt="Rød balsamicoeddike ikon">
                            </a>
                        </div>
                    </div>
                    <div class="text">
                        <p class="title">Røde eddiker</p>
                    </div>
                </div>
                </div>
</section>

CSS

.bigbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 35vh;
    font-family: system, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 20px;
    color: #5d6494;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.infocontainer {
    width: 220px;
    height: 220px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.boxbox1,
.boxbox2,
.boxbox3 {
    position: absolute;
    width: 220px;
    height: 220px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    border-radius: 3px;
    overflow: hidden;
    -webkit-transition: -webkit-box-shadow ease 1s;
    transition: -webkit-box-shadow ease 1s;
    transition: box-shadow ease 1s;
    transition: box-shadow ease 1s, -webkit-box-shadow ease 1s;
}

.icon {
    position: relative;
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease;
    -webkit-transition-delay: 0.32s;
    transition-delay: 0.32s;
    will-change: transform;
}

.icon_bg {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    border: 1px solid rgba(225, 227, 232, 0.18);
    -webkit-box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.25);
    box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.25);
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
...