JSFiddle - React, Tailwind, and code Playground

by ducka

HTML

<div class="organiser">
    <div class="today">
        <h1>Today</h1>
        <p>Item 1</p>        
    </div>
    <div class="today">
        <h1>Today</h1>
        <p>Item 2</p>        
    </div>
    <div class="today">
        <h1>Today</h1>
        <p>Item 3</p>        
    </div>    
    <div class="tomorrow">
        <h1>Tomorrow</h1>
        <p>Item 4</p>        
    </div>
    <div class="tomorrow">
        <h1>Tomorrow</h1>
        <p>Item 5</p>        
    </div>
    <div class="tomorrow">
        <h1>Tomorrow</h1>
        <p>Item 6</p>        
    </div>
    <div class="nextweek">
        <h1>Next Week</h1>
        <p>Item 7</p>        
    </div>
    <div class="nextweek">
        <h1>Next Week</h1>
        <p>Item 8</p>        
    </div>
    <div class="nextweek">
        <h1>Next Week</h1>
        <p>Item 9</p>        
    </div>    
</div>

CSS

.organiser h1 { display: none; }
.today:first-of-type h1 { display:inline; }
.tomorrow:first-of-type h1 { display:inline; }
.nextweek:first-of-type h1 { display:inline; }