JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 <section class="col-sm-5 it_noticias">
        <div class="row row-header">
            <div class="col-sm-4 centrar-cabecalho">
                <h2 class="nome_do_topico_itzone">WINDOWS</h2>
            </div>
            <div class="col-sm-4 centrar-cabecalho">
                <form action="search" class="it_pesquisa_Noticias_icon">
                    <a href="javascript:void(0)">
                        <i class="itf-pesquisa"></i>
                    </a>
                    <input type="search" Placeholder="Pesquisa...">
                </form>
            </div>
            <div class="col-sm-4 centrar-cabecalho">
                <button class="btn">
                    <i class="itf-mais_opcoes"></i>
                    <span>Novo Tópico</span>
                </button>
            </div>
        </div>
        <article>
            <ul class="itzone_categorias">
                <li class="row itzone_categoria">
                    <div class="col-sm-5">
                        <div class="itzone_icon_new pull-left">
                            <i class="itf-mail_por_ler"></i>
                        </div>
                        <h2 class="itzone_titulo_categoria">Novidades</h2>
                        <br>
                        <span class="itzone_descricao">
							Dá aqui as tuas opiniões!
						</span>
                    </div>
                    <div class="col-sm-1 itzone_estado">
                        <span class="numero_topicos">41</span>
                        <br>
                        <small>Tópicos</small>
                    </div>
                  ...

SCSS

/*CORES*/

	$base-color: #5BC8AC;
	$base-white: #ececec;
	$base-headers: #07575B;
	$secondary-color: #003B46;
	$red: #FF5E51;
	$yellow: #FEBB00;
	$green: #18CF37;

	/*Outras cores, testar --> #c1d3c8(green blue) #6A5A5B (crimson)*/

	/**MIXINS**/

	@mixin headings {
	    h1, h2, h3,
	    h4, h5, h6 {
		   @content;
	    }
	}


	@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot svg) {
		$src: null;

		$extmods: (
			eot: "?",
			svg: "#" + str-replace($name, " ", "_")
		);

		$formats: (
			otf: "opentype",
			ttf: "truetype"
		);

		@each $ext in $exts {
			$extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
			$format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
			$src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
		}

		@font-face {
			font-family: quote($name);
			font-style: $style;
			font-weight: $weight;
			src: $src;
		}
	}

	@mixin transition($transition) {
	    -moz-transition:    $transition;
	    -o-transition:      $transition;
	    -webkit-transition: $transition;
	    transition:         $transition;
	}

	@mixin backface-visibility($visibility) {
	    -moz-backface-visibility:    $visibility;
	    -o-backface-visibility:      $visibility;
	    -webkit-backface-visibility: $visibility;
	    backface-visibility:         $visibility;
	}

	@mixin placeholder () {
	  ::-webkit-input-placeholder {@content}
	  :-moz-placeholder           {@content}
	  ::-moz-placeholder          {@content}
	  :-ms-input-placeholder      {@content}  
	}

	@mixin vertical-align($position: relative) {
		position: $position;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
  
  @include font-face('Open-Sans','../tiposDeLetra/Open_Sans/OpenSans-Regular', null, null, ttf);
	@include font-face('Montserrat-Bold','../tiposDeLetra/Montserrat/Montserrat-Bold',null,null, ttf);
	@include font-face('Proxima',...

JavaScript

$(document).ready(function(){
     $('[data-toggle="tooltip"]').tooltip();
	
 	$('.it_submenu > li > a').click(function() {
 		$(".it_submenu > li > a.activo").removeClass("activo");
 		var $Noticia = $('.it_noticias');
 		$Noticia.removeClass('mostrar');
 		$(this).addClass('activo');
		
 		if ($(this).hasClass('activo')){ 			
             $Noticia.addClass('mostrar');
 		}else{
 			$Noticia.removeClass('mostrar');
 		}
 	});
	
     	$('.itzone_categorias li').click(function(){
		$(this).find('activo').removeClass('activo');
		$(this).addClass('activo');
 		var $Post = $('.it_Post');
		
 		if($(this).hasClass('activo')){
 			$Post.addClass('mostrar');
 	   	}else{
 			$Post.removeClass('mostrar');					   
 	   	}
 	});
	
 	$('.it_pesquisa_Noticias_icon a').click(function(e){
		$('.it_pesquisa_Noticias_icon input').focus();
 	});
 });