JSFiddle - React, Tailwind, and code Playground

HTML

<div id="segement1">segement1</div>
<div id="segement2">segement2</div>
<div id="segement3">segement3</div>

CSS

.myprojects_div {
  display: flex;
  flex-direction: column;

}

.myprojects_text {
  display: inline-block;
  font-size: 16px;
  font-family: "Arial Round MT Bold";
  color: #ffffff;
  line-height: 1.2;
  padding-top: 0px;
  margin-left: 10px;
  z-index: 2;
}
.fa.fa-list-alt {
  color: #ffffff;
}
.btn.btn-primary.btn-lg{
  background-color: #1b191a ;
  border: #1b191a;
  height: 49px;

}

.btn.btn-primary.btn-lg:hover,
.btn.btn-primary.btn-lg:focus,
.btn.btn-primary.btn-lg:active
 {
    box-shadow: none;
    color: #8e8e8e;
    cursor: pointer;
}

JavaScript

$(document).ready(function(){
  $("#segement1, #segement2, #segement3").click(function(){
  	alert($(this).attr("id"));
  });
});