JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <div class="intro-frases" >
            <div class="row">
                <div class="col-md-6">
                    <h1 data-segundos="4" class="frases pull-right" >TESTE 1</h1>
                </div>
                <div class="col-md-6">
                    <h1 data-segundos="5" class="frases">TESTE 2</h1>
                </div>
            </div>

            <h1 data-segundos="0" class="frases">TESTE 3</h1>
            <h1 data-segundos="11" class="frases">TESTE4</h1>
            <h1 data-segundos="14" class="frases" style="font-size: 200px;">TESTE5</h1>
            <div class="row">
                <div class="col-md-6">
                    <h1 data-segundos="5.5" class="frases">TESTE 6</h1>
                </div>
                <div class="col-md-6">
                    <h1 data-segundos="6" class="frases">TESTE 7</h1>
                </div>
            </div>
        </div>

CSS

.intro-frases h1:nth-child(1),
.intro-frases h1:nth-child(4) ,
.intro-frases h1:nth-child(7)

{
  color: red;
	font-weight: 600;
}