JSFiddle - React, Tailwind, and code Playground

by Niffler

HTML

<div class="wrapper">
    
    <div class="select">Select 1</div><!-- padding-top -->
    <div class="select">Select 2</div>
    <div class="select">Select 3</div><!-- padding-bottom -->

    <p>Some text</p>

    <div class="select">Select 4</div><!-- padding-top -->
    <div class="select">Select 5</div>
    <div class="select">Select 6</div>
    <div class="select">Select 7</div>
    <div class="select">Select 8</div><!-- padding-bottom -->
    
<div>

CSS

.wrapper * {
    margin: 0;
    padding: 0;
}
.select {
    border-top: 30px solid #f00;
}
.select:last-of-type {
    border-bottom: 30px solid #f00;
}
.select + .select {
    border-top: 0;
}
.select + :not(.select) {
    border-top: 30px solid #f00;
}