JSFiddle - React, Tailwind, and code Playground

by manoj jasti

HTML

<div class="actions_bar"><span class="bar_label_actions actions_label">ACTIONS</span>
		<p class="number_of_employes nbractions actions_cnt">sa</p>
           <div id="dots">   
            <div class="active"></div>
            <div></div>
            <div></div>
            <div></div>
           </div> 
	</div>

CSS

#dots .active {
  background:#fff;
}

#dots {
  list-style:none;
  margin-bottom: 8px;
height:2.3em;    
    display:inline-block;
    text-align:center;
    padding-top:12px;
    position:relative;
/* left:calc(50% - 6.5em); */
}
#dots div {
  display:inline-block;
  border-radius:10px;
  width:10px;
  height:10px;
  margin: 0 5px;
  border:2px solid #fff;
  background: #ff6600;
  cursor:pointer;
    
}
.dotswrap{
    float:left;
    margin:0 auto;
    text-align:center;
    
}

.bar_label_actions{
	font-size: 1.2em;
	font-weight: 700;
	line-height: 2;
}
.actions_bar{
	clear: both;
	background-color: #ff6600;
	height: 2.3em;
	-webkit-box-shadow: 0px 6px 5px -3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 6px 5px -3px rgba(0,0,0,0.5);
	box-shadow: 0px 6px 5px -3px rgba(0,0,0,0.5);
	text-align: left;
}
.actions_label{
	margin-left: .8em;
}
.number_of_employes{
	border-radius: 15px;
	padding: 0px 8px; 
	position: absolute;
	top: .35em;
	font-size: 1.20em;
	font-weight: 700;
	left: 6em;
	background:#FF0000;
}
.nbractions{
	left: 5.7em;
}

JavaScript

$(document).ready(function (){
    
  var windowWidth= ($(window).width()/160) % 1; 
var widt = ($(".bar_label_actions").outerWidth(true) + 
    $(".number_of_employes").outerWidth(true)) ;

    
    
$("#dots").css("left","calc(50% - "+ widt + "px )");
    
    
    
});