JSFiddle - React, Tailwind, and code Playground

by luamelo

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>
<!-- não mexer no html -->

CSS

/*blue
/*red
/*orange*/
/*Usar apenas esta área*/

ul.list-group{
  width:300px;
  background:"green"
}

ul li:nth-child(2){
  background-color:orange
}

ul li:nth-child(1){
  background-color:red
}
ul li:nth-child(3){
  background-color:blue
}

JavaScript

/*
Usando CSS, adicionar background 'blue' no último item da lista, background 'red' no primeiro item da lista e background 'orange' no segundo item da lista.

Ao final, centralizar o box da lista (ul) horizontalmente usando a propriedade translate.
*/

//#sidebar > div.module.sidebar-related > div > div:nth-child(1) > a:nth-child(1)