JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pgram">
    <input placeholder="nonononoo" />
</div>

CSS

.pgram input {
    border: 0; margin: 0;
    width: 80px;
}
.pgram { 
    width: 150px; 
    height: 100px; 
    border: 1px solid #D8D8D8;    
    border-left: 0;
    height: 24px;
    text-indent: 10px;
    box-sizing: border-box;
    position: relative;
    display: block;
    margin-left: 10px;
}

.pgram::before {
    box-sizing: border-box;
    content: "";
    border: 1px solid #D8D8D8;    
    border-right: 0;
    display: block;
    -webkit-transform: skew(-45deg); 
    -moz-transform: skew(-45deg); 
    -o-transform: skew(-45deg); 
    width: 20px;
    height: 24px;
    position: absolute;
    left: -10px;
    top: -1px;
}