JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<div class="arena-detail-emedia">
    <a href="#" class="arena-ehub"><span>EPUB med Adobe-kryptering för PC, Mac, vissa läsplattor</span></a>

    <br>
        <a href="#" class="arena-ehub"><span>PDF med Adobe-kryptering för PC, Mac, vissa läsplattor</span></a>

    <br>
        <a href="#" class="arena-ehub"><span>Mobipocket för PC, handdator, vissa mobiler, läsplattor</span></a>

</div>

CSS

a.arena-ehub {
    height: 60px;
    width: 60px;
    border-radius: 5px;
    color: #fff;
    display:block;
    font-size: 11px;
    text-align: center;
    text-decoration: none;
    font-family: Helvetica, Arial, sans-serif;
    background-color: #D11341;
    font-weight: bold;
}
a.arena-ehub:hover {
    background-color: #64BFB7;
    color: #F1F1E3;
}
a.arena-ehub .epub, 
a.arena-ehub .pdf {
    line-height: 60px;
    letter-spacing: 1px;
}
a.arena-ehub .mobipocket {
    padding: 17px 10px;
    height: 26px;
    width: 40px;
    display: block;
}
.arena-ehub-desc {
    margin: 20px 0 0 0;
}

JavaScript

$(".arena-ehub span").each(function () {
    var text = $(this).text();
    if ($(this).text() == "EPUB med Adobe-kryptering för PC, Mac, vissa läsplattor") {
        $(this).text("EPUB");
        $(this).attr('title', 'EPUB med Adobe-kryptering för PC, Mac, vissa läsplattor').addClass('epub');
    }
    if ($(this).text() == "PDF med Adobe-kryptering för PC, Mac, vissa läsplattor") {
        $(this).text("PDF");
        $(this).attr('title', 'PDF med Adobe-kryptering för PC, Mac, vissa läsplattor').addClass('pdf');
    }
    if ($(this).text() == "Mobipocket för PC, handdator, vissa mobiler, läsplattor") {
        $(this).text("Mobi-pocket");
        $(this).attr('title', 'Mobipocket för PC, handdator, vissa mobiler, läsplattor').addClass('mobipocket');
    }
});


$('.arena-detail-emedia').append('<div class="arena-ehub-desc">OBS! Mobipocket fungerar till PC, handdator, vissa mobiler, läsplattor, ej Mac.</div>');