JSFiddle - React, Tailwind, and code Playground

HTML

<div class="user__contacts">
  <a href="#" class="user__contacts-link">
		Мои контакты
  </a>
  <div class="dropp__wrapp">
    <div class="user__info">
		  <div class="dropp__cursor">	
			</div>
      <p>
	      Pechkin@com.net
      </p>
		  <p>
	      9320432080938764232
		  </p>
	    <p>
		  	Pechkin	
		  </p>
	 </div>
  </div>
</div>

CSS

.user__contacts {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	background: #efefef;
}

.user__contacts-link:hover+.dropp__wrapp{
	opacity: 1;
}

.user__contacts-link {
    display: inline-block;
    color:#000;
    text-decoration:none;
    cursor: pointer;
    position:relative;
}
.user__contacts-link:after {
    background-color: #CD5C5C;
    display: block;
    content: "";
    height: 2px;
    width: 0%;
    left:50%;
    position:absolute;
    -webkit-transition: width .3s ease-in-out;
    -moz--transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
    -webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    transform:translateX(-50%);
}

.user__contacts-link:hover {
	color:#CD5C5C;
}

.user__contacts-link:hover:after,
.user__contacts-link:focus:after {
    width: 100%;
}

.dropp__wrapp {
	display: inline-block;
	position: absolute;
	top: 100%;
  left: 50%;
	z-index: 999;
	opacity: 0;
	transition: opacity ease-in-out 1s;
}



.user__info {
	margin-top: 20px;
	display: block;
	position: relative;
	background: #fff;
	border: 1px solid grey;
	border-radius: 10px;
}

.user__info p {
	border-bottom: 1px solid grey;
	padding: 10px 50px;
	margin: 0;
	text-align: left;
	white-space: nowrap;
}


.dropp__cursor {
	display: block;
	position: absolute;
	bottom:100%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-left: 1px solid grey;
	border-top: 1px solid grey;
	background: #fff;
  /*Проблемный код*/
	transform: rotate(45deg);
	transform: translate(-50%,-50%);
}