JSFiddle - React, Tailwind, and code Playground

by harsha

HTML

<!DOCTYPE HTML>
<html>
  <body>
    <div style="background:gray; width:300px; padding: 10px; height:40px">

      <div style="float:left">
        <div class="arrow_head left_arrow"></div>
        <div style="width:20px; height:20px; background:#E9E9E9; margin-left:40px; margin-top:-30px"></div>
      </div>

      <div style="float:right">
        <div style="width:20px; height:20px; background:#E9E9E9; float:left; margin-top:10px"></div>
        <div class="arrow_head right_arrow" style="float:left"></div>
      </div>

    </div>

    <br />
    <div style="background:gray; width:300px; padding: 10px; height:40px">

      <div style="float:left; margin-top:-20px">
        <div class="arrow_head top_arrow"></div>
        <div style="width:20px; height:20px; background:#E9E9E9;  margin-left:10px"></div>
      </div>

      <div style="float:right">
        <div style="width:20px; height:20px; background:#E9E9E9; margin-left:10px"></div>
        <div class="arrow_head down_arrow"></div>
      </div>

    </div>


  </body>
</html>

CSS

.arrow_head {
        width: 0px; border-width: 20px; border-style: solid;  
        border-color: transparent transparent transparent transparent;
      }
      .top_arrow {
        border-bottom-color: #E9E9E9;
      }
      .down_arrow {
        border-top-color: #E9E9E9;
      }
      .right_arrow {
        border-left-color: #E9E9E9;
      }
      .left_arrow {
        border-right-color: #E9E9E9;
      }