JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ply">
    <span class="move">MOVIE TITLE</span>
    <span class="move">MOVIE TITLE</span>
    <span class="move">MOVIE TITLE</span>
    <span class="move">MOVIE TITLE</span>
    <span class="move">MOVIE TITLE</span>
    <span class="move">MOVIE TITLE</span>
    <span class="move">MOVIE TITLE</span>
    <span class="move">MOVIE TITLE</span>
    <span class="move">MOVIE TITLE</span>
    <span class="move">MOVIE TITLE</span>
    <span class="move">MOVIE TITLE</span>
    <span class="move">MOVIE TITLE</span>
    <span class="move">MOVIE TITLE</span>
</div>

CSS

.ply{

    counter-reset:main;             

}
.move{

    display:block;

}
.move:before {
    
    counter-increment: main;
    content:counter(main) ". ";
    font-size:15px;

}

.move.double:before{

    letter-spacing:-1px;
    font-size:13px;

}

JavaScript

$('.move').each(function(){
    if ($(this).index() > 8) $(this).addClass('double');
});