JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="someBlock">
    <h2 class="someBlock-title">Title</h2>
    
    <div class="someBlock-things">
        <div class="someBlock-thing">
            <div class="someBlock-thingLabel">Label</div>
            <p class="someBlock-thingDescription">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, atque.</p>
        </div>
        <div class="someBlock-thing someBlock-thing-shiny">
            <div class="someBlock-thingLabel">Label</div>
            <p class="someBlock-thingDescription">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, mollitia.</p>
        </div>
        <div class="someBlock-thing">
            <div class="someBlock-thingLabel">Label</div>
            <p class="someBlock-thingDescription">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>

<div class="someBlock someBlock-alt">
    <h2 class="someBlock-title">Title</h2>
    
    <div class="someBlock-things">
        <div class="someBlock-thing">
            <div class="someBlock-thingLabel">Label</div>
            <p class="someBlock-thingDescription">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, atque.</p>
        </div>
        <div class="someBlock-thing someBlock-thing-shiny">
            <div class="someBlock-thingLabel">Label</div>
            <p class="someBlock-thingDescription">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, mollitia.</p>
        </div>
        <div class="someBlock-thing">
            <div class="someBlock-thingLabel">Label</div>
            <p class="someBlock-thingDescription">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>

SCSS

.someBlock {
    border: 2px solid red;
    margin-bottom: 3rem;
    padding: 1rem;
    
    &-things {
        display: flex;
    }
    
    &-thing:not(:first-child) {
        border-left: 1px solid lightgray;
        margin-left: 1rem;
        padding-left: 1rem;
    }
    
    
    &-thing-shiny {
        color: gold;
        font-weight: bold;
    }
    
    &-alt {
        background: darkslateblue;
        color: white;
        
        .someBlock-thing:not(:first-child) {
            border-color: red;
        }
    }
}