JSFiddle - React, Tailwind, and code Playground

HTML

<input class="box" placeholder="Search intent names and display examples">

SCSS

input {
    display: inline-block;
    margin: 0;
    outline-color: rgb(0, 0, 0);
    outline-offset: 0px;
    outline-style: dashed;
    outline-width: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
    &[placeholder] {
        overflow: hidden;
        text-overflow:ellipsis !important;
        white-space: nowrap;
    }
    &::placeholder {
        overflow: hidden;
        text-overflow:ellipsis !important;
        white-space: nowrap;
    }
}