JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div class="inpt"> 
    <span class="left arrow"></span>
    <input type="text" /> <span class="right arrow"></span>
</div>

CSS

.inpt {
    position:relative;
    margin:5%;
    width:50%;
}
.left, .right {
    position: absolute;
    top:14px;
}
.right {
    right:0;
}
.arrow:after, .arrow:before {
    top: 50%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow:after {
    border-color: rgba(255, 255, 255, 0);
    border-width: 12px;
    margin-top: -12px;
}
.arrow:before {
    border-color: rgba(220, 228, 228, 0);
    border-width: 15px;
    margin-top: -15px;
}
.left:after, .left:before {
    right: 100%;
}
.left:after {
    border-right-color: #fff;
}
.left:before {
    border-right-color: #dce4e4;
}
.right:after, .right:before {
    left: 100%;
}
.right:after {
    border-left-color: #fff;
}
.right:before {
    border-left-color: #dce4e4;
}
.focused input {
    border-color: #afddda;
}
.focused .right:before {
    border-left-color: #afddda;
}
.focused .left:before {
    border-right-color: #afddda;
}
input {
    border-top: 2px #dce4e4 solid;
    border-bottom: 2px #dce4e4 solid;
    border-left:none;
    border-right:none;
    padding:2px 10px 0px;
    height: 29px;
    display: block;
    outline: 0;
    width: 100%;
    margin: 6px 0;
    box-sizing:border-box;
}

JavaScript

$('input').focus(function () {
    $(this).parent().addClass('focused');
});

$('input').blur(function () {
    $(this).parent().removeClass('focused');
});