JSFiddle - React, Tailwind, and code Playground

https://stackoverflow.com/questions/48287414/calculate-spans-opacity-in-a-vignette-effect-manner

by karthick6891

HTML

<div id="nav">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  
  <div>Item 4</div>
  
  <div>Item 5</div>  
  <div>Item 6</div>
  <div>Item 7</div>
</div>

CSS

#nav {
background: green;
display: flex;
flex-direction: row;
justify-content: space-around;
}

#nav div {
color: white;
}

JavaScript

function getOpacity(length, index) {
  return Math.sin((1 / (length - 1) * index) * Math.PI);
}