JSFiddle - React, Tailwind, and code Playground

by Ishank Dubey

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class='textFieldWithCal'>
<input type='text'/>
<i class="fa fa-calendar"></i>
</div>

<div class='parentArrow'>
  <div class='childArrow'>
    
  </div>
  
</div>

CSS

.textFieldWithCal{
  width:100%;
}

input{
  height:28px;
  width:100%;
  display:inline-block;
}
i{
  display:inline-block;
  position:relative;
  margin-left:-20px;
}
.parentArrow{
  background-color:red;
  width:50px;
  height:50px;
}

.childArrow{
  width:0px;
  height:0px;
  border-left: 20px solid black;
  border-right: 20px solid black;
  border-bottom: 20px solid red;
}