JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<input type="text" placeholder="[email protected]">

CSS

input {
    width: 550px;  
    height: 50px;  
    padding: 10px;
    background: #eee;  
    border: 20px solid transparent;   
    -webkit-border-image: -webkit-linear-gradient(to right,  #000000 0%,#000000 10%,#ffffff 10%,#ffffff 90%,#000000 90%,#000000 100%);  
    border-image: linear-gradient(to right,  #000000 0%,#000000 10%,#ffffff 10%,#ffffff 90%,#000000 90%,#000000 100%);  
    border-image-slice: 1;  
    background: #FFFFFF;
    font-size: 36px;
}