JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<p class="article-body-component">Earlier this month, security researcher Troy Hunt <a href="https://www.troyhunt.com/the-773-million-record-collection-1-data-reach/" target="_blank">identified</a> the first tranche of that mega-dump, 
<hr>

<div class="article-body-component blockquote">
<p>
<a href="https://www.wired.com/story/collection-one-breach-email-accounts-passwords/">named Collection #1 by its anonymous creator</a>, a patched-together set of breached databases Hunt said represented 773 million unique usernames and passwords. Now other researchers have obtained and analyzed an additional vast database called Collections #2–5, which amounts to 845 gigabytes of stolen data and 25 billion records in all. After accounting for duplicates, analysts at the Hasso Plattner Institute in Potsdam, Germany, found that the total haul represents close to three times the Collection #1 batch.
</p>

CSS

.article-body-component a {
    background-color: transparent;
    color: inherit;
    text-decoration: none;
    -webkit-transition: background .15s cubic-bezier(0.33, 0.66, 0.66, 1);
    -o-transition: background .15s cubic-bezier(0.33, 0.66, 0.66, 1);
    transition: background .15s cubic-bezier(0.33, 0.66, 0.66, 1);
    border-bottom: 3px solid #b4e7f8;
    -webkit-box-shadow: inset 0 -4px 0 #b4e7f8;
    box-shadow: inset 0 -4px 0 #b4e7f8;
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word
}

.article-body-component a:hover {
    background-color: #b4e7f8;
    color: #000
}

.article-body-component ul {
    list-style-position: outside;
    list-style-type: disc;
    margin: 0 0 14px 20px
}

.article-body-component li {
    margin: 0 0 14px;
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word
}

.article-body-component hr {
    margin: 50px auto
}

.article-body-component>div>blockquote {
    color: rgba(0,0,0,0.5);
    font-size: 16px;
    line-height: 26px;
    margin: 25px 0
}

.article-body-component>div>blockquote p {
    font-size: inherit;
    line-height: inherit
}

.article-body-component>div>p {
    margin-bottom: 14px;
    word-break: normal
}