JSFiddle - React, Tailwind, and code Playground

HTML

<div class="promoçoes">
        	<h1>Promoções</h1>
            <ul>
            	<li>
                	<img class="imageproduct" alt="produto" src="imagesprodutos/newoyorkrelogio.jpg">
                    <a href="#"><h2>Relógio <br>New York</h2></a>
                    <h3>De R$ <strike>79,99</strike></h3>
                    <h3>Por R$ 69,99</h3>
                </li>
                <li>
                    <img class="imageproduct" alt="produto" src="imagesprodutos/portalivrodragao.jpg">
                    <a href="#"><h2>Porta Livro <br>Dragão</h2></a>
                    <h3>De R$ <strike>69,99</strike></h3>
                    <h3>Por R$ 49,99</h3>
            	</li>
                <li>
                    <img class="imageproduct" alt="produto" src="imagesprodutos/portalivrodragao.jpg">
                    <a href="#"><h2>Porta Livro <br>Dragão</h2></a>
                    <h3>De R$ <strike>69,99</strike></h3>
                    <h3>Por R$ 49,99</h3>
            	</li>
                <li>
                    <img class="imageproduct" alt="produto" src="imagesprodutos/portalivrodragao.jpg">
                    <a href="#"><h2>Porta Livro <br>Dragão</h2></a>
                    <h3>De R$ <strike>69,99</strike></h3>
                    <h3>Por R$ 49,99</h3>
            	</li>
                <li>
                    <img class="imageproduct" alt="produto" src="imagesprodutos/portalivrodragao.jpg">
                    <a href="#"><h2>Porta Livro <br>Dragão</h2></a>
                    <h3>De R$ <strike>69,99</strike></h3>
                    <h3>Por R$ 49,99</h3>
            	</li>
            </ul>
        </div>

CSS

.promoçoes{
	width:100%;
	height:650px;
	margin:0;
	padding:0;
	background-color:#878787;
}

.promoçoes h1{
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	color:#000000;
	text-align:center;	
}

.promoçoes ul{
	width:100%;
	height:600px;
	position:relative;
	list-style:none;
	margin:0;
	padding:0;	
}

.promoçoes ul li{
	display:inline-block;
	width:300px;
	background-color:#494949;
	margin:0;
	margin-left:20px;
	padding:0;
	overflow:hidden;	
}

.imageproduct{
	width:300px;
	height:300px;	
}

.promoçoes ul li a{
	color:#ccc;
	text-decoration:none;
	margin:0;
	padding:0;		
}

.promoçoes ul li a:hover{
	color:#BFBE19;	
}

.promoçoes h2{
	text-align:center;
	font-size:25px;
}

.promoçoes h3{
	color:#000000;
	text-align:center;	
}

JavaScript

$(document).ready(function(){
	"use strict";
  
  ScrollPromocao();
  
  function ScrollPromocao(){
		var $promo = $(".promoçoes");
		var $ulPromo = $(".promoçoes ul");
		var $liPromo = $(".promoçoes ul li");
		var $ulPlus = "30%";
		
		if($ulPromo.width() > $promo.width() && $liPromo.length > 4){
			$promo.css('overflow-x', 'scroll');
			$ulPromo.css('width', $liPromo.width() * $ulPlus);
		}
		
		
	}
	
}); // Close document.ready function