JSFiddle - React, Tailwind, and code Playground

by manoj jasti

HTML

<div class="actions">
<div class="actions_bar"><span class="bar_label_actions actions_label">ACTIONS</span>
		<p class="number_of_employes nbractions actions_cnt">sadf</p>
 <div id="dots">   
  </div>  
    <div class="icon_container">
        <div class="alert_icon_item_station"></div>
        <div class="alert_icon_item_station"></div>
        <div class="alert_icon_item_station"></div>
        <div class="alert_icon_item_station"></div>
                <div class="alert_icon_item_station"></div>
        <div class="alert_icon_item_station"></div>
                <div class="alert_icon_item_station"></div>
        <div class="alert_icon_item_station"></div>
                <div class="alert_icon_item_station"></div>
        <div class="alert_icon_item_station"></div>
        <div class="alert_icon_item_station"></div>
        <div class="alert_icon_item_station"></div>
                <div class="alert_icon_item_station"></div>
        <div class="alert_icon_item_station"></div>
                <div class="alert_icon_item_station"></div>
        <div class="alert_icon_item_station"></div>
    </div>
    
    </div>

CSS

#dots .active {
  background:#fff;
}
.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;
}
#dots {
  list-style:none;
  margin-bottom: 8px;
height:2.3em;
    text-align:center;
    margin:0 auto;
    display:inline-block;
    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;
    position:relative;
}
.actions{
    width:100%;
}

.actions_bar{
    background-color: #ff6600;
    height:2.3em;
    text-align:left;
    box-shadow:0px 6px 5px -3px rgba(0,0,0,0.5);
}
.alert_icon_item_station{
    top: 2.3em;      
	left: 1em;	
	width: 10em;
	height: 6em;	
    display:inline-block;
	cursor: pointer;
	z-index: 500; 
    background-color:#6b6b6b;
    border:1px solid #fff;
    white-space:normal;
}
.icon_container{
    white-space:nowrap;
    margin:0 auto;
    text-align:center;
    display:table;
    position:relative;
}
.left{
}
.right{
}

JavaScript

// dots load dynamically
// do we have to check when window changes ?
// todo work on div cutting 
// todo work on adding navigation dots for div cutting
// todo check center aligning of div dots



$(document).ready(function () {
    var rightCss= $("icon_container").offsetLeft;
    var animationSpeed = 1000;
    // find window width
    var windowWidth= $(window).width();  
    
    // center dots
    var dotWidth = $(".bar_label_actions").outerWidth(true) + $(".actions_cnt").outerWidth(true);
    
    $("#dots").css("left", "calc(50% - "+ dotWidth + "px )");
  
   var widt= ($(window).width()/160) % 1;     
 
 // set cutting of divs

  
    
    
 // count num of pills on home screen and build navigation dots
      var fulWidth = $(".icon_container").find(".alert_icon_item_station").length * $(".alert_icon_item_station").outerWidth(true);
var noOfDots = Math.ceil(fulWidth/windowWidth);
    if(noOfDots > 1 )
    {
        var elem =$("#dots");
        var nodeHtml = "";
        for(var i =0; i< noOfDots; i++){
        nodeHtml += "<div></div>";
        }
        elem.append(nodeHtml);
        $("#dots").find("div").first().addClass("active");
    }
    
    
    // add dots click interactivity
    $("#dots div").click(function () {
        
        // get currentactive index
        var currentIndex = $(".active").index();
       
        // going incrementing way from 0 to up
     if(currentIndex < $(this).index() ){
           rightCss =  (windowWidth * ($(this).index()-1) + windowWidth)
//        rightCss =  (windowWidth * ($(this).index()-1) + windowWidth)  - 160;
        $(".icon_container").animate({"right": rightCss + 'px'}, animationSpeed);
        $("#dots").find(".active").removeClass("active");
        $(this).addClass('active');
        }
        
        // going decrementing way up to 0
     else if(currentIndex > $(this).index() ){
    //     if ($(this).index() === 0){
          var rightCss = windowWidth * (currentIndex -...