JSFiddle - React, Tailwind, and code Playground

by Daniel Paladini Adell

HTML

<h1 class="titular">TĂ­tulo principal</h1>

CSS

/* ESTILOS GENERICOS PARA TODOS LOS FORMATOS */
.titular {
	font-family:Helvetica, sans serif;
	font-size:24px;
	line-height:32x;
	padding-top:9px;
	padding-left:5px;
	padding-bottom:3px;
	font-weight:200;
	
	/* COLOR DE FONDO */
	background:GhostWhite;
}

/* SE APLICA DE 480px en adelante */
@media (min-width: 480px) {
  .titular {
    background: silver;
		font-size:26px;
		line-height:38x;
		/* COLOR DE FONDO */
  }
}

/* SE APLICA DE 768px en adelante */
@media (min-width: 768px) {
  .titular {
  	font-size:34px;
		line-height:40px;
		
		/* COLOR DE FONDO */
    background: gray;
  }
}

/* SE APLICA DE 1024px en adelante */
@media (min-width: 1024px) {
  .titular {
  	font-size:42px;
		line-height:38px;
		color:white;
		
		/* COLOR DE FONDO */
    background: black;
  }
}