JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
<html>
<head>
  <meta name="viewport" content="user-scalable=no, width=device-width" />
  <title>The title</title>
    
  <script>
     function test(id) {
      alert('test');
         var listElement = document.getElementById(id);
         var title = listElement.getElementsByTagName("div");
         alert(title[0].style.opacity);
         alert(title.style.width);
     }
  </script>
    
</head>
<body>    
    
    <ul id = "list">
       <li id = "li1" onClick="test('li1');">
      <div id = "title" style = "opacity: 0.5">Title</div>
        
    </ul>

    
</body>
</html>

CSS

body {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c2c2c), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #2c2c2c 0%,#ffffff 100%);
    font-family: Helvetica; 
    margin: 0;              
    padding: 0;
}


ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

li {
    position: relative;
    background-image: grey;
    display: block;
    height: 80px;
}


#title {
    position:absolute;
    padding:0;
    margin:0;
    top: 7px;   
    left: 88px;
    width: 175px;
    font-size: 15px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 1px 1px 1px #f5f5f5;
    opacity:1.0;
}