JSFiddle - React, Tailwind, and code Playground

by KURO KUMO

HTML

<div id="scroll-container" class="row">
    <div class="col-xs-12 special">
        <h1 class="title">SPECIAL</h1>
    </div>
    <div class="col-xs-12 morning">
        <h1 class="title">MORNING</h1>
    </div>
    <div class="col-xs-12 morning">
        <h1 class="title">MORNING</h1>
    </div>
    
    <div class="col-xs-12 morning">
        <h1 class="title">MORNING</h1>
    </div>
    
    <div class="col-xs-12 day">
        <h1 class="title">DAY</h1>
    </div>
    
    <div class="col-xs-12 day">
        <h1 class="title">DAY</h1>
    </div>
    
    <div class="col-xs-12 day">
        <h1 class="title">DAY</h1>
    </div>
    
    <div class="col-xs-12 night">
        <h1 class="title">NIGHT</h1>
    </div>
    
    <div class="col-xs-12 night">
        <h1 class="title">NIGHT</h1>
    </div>
    
    <div class="col-xs-12 night">
        <h1 class="title">NIGHT</h1>
    </div>
</div>

CSS

.title {
    color:#fff;
    background:#333;
}
.first .title{
    color:red;
    background:#eee;
}

JavaScript

$(".special:first").addClass("first");
$(".morning:first").addClass("first");
$(".day:first").addClass("first");
$(".night:first").addClass("first");