JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tweet-container">
 

  <div class="tweet-container-right">
    <div class="tweet-header">
      <div class="user-info">
        <h3 class="tweet-name">Title </h3>
        
 
        <span class="middle-dot">&#183;</span>
        <p class="time">2d</p>
      </div>

      <div class="dots-popup-container">

        <div class="dot-wrap">
          <svg viewBox="0 0 24 24" aria-hidden="true" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi dots">
            <g>
              <circle cx="5" cy="12" r="2"></circle>
              <circle cx="12" cy="12" r="2"></circle>
              <circle cx="19" cy="12" r="2"></circle>
            </g>
          </svg>
        </div>






        <div class="popup">
          <div class="popup-option">

            <div>
              <svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
                <g>
                  <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
                  <path d="M12 13.415c1.892 0 3.633.95 4.656 2.544.224.348.123.81-.226 1.035-.348.226-.812.124-1.036-.226-.747-1.162-2.016-1.855-3.395-1.855s-2.648.693-3.396 1.854c-.224.35-.688.45-1.036.225-.35-.224-.45-.688-.226-1.036 1.025-1.594 2.766-2.545 4.658-2.545zm4.216-3.957c0 .816-.662 1.478-1.478 1.478s-1.478-.66-1.478-1.478c0-.817.662-1.478 1.478-1.478s1.478.66 1.478 1.478zm-5.476 0c0 .816-.662 1.478-1.478 1.478s-1.478-.66-1.478-1.478c0-.817.662-1.478 1.478-1.478.817 0 1.478.66 1.478 1.478z"></path>
                </g>
              </svg></div>
            <p>Not interested in this tweet</p>
          </div>

          <div class="popup-option">
            <div>
              <svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
                <g>
                  <path d="M20.083 6.173l2.323 2.323c.293.293.768.293 1.06...

SCSS

.tweet-container {
  max-width: 100%;
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 5%;
  padding-right: 5%;
  border-bottom: solid 1px #f1f1f1;
}

.tweet-container-right {
  width: 100%;
  margin-left: 10px;
}

.tweet-header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}

.icon-container {
  display: flex;
  font-size: 0.8em;
}

.user-info {
  display: flex;
  align-items: center;
 

  .tweet-name {
    font-size: 15px;
    margin-right: 3px;
    color: #0f1419;
  }

  .tweet-username {
    font-size:15px;
    
    color: #526470;
  }

  .middle-dot{
    margin-left: 3px;
    margin-right: 3px;
  }

  .time {
    font-size: 15px;
    color: #526470;
  }
}

.tweet-text {
  font-size: 0.8em;
}

.verified-tick{
  margin-right: 3px;
}

.dots-popup-container {
  position: relative;

  .dots {
    width: 18px;
    fill: red;
  }

  .popup {
    background-color: white;
    position: absolute;
    right: 0;
    top: 0;
    width: 250px;
    display: none;
    /*height: 0px;*/
    transition: 2s ease;
    box-shadow: 0 0.5px 4px 0 rgba(0, 0, 0, 0.2);
    padding-top: 14px;

    .popup-option {
      display: flex;
      margin-bottom: 20px;

      p {
        color: #526470;
      }
      .popup-icon {
        width: 20px;
        margin-left: 10px;
        margin-right: 10px;
        fill: #526470;
      }
    }
  }
}

JavaScript

window.onload = () => {
  const dots = document.querySelector(".dot-wrap");
  const popup = document.querySelector(".popup");

  dots.onclick = () => {
    popup.style.display = "block";
  }

  document.onclick = (event) => {
    let isClickInside = popup.contains(event.target);

    if (!isClickInside) {
      console.log("outside box");
      popup.style.display = 'none';
    }
  }


}