JSFiddle - React, Tailwind, and code Playground

by alirokni

HTML

<div class="box-modal-container">
  <div class="box-top-arrow"></div>
  <div class="box-right-arrow"></div>
  <div class="box-modal">
    <div>this is a test<br/>this is a test</div>
    <div>this is a test<br/>this is a test</div>
    <!--div>this is a test<br/>this is a test</div>
    <div>this is a test<br/>this is a test</div>
    <div>this is a test<br/>this is a test</div>
    <div>this is a test<br/>this is a test</div>
    <div>this is a test<br/>this is a test</div>
    <table border="0" width="100%">
      <tr>
        <th colspan="0">title</th>
      </tr>
      <tr>
        <td>one</td>
        <td>two</td>
      </tr>
      <tr>
        <td>three</td>
        <td>four</td>
      </tr>
      <tr>
        <td>three</td>
        <td>four</td>
      </tr>
    </table-->
  </div>
  <div class="box-bottom-arrow"></div>
  <div class="box-left-arrow"></div>
</div>

CSS

.box-modal-container {
  padding: 10px;
  min-width: 50px;
  position: relative;
}

.box-modal {
  border: 1px solid rgba(57, 70, 78, .5);
  border-radius: 5px;
  box-shadow: 1px 1px 2px 2px rgba(57, 70, 78, .5);
  height: inherit;
  text-align: center;
  display: block;
}

.box-top-arrow,
.box-right-arrow,
.box-bottom-arrow,
.box-left-arrow {
  width: 0;
  height: 0;
  margin: 0 auto;
  border-top: initial;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.box-right-arrow,
.box-left-arrow {
  position: absolute;
  top: 40%;
}

.box-top-arrow {
  border-bottom: 10px solid rgba(57, 70, 78, 0.87);
}

.box-right-arrow {
  border-top: 10px solid transparent;
  border-left: 10px solid rgba(57, 70, 78, 0.87);
  right: -12px;
}

.box-bottom-arrow {
  border-top: 10px solid rgba(57, 70, 78, 0.87);
}

.box-left-arrow {
  border-top: 10px solid transparent;
  border-right: 10px solid rgba(57, 70, 78, 0.87);
  left: -10px;
}