JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html lang="fr">
<head>
    <meta charset="UTF-8">

    <style>
    
article {
    display: inline-block;
    border: solid 1px black;
    
    -moz-transition-duration: 2s;
    -moz-transition-property: border-width;

    -webkit-transition-duration: 2s;
    -webkit-transition-property: border-width;
}

article:hover {border-width: 10px;}    


section::first-line {color: red}    
    </style>

</head>
<body><div id="main">
    <section>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
        <article>lorem ipsum</article>
    </section>
</div></body>    
</html>