JSFiddle - React, Tailwind, and code Playground

by Douglas Santos

HTML

<h1>Carros Clássicos</h1>
<div class="grupo-1">
  <h2>MERCEDES-BENZ 190SL</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel condimentum odio. Nunc porta in justo ac pharetra. In hac habitasse platea dictumst. Proin aliquet congue mi, eu finibus lorem.</p>

  <h2>SHELBY COBRA DAYTONA COUPE - 1964</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel condimentum odio. Nunc porta in justo ac pharetra. In hac habitasse platea dictumst. Proin aliquet congue mi, eu finibus lorem.</p>

  <h2>MERCDES-BENZ 300SL - 1955</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel condimentum odio. Nunc porta in justo ac pharetra. In hac habitasse platea dictumst. Proin aliquet congue mi, eu finibus lorem.</p>
</div>
<div class="grupo-2">
  <h2>FERRARI 166MM BARCHETTA - 1950</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel condimentum odio. Nunc porta in justo ac pharetra. In hac habitasse platea dictumst. Proin aliquet congue mi, eu finibus lorem.</p>

  <h2>FERRARI DINO 246 GTS - 1974</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel condimentum odio. Nunc porta in justo ac pharetra. In hac habitasse platea dictumst. Proin aliquet congue mi, eu finibus lorem.</p>
</div>

CSS

Body{
  font-family: Sans-serif;
}

h1{
  font-size: 2em;
  color: #9a0000;
}

/* com seletores encadeados, eu consigo aplicar estilo para todos os elementos do tipo h1 dentro da minha div */

.grupo-1 h2{
  color: #0052b6;
}

.grupo-2 h2{
  color: #226b00;
}

/* com seletores agrupados, eu consigo aplicar os mesmos estilos para duas clases ao mesmo tempo  */

.grupo-1 h2, .grupo-2 h2{
  font-size: 1.4em;
  font-weight: 500;
}